★Webページ作成支援~Simple Style★

JavaScriptのパス指定 Path

JavaScirptで「src」「href」「url」などを指定する場合、相対バスや絶対パス、URLなどの指定が可能です。
ここでは相対パス、絶対パスの記述方法や注意点などをまとめています。

パスとURL

パス
「パス」とは、使用するファイルなどが有る場所を示す文字列です(パソコンでは、フォルダ名の経路を示す文字列です)。
「URL」とは、パス(フォルダ)名にファイル名を加えた文字列です。

リンクを設定する場合や画像などのファイルを読み込む場合には、対象のファイルをパス付き(URL)で指定することになります。


URLとURIについて
色名で直接指定します。インターネット上の情報資源(リソース)の所在を特定するしくみを、従来はURL(uniform Resource Locator)と呼んでいました。しかし、HTML4.01では、より広義の「URI」(Uniform Resource Identifers)という用語が使用されています。URLと同様にHTML文書・画像・ビデオクリップ・ブログラムなどを特定できますが、URIのほうが普遍的で上位の概念であり、URLはこのURIのサブセットに位置づけられます。
ここの説明では 「URL」と表記しますが、「URI」と読み替えても差し支えありません。


URLの構造
URLは次のような構造になっています。

宣言(declaration) ファイル名
http:// example.com/ sample/index.html
スキーム ドメイン パス

スキーム
リソースにアクセスするための方法(プロトコルなど)を表します。
代表的なスキームには「http」「https」「ftp」などがあります。
ドメイン
リソースを取得するためにアクセスするコンピュータ(サーバー)を表します。
数字の場合もあります。
パス
サーバー内のリソースの所在を表します。

絶対パスと相対パス

Webページにリンクを設定したり、画像などを追加するには、リンク先のHTMLファイルや画像ファイルの位置を正確に記述する必要があります。

通常は、リンク先や画像ファイルを「相対パス(URL)」で指定します。
これは、ホームページを作成する際に「パソコン」上で作成し、リンクテストなどを経た後に「Webサーバ」にアップロードしますが、このとき相対URLで記述しておくと「リンク先」を書き直さなくても良いからです。


絶対パス(URL)
あるファイルの位置を、一番もとになる位置から階層構造を順番にたどって記述する方法です。
「http://」で始まります。
おもにほかのWebサイトにあるファイルを指定するときに使います。
 例:http://www.yahoo.co.jp/index.html

相対パス(URL)
あるファイルの位置を、基準とするファイルから見てどこにあるか「相対的」に記述する方法です。
おもに自分のWebサイト内のファイルを指定するときに使います。
相対URLでは、フォルダ(ディレクトリ)を移動するごとに「/」(スラッシュ)と「..」(ドット2つ)を利用して、ファイルの位置関係を表します。

同じフォルダ内にあるファイルを指定する場合
./(ドット+スラッシュ)ファイル名、またはファイル名のみ

同じフォルダ内の下位フォルダ内にあるファイルを指定する場合
下位フォルダ名/ファイル名

別フォルダにあるファイルを指定する場合
../同位フォルダ名/下位フォルダ名/ファイル名
../同位フォルダ名/ファイル名
../同位ファイル名
1つ上の階層なら、「../」を先頭につけます。
2つ上の階層なら、「../../」と書きます。

外部ファイルの相対パス

CSSやJavaScriptを外部ファイルとして使用する場合、相対パスの開始位置が異なります。

パスの指定 相対パスの位置
CSS(外部ファイル) 外部ファイルとしてCSSを使用する場合は、外部ファイルの格納先からの相対パスと指定なります
JavaScript (外部ファイル) 外部ファイルとしてJavaScriptを使用する場合は、JavaScriptを使用する位置(*)からの相対パスとなります
HTML内にCSS,JavaScriptを記述する場合 CSSもJavaScriptも該当位置(ページ)からの相対パスとなります

(*)JavaScriptを使用する場合通常、HTMLファイルに組み込みます。
よって、そのHTMLファイルからの相対パスを設定します。

記述例 Description example

下図のような構成のサイトがあると仮定します。

webサイトの構成図サンプル

index.htmlからimgフォルダ内のimage1.jpgを呼び出したい場合、index.html内に下記のように記述します。

相対パスでは、
<img src="img/image1.jpg">
もしくは、
<img src="./img/image1.jpg">
(./はこの階層にあるという意味です)

絶対パスでは、
<img src="http://ドメイン名/img/image1.jpg">


JavaScriptの相対パス
<例>sample1.html内に、JavaScriptの実行ファイル「sample1.js」を記述し、
sample1.jsの中で、imgフォルダ内のimage1.jpgを使用したい場合。
  
sample1.jsがまず、sample1.htmlへ読み込まれてから、画像の読み込みが実行されるので、sample1.htmlからの相対パスになります。

sample1.js
var IMGS = new Image();
IMGS.src = '../img/image1.jpg';
sample1.htmlから見て、親(1つ上の階層)「sampleフォルダ」と同位フォルダ「imgフォルダ」の中のimage1.jpgという指定を、sample1.js内に記述します。

ルートパス

ルートパス、ルート相対パス(root relative path)とは、最上位階層から目的がどこにあるかを示す方法です。
「ルート」というのは1番上のディレクトリ(フォルダ)のことです。
「/」から始まっていたらルートパスです。
例の場合( http://example.com/ )からのパスを指定します。
基本的な概念は絶対URLと同じですが、ドメインなどに関係なく指定することができるため、ローカルの開発環境でドメインが異なる場合などに便利です。

<a href="/index.html">
<a href="/about/index.html">

●ルートパスのメリット
・誰が見ても、どこに何があるのかわかりやすい(=大規模案件向け)
・ドメインを変更(サイトの引越し)をしても、リンクを修正しなくて良い

●ルートパスのデメリット
・ローカル環境での制作しづらい(MAMPやXAMPPをインストールして開発環境を整えないといけない)
・書く文字数が相対パスよりも圧倒的に長くなるので時間的コストがかかる
・文字数が多くなるので、ソースコードがわかりにくく、見づらくなる
ラインを表示