JavaScript

【プログラミング初心者向け】相対パスの書き方について例を用いて簡単に解説

JavaScript

 

今回は階層構造を表す相対パスの書き方について簡単に解説したいと思います。どのプログラミング言語を扱うことになった場合でも、相対パスは必ず使用すると言っても過言ではありません。ぜひこの機会に理解しておきましょう。

この記事ではjsファイルを例に用いて解説しています。考え方自体は他のプログラミング言語でも変わらないため安心して読み進めてください。

相対パスとは

相対パスとは、ファイルの所在を表すパスの書き方の一種であり、記述されているファイルから見た位置関係を示しています。

言い換えると、相対パスとは今いる階層を基準にして目的ファイルがどこにあるのかを伝える手段になります。

もう一つの書き方として、絶対パスと呼ばれれるものがありますが今回は省略します。

相対パスの書き方①

相対パス

 

上記のような階層構造のファイルがあり、現在「kiwi.js」ファイルにいると仮定します。「apple.js」との位置関係は「./apple.js」と記載することができます。

「./」は相対パスが書かれているファイルと同じディレクトリを意味します。カレントディレクトリとも呼ばれます。

相対パスの書き方②

相対パス

 

再び「kiwi.js」にいると仮定します。「banana.js」との位置関係は「./yellowfruits/banana.js」と記述することができます。

まずは同じ階層の「yellowfruitsフォルダ」に進み、そこから「banana.jsファイル」を見る感じですね。

相対パスの書き方③

相対パス

 

再び「kiwi.js」にいると仮定します。「banana.js」の位置関係は「../yellowfruits/banana.js」と記述することができます。

「../」は1つ上の階層を表しています。
「../」で1つ上の階層(= greenfruits)に進み、そこから「yellowfruitsフォルダ」に進みます。その後「banana.js」を見る感じですね。

まとめ

  • 相対パスとは、ファイルの所在を表すパスの書き方の一種であり、記述されているファイルから見た位置関係を示す
  • 「./」は相対パスが書かれているファイルと同じディレクトリを意味している
  • 「../」は1つ上の階層を表している

 

 

今回は相対パスの書き方について簡単に説明しました。どんなプログラミング言語に関わらず、必ず使う知識ですのでこの機会にぜひマスターしておきましょう。