※ この記事には厳密でない表現が含まれます

パス

ファイルやフォルダの場所を表す文字列のこと
英語表記は「path」で、目的地までの「道筋」を意味する
絶対パス, 相対パスという2つの書き方がある

例

絶対: C:/Users/example/images/image.png
相対: ./images/image.png

何が違う？

絶対, 相対の違いは「どこから書き始めるか？」

絶対パスはデメリットが多い
→プログラム上では相対パスを多用する

今回はこのフォルダを例にして比較する

C:
└─ Users/
    └─ example/
        ├─ images/
        │  └─ image.png
        └─ index.html

1. 絶対パス

書き始め: 一番上のフォルダ (C: など)
例: C:/Users/example/images/image.png
目的地 (ファイルなど) までのパスを全部書く

このようにファイルを指定できる:

// index.html
<img src="C:/Users/example/images/image.png">

デメリット

• パスを全部書くので長くなりやすい
• フォルダ名を変えると書き直しが必要

2. 相対パス

書き始め: 今いるフォルダを基準にした記号
例: ./images/image.png
現在地から目的地までのパスを書く

記号で場所を表す

. = 今いるフォルダを表す記号
.. = .のさらに1つ上のフォルダを表す記号
../.. のように、..の..なども表せる

例 (index.html → image.pngの相対パス)

index.htmlが今いるフォルダはexampleなので、このように書ける

• C:/Users/example/ → ./
• C:/Users/ → ../
• C:/ → ../../

比較

// index.html
// 絶対パス
<img src="C:/Users/example/images/image.png">
 
// 相対パス
<img src="./images/image.png">

メリット

• 短くなりやすい
• フォルダ名を変えても.や..のまま書ける