はじめに
開発の際に、基本的にはnode.js上で作業をしており、ファイルをローカルに落としてブラウザ表示するようにと指示が出たときに、CSSが上手く当たらず原因を調べたところ、サーバー上で作業をしていた時のコードは絶対パスになっており、ローカルでは相対パスにするべきだと気づいたので、今回現場で学んだことをアウトプットするために下記記事を投稿いたします。
パスとは
PC上のファイルの住所のこと
ファイルの場所がどこにあるのかをPCが理解できるようにパスが存在しており、パスは「絶対パス」と「相対パス」の大きく2種類に分かれる
絶対パス
「http://」もしくは「https://」の後にドメイン、フォルダ名、ファイル名を順番に記述する。
「ドメイン/フォルダ名/ファイル名」のように階層の区切りは「/」を使い、ファイルの居場所を最初から最後まで書くことを「フルパス」という。
外部のリソースを参照する場合に便利。
相対パス
絶対パスがファイルまでの道のりを順番に記載するのに対し、相対パスは今いるファイルから対象ファイルまでの道のりを記述する。
「./」が今いるファイルを指し、「./フォルダ1/フォルダ2/対象ファイル」のような書き方になる。
同じプロジェクト内でのリンクの際によく使われる。
絶対パスのメリット・デメリット
- メリット
- ・ルートディレクトリから自分の居場所まですべての道のりが書かれているため、だれが見てもサーバ上のファイルの位置や構造が把握しやすい
- ・絶対パスはこの書き方しかないため、ファイルが移動されない限りリンク切れを起こさない
- デメリット
- ・ルートディレクトリから自分の居場所までの道のりを記述するため、ファイルの場所によってはコードが長くなり処理が重くなる可能性もある
- ・サーバー上でのファイルの居場所までの道のりになるので、ローカル環境では使うことができない
- ・サイトの引っ越しをするとなると、ドメインから全て住所を変更しなくてはならない
相対パスのメリット・デメリット
- メリット
- ・必要最低限の記述になるため、作業効率が上がりやすい
- ・サーバー上でのファイルの住所ではないのでローカル環境でもテストや作業が可能
- ・サイトの引っ越しやドメイン変更があっても、サイト内の構造が変わらなければパスを変更する必要がない
- デメリット
- 階層の変更があるとすぐにリンク切れを起こすため、ファイルを移動させる場合はパスの変更も必要になる
- フォルダやファイルが増えると「../」や「./」が増え、どこに何のファイルがあるか分かりにくくなる
ルート相対パスとは
相対パスの仲間で、「ルート」とは一番上のディレクトリのことを指す。
一番上のフォルダから目的のファイルまでの道のりを表記する、絶対パスと相対パスのいいところを掛け合わせたようなパスの記述方法。
ドメイン名の記述が必要なく、ドメインが変更された時もパスの変更は必要がない。
また、ローカル環境でも作業することができる。
まとめ
絶対パス、相対パス、相対ルートパスはいずれも参照したいファイルまでの道のりを示す記述のこと。
外部のサイトを参照するのに適しているパス、サイトの一貫性を保つのに適しているパスなど、種類によって特性があり開発の内容や環境によって使い方が異なる。