Webにおける相対パスと絶対パスの基本と使い分け（実例あり）

みなさんこんにちは！かんです。
今回はWeb制作には欠かせない、「パス」についてご紹介したいと思います。
普段当たり前に使っているパスですが、Web開発において「パス」は非常に重要な概念です。特に相対パスと絶対パスの違いを理解し、適切に使い分けることがプロジェクトの成功に繋がります。

今まで私自身も曖昧な部分がありましたので、自分への戒めとしても今回はその基本を実例とともに解説していきます。

パスの種類

パスには種類がいくつかあります。
大きく分けると「絶対パス」と「相対パス」に分かれますが、相対パスには「ルート相対パス」というものがあり、こちらは相対パスの仲間になります。
「ルート相対パス」は絶対パスと相対パスの良いとこ取りをしたようなもので、ドメイン名のみを省略して指定できるため、ドメインだけが修正された場合も修正の必要なく使用できます。
またオフラインで作業をしたい場合も、そのまま扱えるといったメリットがあります。

ルート相対パスはよく使用されており、大規模案件の際などにも用いられます。

相対パス（ルート相対パス）

ルート相対パスは、サーバーのルートディレクトリを基準にしてパスを指定する方法です。これにより、サイト内のどのページからでも、特定のディレクトリにアクセスすることができます。

またルート相対パスは、スラッシュ（/）から始まり、サーバーのルートを基準にファイルやディレクトリの場所を示します。

例えば以下のようなディレクトリがあったとします。

http://sample.co.jp/img/apple.jpg/

その際にルート相対パスでは、下記のように指定することにより、サイト内のどのページからでもこの画像を一貫して参照できます。

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

相対パスのメリット
・サイト全体を移動する際に修正が少なく済む。
・ローカル環境でも問題なく動作するため、開発がしやすい。

相対パスのデメリット
・ディレクトリ構造に依存するため、構造が変更されるとリンクが壊れることがある。

絶対パス

絶対パスは、URLまたはサーバーのルートディレクトリからの完全なパスを指定する方法です。これにより、どこからアクセスしても確実にそのディレクを参照することができます。絶対パスは、他のサイトを参照する際や、複数のドメインにまたがってファイルを利用する場合に有効です。

こちらも実例を交えてちょこっとご紹介します。

<img src="http://sample.co.jp/img/apple.jpg">

絶対パスを使用する際は上記のように「http://sample.co.jp」のドメイン配下の「img」のフォルダ内の「apple.jpg」が指定のファイルということになり、ドメインを含めて、完全なパスを指定します。

絶対パスのメリット
・ファイルの場所がどこにあるのか誰が見ても辿り着けること。
・他の表記方法がないためファイルで指定した場所が変わることがなく、リンク切れが起こりづらい。

絶対パスのデメリット
・サーバーやドメインが変わった場合、リンクをすべて手動で修正する必要がある。
・最上位のディレクトリから目的のファイルまですべてを記載するため、ソースが長くなる。

相対パスと絶対パスの使い分け

基本的には、ローカルのプロジェクト内では相対パスを、外部リソースやサーバーの特定の場所にアクセスする際には絶対パスを使うと良いでしょう。

相対パスと絶対パスをプロジェクト内で混在させると、後々のメンテナンスが難しくなります。
そのため一貫した方法でパスを指定することで、コードの可読性と保守性が向上します。

まとめ

パスの選び方はプロジェクトの規模や環境に応じて使い分けをすることが重要です。
前述したように一貫性を保ち、リンク切れを防ぐために、適切なパス指定方法を選びましょう。
この基本を押さえることで、Web開発におけるパスの扱いが確実に理解でき、適切に使えるようになります。

それではまた次回の更新でお会いしましょう。

YUIDEA CREATIVE公式note｜note