🎢

絶対パスと相対パスの違いの例え話

に公開

新人エンジニアのshinchaniaです。

2回目の内容は、絶対パスと相対パスの違いを理解したときの話です。
勉強をしたり、資格を取った際、この2つの言葉を目にすることが多く
何が絶対で何が相対なのか?
最初は理解ができていなかったのですが、
あることに例えたら簡単に理解することができました。

絶対パス → ルート(最上位)からの完全な住所

例:日本にあるテーマパークへの道案内
日本 > 東京都 > 最寄り駅 > テーマパーク 
といったように、どこにいる人でもこの道案内を見れば、
テーマパークへ行くことができます。
絶対パスとは、ルートディレクトリ(最上位)から、目的のファイルまでの経路を
すべて書いたパスのことです


例(Linux / Mac)

/home/user/tokyo/station/park.jpg

先頭の

/

は、ルートディレクトリを表します。


例(Windows)

C:\Users\user\tokyo\station\park.jpg

Windowsでは、

C:

がドライブ、

\

がディレクトリの区切りです。
また、Windowsではドライブごとにルートディレクトリが存在します。

C:\
D:\
E:\

相対パス → 今いる場所からの道案内

例:「今いる駅の改札から右に5分歩くとテーマパークがあります」
これは、今いる場所を基準にした道案内です。
相対パスは、カレントディレクトリ(現在のディレクトリ)を基準にして書くパスです。

<img src="park.jpg">

これは「今いるディレクトリの中にある park.jpg」という意味になります。

カレントディレクトリとは

カレントディレクトリとは、
現在作業しているディレクトリ(今いる場所)のことです。

  • ターミナルでコマンドを実行している場所
  • プログラムが実行されている場所
  • HTMLファイルが存在する場所(Webの場合)

など、実行環境によって場所が決まります。
例えば、次の構造があるとします

tokyo/
 ├ station/
 │   ├ park.jpg
 │   └ index.html

もし、今開いているファイルが

tokyo/station/index.html

なら、カレントディレクトリは

tokyo/station/

になります。この状態で

<img src="park.jpg">

と書くと、

tokyo/station/park.jpg

を参照します。

「.」と「..」の意味

相対パスでは、フォルダ名の代わりに特別な記号が使えます。

記号 意味
. カレントディレクトリ(省略可能)
.. 一つ上の階層を表す

./ の使用例

<img src="./park.jpg">

これは

<img src="park.jpg">

と同じ意味ですが、
カレントディレクトリから参照する
ことを明確に示しています。
./ は省略することが可能です。使用せず記載しても構いません。

../の使用例

1つ上に戻り、ファイルを参照する

tokyo/
 ├ park.jpg
 └ station/
     └ index.html

index.html から park.jpg を参照する場合

<img src="../park.jpg">

意味

  • .. → 1つ上に戻る(tokyo)
  • park.jpg → その中のファイル

2つ上に戻り、ファイルを参照する

../../park.jpg

これは

  • 1回目の .. → 1つ上へ
  • 2回目の .. → さらに上へ

という意味になります。

Webにおける絶対パス

Webでは、

/

は、ドメインのルートを表します。

https://example.com/

この場合

<img src="/tokyo/station/park.jpg">

は、

https://example.com/tokyo/station/park.jpg

を参照します。


実際の書き方例

絶対パス

<img src="/tokyo/station/park.jpg">
<img src="https://example.com/tokyo/station/park.jpg">

メリット

  • 常に同じ場所を指す
  • 外部サイトの指定ができる
  • カレントディレクトリの影響を受けない

デメリット

  • 長くなりやすい
  • フルURLで書いた場合、ドメイン変更時に修正が必要になる場合がある

相対パス

<img src="park.jpg">

または

<img src="../park.jpg">

メリット

  • 記述が短い
  • 構造が同じならプロジェクトごと移動しても動作する

デメリット

  • カレントディレクトリに依存する
  • ディレクトリ構造が変わるとリンク切れになる

例え話で覚える

絶対パスと相対パスは、住所で考えると理解しやすくなります。

絶対パス

  • 完全な住所
  • どこからでもたどり着ける

相対パス

  • 今いる場所からの道案内
  • 基準となる場所(カレントディレクトリ)が重要

まとめ

僕は例え話で物事を覚えることが好きで今回、このような方法で理解することができました。
改めて書き出すことでどういったものかを振り返ることができました。
他のことでも何かに例えて覚えるといった方法はできるはずです。
もし、今後何か難しく感じることが出てきた際には今どこにいて、どこに行こうとしているか?ということを意識して考えてみましょう。

株式会社くりぼー

Discussion