絶対パス・相対パスのメリット・デメリットとは?最適な使い分けを解説

「【第1回】HTMLとは?基本のタグ・コードの書き方を実演で解説!」の記事では、絶対パス・相対パスの基本的な考え方と、それぞれのファイルの指定の仕方を解説しました。しかし、どうやって使い分けるのかについては深掘りしませんでした。

そこで本記事では、絶対パス・相対パスそれぞれのメリットとデメリットを説明し、どんな使い分けが可能なのかを解説していきます。

絶対パス

この見出しでは絶対パスの使いどころを、メリットとデメリットを踏まえた上で説明します。その前に、絶対パスについて復習しておきましょう。「【第1回】HTMLとは?基本のタグ・コードの書き方を実演で解説!」で次のように解説しました。

1つは「絶対パス」。http(s)から始まるURLを使用して、ファイルをダイレクトに指定する方法です。主に外部ファイルなど、違うサーバのファイルを指定する場合に使用します。ファイルがどこにあっても、URLという一義的な値で指定するため常に同じパスが示されます。

では絶対パスのメリット・デメリットから見ていきましょう。

絶対パスのメリット・デメリット

引用にある「URLという一義的な値で指定するため常に同じパスが示され」るというのは、言い換えれば、サイトのドメインなどが変更されない限り、リンク切れが起こらないといことを意味します。しかし逆に言えば、サイトを引っ越す時などには絶対パスで記述したURLは1つ1つ変更しなければならないというデメリットにもなります。

また、http(s)から始まるURLで記述する必要があるため、Webサーバーにつながっていなければ機能しません。そのため、ローカル環境での開発中には使用することができないのです。

以上に加えて、単に記述が長くなるというデメリットもあります。

絶対パスの使いどころ

外部リンクや、別のサーバーにある外部ファイルなどを参照する場合は、必然的に絶対パスを使わなければなりません。たとえば、外部サイトで公開されているファイルを参照したい時などは、絶対パスの出番です。

その他、ドメインを変更する予定がない場合、またはファイルやページの数が膨大になる場合などは、誰からでもファイルの位置が分かり易いため、絶対パスがよい可能性があります。

相対パス

次は相対パスの使いどころを、メリットとデメリットを踏まえた上で説明します。まずは、相対パスについて復習しておきましょう。「【第1回】HTMLとは?基本のタグ・コードの書き方を実演で解説!」で次のように解説しました。

もう1つは「相対パス」。現在のファイルの位置から目的のファイルまでの位置を相対的に指定する方法です。サイト内部のファイルを指定する場合に使用します。上の階層に戻る場合は、「../」と書き、下の階層にあるファイルを指定する場合は、「/」で降りていきます。

では相対パスのメリット・デメリットから見ていきましょう。

相対パスのメリット・デメリット

相対パスは、ファイル位置の変更などを行わない限りリンク切れを起こしません。したがって、絶対パスでは障害となったサイトの引っ越しという場面であっても、ディレクトリの構造に変化がなければリンク切れが起こらず、パスの書き直しの必要もありません。

とはいえこれも逆に言えば、ファイル位置の変更や階層構造が不確定な場合などでは、リンク切れを起こしやすいということも意味します。しかし実際のところ、開発の途上では相対パスを用いることが多くなるでしょう。なぜなら、絶対パスと異なり、ローカル環境のブラウザでも問題無く機能するためです。

ただし、参照したいファイルが外部のサーバーに格納されている場合や、外部リンクを設置する時などには機能しません。

その他、絶対パスに比べて記述が簡潔になるというメリットがあります。

相対パスの使いどころ

以上のメリット・デメリットを踏まえると、相対パスの使いどころは、自サイトの内部リンクの設置・ファイルの読み込みを行う場合などです。また、ローカル環境で機能するというメリットがあることも踏まえると、制作過程では相対パスを用いることが多くなるでしょう。

ルート相対パスとは

絶対パスと相対パスのメリットを併せ持つパスの指定方法に、ルート相対パスと呼ばれるものがあります。相対パスの一部ではありますが、相対パスとは異なり、ルートフォルダ(「/」で示す)を基点に相対的な位置を指定します。書き方は以下の通りです。

ルート相対パスの例:/image/cat.png

冒頭に「/」でルートフォルダを基点にすることを宣言し、あとは絶対パスの要領で目的のファイルまで辿っていきます。

絶対パスと相対パスの特徴を引き継いだルート相対パスには以下のようなメリットがあります。

  • 環境を整えればローカル環境でも機能する
  • あくまで相対パスであるため、ドメイン変更の影響を受けない
  • 絶対パスのように、誰でもファイルの位置を特定しやすい
  • 絶対パスに比べて記述が簡素

良い点が多いですが、外部リンクの設置には使えないなどの限界もあります。ルート相対パスに頼らず、その都度最善のパス指定方法を考えることが重要であることは変わりありません。

まとめ

絶対パスと相対パス、そしてルート相対パスはいずれかに優劣があるのではなく、自身の状況に応じて使い分けることが肝要です。とはいえ、HTML&CSSを学び始めた段階では、両者の使い分けが大きな障害となることはないでしょう。

しかし、今後チームで開発するようになったり、開発規模が大きくなってきたりすると、必ずパスの指定方法が問題となります。そのため、今の段階からパスを指定する際は本記事で解説したメリット・デメリットを意識しながら使い分けるようにしておくと、後々スムーズな開発の一助となるはずです。