相対パスと絶対パス

この章のゴールは「相対パス」と「絶対パス」の概念を理解することです。

「相対パス」「絶対パス」は HTML だけに限らない概念で、「Web アプリ開発」「Web 制作（ホームページ作りなど）」「スマホアプリ開発」など、コードを使う開発全般で使う概念となります。

つまり必ず理解する必要があるものなど、理解しておかないと今後の学習で必ず詰まることになるので絶対に覚えておきましょう。

といっても、考え方はシンプルですぐに覚えられるので心配しないでください^^

そもそもパスとは

「相対パス」「絶対パス」の両方で出てくる「パス」という言葉は一体何を意味しているのでしょう？

「パス」の意味

パスを略さないでいうと「ファイルパス」「フォルダパス」と呼んだりもします。

ここでいうパスとは、英語でいうと「Pass」ではなく「Path」の方を指します。

辞書で「Path」を調べると「小道、細道、通り道」といったように「道」を意味します。

つまり「ファイルパス」「フォルダパス」とは「ファイルまでの道」「フォルダまでの道」を意味します。

これだけだと意味が分かりづらいかと思うので、もう少し付け加えて説明をするとそれぞれの意味は次のようになります。

• ファイルパス: とあるファイルが置いてある場所までの情報
• フォルダパス: とあるフォルダが置いてある場所までの情報

つまり、ファイルやフォルダがどこに置いてあるかを示した情報が「パス」ということです。

パスの具体例

ここまでは「パス」の抽象的な意味を見てきたので、「パス」のイメージをつきやすくするための具体例をみていきます。

以下に「フォルダパス（ディレクトリパス）」と「ファイルパス」の例を 1 つずつ挙げました。

// フォルダパス（or ディレクトリパス）
Desktop/sokushu-class/html-css

// ファイルパス
Desktop/sokushu-class/html-css/index.html

フォルダパスの例

フォルダパスの例から見ていきます。

「Desktop/sokushu-class/html-css」が意味することは、「Desktop」フォルダの中の「sokushu-class」フォルダの中の「html-css」フォルダまでの位置情報を指しています。

つまり、「html-css」フォルダまでの「通り道（Path）」を「/」区切りで示したものが「html-css」フォルダのパスとなります。

ファイルパスの例

ファイルパスもフォルダパスと同じ考えです。

「Desktop/sokushu-class/html-css/index.html」が意味することは、「Desktop」フォルダの中の「sokushu-class」フォルダのの中の「html-css」フォルダの中の「index.html」までの位置情報を指しています。

つまり、「index.html」ファイルまでの「通り道（Path）」を「/」区切りで示したものが「index.html」ファイルのパスとなります。

長くなってしまいましたが、パスの考え方（ファイルやフォルダまでの位置情報を「/」区切りで示す）をここまで説明してきました。

それでは次に、この章の本題である「相対パス」「絶対パス」について見ていきましょう。（パスの概念をおさえていれば「相対パス」「絶対パス」はすぐに覚えられます^^）

相対パス

相対パスは「現在地からみたファイルやフォルダの位置情報」になります。

相対パスを理解する上で重要となってくるのが「.」と「..」の意味を理解することです。

先に「.」と「..」の２つの意味を説明すると、それぞれの意味は次のとおりとなります。

• . : 現在地（現在いるフォルダ）
• .. : 現在地から見た１つ上のフォルダ

「.」の具体例

「現在地」という表現だとイメージがしづらいかと思うので、ここでは「sokushu-class」フォルダを開いている前提で話を進めたいと思います。（つまり、「sokushu-class」=現在地）

例えば、「sokushu-class」フォルダの中の構成が次の内容で作られているとします。

.
├── css
│   ├── common
│   │   └── reset.css
│   └── pages
│       └── top.css
├── images
│   ├── common
│   │   └── logo.png
│   └── pages
│       └── top.png
├── index.html
└── js
    ├── common
    │   └── main.js
    └── pages
        └── top.js

上記の構成図の１行目を見ると「.」というものがあります。

先ほど「相対パスでは.は現在地を意味する」と説明したように、ここでの「.」は「sokushu-class」フォルダ自身を意味します。

次に見ていただきたいのが、「sokushu-class」フォルダの直下に置かれている次の 3 つのフォルダと 1 つのファイルです。

• css フォルダ
• images フォルダ
• js フォルダ
• index.html ファイル

これらのフォルダとファイルを相対パスで表現した場合は次のようになります。

// CSSフォルダ
./css

// imagesフォルダ
./images

// jsフォルダ
./js

// index.htmlファイル
./index.html

繰り返しになりますが、ここでは「.」は「sokushu-class」フォルダを指すので、それぞれの意味は次のとおりとなります。

• ./css : 現在地（sokushu-class フォルダ）の中の css フォルダ
• ./images : 現在地（sokushu-class フォルダ）の中の images フォルダ
• ./js : 現在地（sokushu-class フォルダ）の中の js フォルダ
• ./index.html : 現在地（sokushu-class フォルダ）の中の index.html ファイル

このルールを理解した上でもう１つ、深い階層にあるファイルを具体例としてみてみます。

次の相対パスはどういう意味になるでしょうか？

./css/common/reset.css

これの意味は、「現在地（sokushu-class フォルダ）」の中の「common フォルダ」の中にある「reset.css」ファイルを指すパスとなります。

「..」の具体例

では次に、相対パスで重要なもう１つの概念である「..」の意味も見ていきましょう。

ここでは「現在地=css フォルダ」という前提で話を進めていきます。

つまり、「..」の具体例の話の中では「.=cssフォルダ」となります。

css フォルダから「index.html」「images/common/logo.png」を相対パスで表現する時は次のようになります。

• ../index.html
  • 意味: 現在値（css フォルダ）の１つ上の階層にある index.html
• ../images/common/logo.png
  • 意味: 現在値（css フォルダ）の１つ上の階層にある、images フォルダの中の common フォルダの中の logo.png

それでは「..」の理解度をさらに深めるために問題です。

css フォルダからもう１階層深い「common」フォルダの中から見た場合、「index.html」「images/common/logo.png」の相対パスはどのように表現するでしょうか。

答えは以下の通りです。

• ../../index.html
  • 意味: 現在値（common フォルダ）の１つ上の階層のフォルダ（=css フォルダ）の更に１つ上の階層のフォルダ（=sokushu-class フォルダ）の中にある index.html
• ../../images/common/logo.png
  • 意味: 現在値（common フォルダ）の１つ上の階層のフォルダ（=css フォルダ）の更に１つ上の階層のフォルダ（=sokushu-class フォルダ）の中にある images フォルダの中の common フォルダの中の logo.png

考え方はシンプルですが、最初は「..」を追うのに苦労するかもしれませんが、慣れの問題なので、とりあえず「..」を見たら「1 つ上の階層のフォルダ」を意味すると認識してもらえればと思います。

絶対パス

絶対パスは「ルートからみたファイルやフォルダの位置情報」になります。

結論から言うと「ルート」は「/」というフォルダから始まります。（「ルートフォルダ」「ルートディレクトリ」と呼ぶ）

例えば「パスの具体例」でも使ったパスの例を「絶対パス」で表現した場合は以下のようになります。

// フォルダパス（or ディレクトリパス）
/Users/Tsuyoshi/Desktop/sokushu-class

// ファイルパス
/Users/Tsuyoshi/Desktop/sokushu-class/index.html

もう少し理解度を深めるために、相対パスでも使った以下のフォルダ構成図を使って説明をします。

１行目の「.」は、ここでは絶対パスで話を進めるの「/Users/Tsuyoshi/Desktop/sokushu-class」と思って読み進めていただけたらと思います。

.
├── css
│   ├── common
│   │   └── reset.css
│   └── pages
│       └── top.css
├── images
│   ├── common
│   │   └── logo.png
│   └── pages
│       └── top.png
├── index.html
└── js
    ├── common
    │   └── main.js
    └── pages
        └── top.js

このときに「js」フォルダの中の「pages」フォルダの中の「top.js」ファイルを絶対パスで記述する場合どうなるでしょうか？

答えは「/Users/Tsuyoshi/Desktop/sokushu-class/js/pages/top.js」となります。

まとめ

今回は「相対パス」「絶対パス」の概念を「パスとは何か？」というところから話をしてきました。

「相対パス」「絶対パス」のルールは次のようにまとめられてシンプルです。

• 相対パス
  • 現在地（現在いるフォルダ）からみたパス
  • . は現在地を意味する
  • .. は現在地の１つ上の階層のフォルダを意味する
• 絶対パス
  • ルート（/）から見たパス

ただ、慣れるまでは「パスを追って読む」というのは大変かもしれませんが、開発する上で避けられない知識となるので、日々の学習から少しずつ慣れていただけたらと思います^^