絶対パスと相対パスまとめ Win/Mac
パスとは
パスとは、簡単に言ってしまうと、ファイルやディレクトリの住所のことです。「パスを示す」とは、そのファイルやディレクトリが現在、正確には何処の位置に存在しているのかを記述する行為のことです。例えば、index.htmlからimgタグを使ってapple.imgを読み込んで、クロームなどのブラウザでindex.htmlを実行し、画像を表示したいと思ったとします。そのようなことがしたい場合は、imgタグの中のsrcにapple.imgが存在している場所を、正確にパスとして示さなければいけません。こんな風に。<img src="/home/user/apple.img">。
相対パスとは
まず、例えば、index.htmlとapple.imgというファイルがあったとして、index.htmlでこのように記述されたコードは相対パスと言います。<img src="apple.img">。何故なら、明らかにこのような書き方をフルパスとは言わないからです。(後ほど絶対パスに関して説明をしますが)このコードを正確に実行するためには、index.htmlとapple.imgが同じ場所になければいけません。同じ場所というは、簡単に言えば自分のパソコンの中のデスクトップに、index.htmlとapple.imgが二つある状態です。つまり、相対パスとは、自分(呼び出す側)の現在の位置から見た、目的のファイルまでのパスの記述のことを言うのです。自分のパソコンの中のデスクトップに、index.htmlとapple.imgが二つ同じ場所にある状態であれば、わざわざパスを指定しなくても、<img src="apple.img">でindex.htmlはapple.imgを発見することができます。
例えば
チュートリアルをしてみましょう。例えば、自分のパソコンのデスクトップにindex.htmlがあるとしますよ。更に、自分のパソコンのデスクトップにapple.imgがあるとします。そのような状況下では、下記のようなコードを実行することで、画像が表示されます。これが、相対パスです。相対パスというのは、自分(ここではindex.html)から見た、目的のファイルまでのパスということです。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="apple.img">
</body>
</html>もう一つ
さらに、例えば、自分のデスクトップのindex.htmlがあるとします。そして自分のデスクトップにaimgというフォルダがあるとします。(今回はファイルではなく、フォルダです)そして、imgというフォルダの中にapple.imgがあるとします。そのような状況下では、下記のようなコードを書くことで、画像が表示されます。<img src="img/apple.img">ここの記述に注目してください。これは、imgフォルダの中の、apple.imgということです。Unix系統のOSでは、ファイルの階層を区切るのに/を使います。index.htmlには、imgというフォルダは見えていますが、apple.imgという画像ファイルは見えません。同じ場所にないからです。なので、img/apple.imgこのようにして、同じ階層にあるimgを先にしてして、/で階層を一段下更に指定して、apple.imgという画像ファイルを見つけるのです。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="img/apple.img">
</body>
</html>絶対パスとは
絶対パスとは、あるディレクトリの絶対的な位置です。最初から最後まで記述した形です。Winならば”C”、macならば”/”からそのファイルまでのパスをを記述するのが絶対パスです。
winで絶対パスと相対パスを比較
絶対パス
C:\home\desktop\vine.txt自分が”usr”フォルダにいる（usr フォルダを開いている）状態で、相対パスを記述すると、次のようになります。 ここで、usr からvine.txt へ向かうには、一度は根である”c:”へ戻り、経由しなければなりません。 １つ上の階層へ戻る時のパスの記述は、”..\”と表します。
相対パス
..\home\desktop\vine.txtmacで絶対パスと相対パスを比較
絶対パス
/home/desktop/vine.txt自分が”tool”ディレクトリにいる状態で、相対パスを記述すると、次のようになります。
相対パス
../../home/desktop/vine.txt参照
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！