みなさん、こんにちは。今日もプログラミングの勉強をはじめていきましょう。
今回は、パスの書き方について学びます。
パスというのは、ファイルの場所を、パソコンに教えてあげる方法です。

うーん、ファイルの場所を整理してたら、画像が読み込めなくなっちゃった……

りこちゃんも? ぼくもうまくいかなくて、困ってたんだ……

ふっふっふ。それはきっと、画像ファイルまでの場所が変わってしまったからだべ

山田先生!

場所が変わったらどうすればいいの?

ファイルまでの道順を、しっかりと書いてあげるんだべ
じゃあ、今日はその方法を教えてあげるべ

わーい

わーい
この記事には「ホームページ」という言葉が出てきますが、ここでは「Webサイト」と同じ意味で使用しております。
パスってなぁに?
たとえば、ホームページを作っているとします。
ホームページに画像を表示したいとき、HTMLでただファイル名を指定しただけでは、うまく表示できないことがあります。
そうです。その画像がどこにあるものなのか、パソコンには分からないので、困ってしまうのです。
ならばどうすればいいのか……そんなときに使えるのが、パスです。

パスは、目的のファイルまでの道順を表すものだべ

道順?

たとえば、自分のパソコンの「site」というフォルダで、ホームページを作っているとするべ


では、index.htmlからrico.pngを呼び出したいとき、どういう道順を通れば、rico.pngに辿り着くべ?
アルくん、答えるべ

えっ、ぼく?
えっと……同じ場所にimgフォルダがあって、そのなかにrico.pngがあるから……
imgに行けば、rico.pngがあるね

そうだべ。つまりこういう道順だべ


img → rico.png というふうに進めば、rico.pngを呼び出せるんだべ
こういった目的のファイルまでの道順を、「パス」っていうんだべ

パスは道順のことね!
覚えたよ

そして、パスの指定方法は、3つあるんだべ
絶対パス、相対パス、ルート相対パス、だべ
ちなみに、上の例は「相対パス」だべ

どう違うの?

順番に解説していくべよ!
ルートディレクトリってなぁに?
パスの書き方を覚えていきたいのですが、そのまえに、まず、ルートディレクトリがなんなのかを知っていると、分かりやすくなります。

まず、ルートディレクトリという言葉を覚えて欲しいんだべ

ルートディレクトリ?

なにそれ? どんな鳥?

それはもう、おいしそうな……てやんでぇ、べらぼうめ! 鳥じゃないべよ!
ルートディレクトリは、一番上のディレクトリだべ

ディレクトリって?

フォルダのことだべ

一番上のフォルダってこと?
うーん、一番上ってどこなんだろう……
ルートディレクトリは、一番上のフォルダのことです。
といっても、一番上ってどこなのでしょう。
では、ホームページをつくるときの「ルートディレクトリ」について解説します。
まず、このサイトのURLを見てください。
トップページは「original-game.com」ですね。
ここが、ルートディレクトリです。


待って、これって、URLじゃないの?

どういうこと?

URLは、ホームページを見る人に分かりやすいようつけられた、場所の名前でしかないべ
そしてホームページは、Webサーバーの公開ディレクトリに保存されたものが表示されてるんだべ

へぇ、そうなんだ

つまり、ブラウザにURLを入れて表示されたものは、Webサーバーの公開ディレクトリに保存されたものってこと?

そういうことだべ
そして、ブラウザでホームページを見るとき、そのトップページのURLで見れるところよりも上のディレクトリは、見ることができないんだべ。だからここが一番上のディレクトリで、ルートディレクトリになるんだべ
絶対パスってなぁに?
では、絶対パスの書き方から紹介していきます。
HTMLで画像を表示するには、imgタグを使います。今回は、このimgタグで画像を表示する場合を例に、パスの書き方を学んでいきたいと思います。

絶対パスは、ルートディレクトリから見たパスのことだべ

一番上のフォルダから、目的のファイルまでの道順ってことね!

もし、rico.pngを表示したいと思った場合、絶対パスではこのような道順になるべ


まずimgフォルダへ行って、そこからrico.pngを呼び出すんだね

そして、絶対パスはこのように書くんだべ
https://original-game.com/img/rico.png

こんかいは、画像を表示したいわけだべから、imgタグを使ってみるべ。するとこんなふうになるべ
<img src="https://original-game.com/img/rico.png">


スラッシュ( / )で区切って書くのね!

絶対パスを使うメリットは、なんといっても分かりやすさだべ
目的のファイルがどこにあるのか、ひとめ見ただけで分かるべよ

へぇー

あれ、でも、ローカルでホームページを作りたいときはどうすればいいの?

そこが、絶対パスのデメリットだべよ
絶対パスをローカルで使おうとすると、使えないことはないべけど、かなり使いにくいべよ
一番簡単な方法だと、ローカルサーバーを立てて開発し、公開するときは実際のURLにすべて書き換えるんだべ

そっか、URLが変わっちゃうから、ぜんぶ書き換えなくちゃいけないのね……

そうだべ。ホームページを移転したいときとかも、全部書き換える必要があるべよ

うーん、まあ、大変なんだね
相対パスってなぁに?
つづいて、相対パスについて見ていきましょう。

相対パスは、読み込むページから見て、目的のファイルがどこにあるのかを書く方法だべ
下の例は、index.htmlでrico.pngを表示するときの道順だべよ


こんどは一番上からじゃないんだね

そうだべ!
そして、パスはこうなるんだべ!
img/rico.png ./img/rico.png

あれ? 2通りあるってこと?

どっちを使っても構わないべよ
実際に画像を表示するときは、このようにするべよ
<img src="img/rico.png"> <img src="./img/rico.png">


絶対パスは一番上のディレクトリから、相対パスは読み込むページから見て、目的のファイルがどこにあるのかを示すのね!
うん、覚えたよ

ふっふっふ。でもりこちゃん、こんな場合はどうするべ?


こんどは、character.htmlで、aru.pngを表示させたいべ
相対パスで考えてほしいべよ

character.htmlはpageフォルダに入ってるから……あれっ、どうすればいいの?

ちなみに、一つ上の階層にいくには、「 ../ 」を使うべよ

うーん……

ふっふっふ、正解は、こういうふうだべ
../img/aru.png

あ、そっか。../で一つ上の階層にいって、そこにあるimgフォルダのなかの、aru.pngを読み込めばいいのね!

そうだべ!
imgタグを使う場合はこうなるべ
<img src="../img/aru.png">


相対パスを使うメリットは、URLが変わっても、パスを変更する必要がないことだべ

そっか。読み込むファイルからの場所だから、URLは関係ないのね!

うーん、ぼくはこれを見ても、いまいちどこを表しているのか、よく分からないな……

それだべ。相対パスのデメリットは

これなの!?

相対パスは、どのファイルを示しているのか、ちょっと分かりにくいべ。読み込む側のファイルの階層が、深くなれば深くなるほど分からなくなるべ

あ、../../../みたいに書かなくちゃいけなくなっちゃうんだ!

そしてもうひとつ。読み込む側のファイルの場所を変更したら、全てリンク切れになるべ……

ひぃ、なんかこわい……
ルート相対パスってなぁに?
つづいて、ルート相対パスについて、見ていきたいと思います。

ルート相対パスは、ルートディレクトリから見たパスのことだべ

へぇー
あれっ、それって絶対パスじゃないの?

そうだべな……たしかに絶対パスに似てるべけど、書き方がちょっと違うんだべよ

どうやるの?

ルート相対パスでは、こういう道順でディレクトリを見ていくべ
これはaru.pngを表示したい場合の例だべよ


絶対パスとおなじじゃん!

まぁまぁ。ルート相対パスはこうやって書くべよ
/img/aru.png

あ、スラッシュからはじまるんだ

そうなんだべ。一番最初のスラッシュが、ルートディレクトリを表しているんだべよ
そして、画像を表示するなら、こういうふうになるべ
<img src="/img/aru.png">


これって……もしかして、URLが変わってもパスはそのままでいいってこと?

ふっふっふ。じつはそうなんだべ
ルート相対パスは、絶対パスと相対パスのいいとこ取りなんだべよ

いいとこ取り?

URLの変更があっても、パスはそのままだべ
読み込む側のファイルの位置が変わっても、リンク切れは起きないべ
そして、ルートディレクトリからの場所を示しているから、分かりやすいべ

ルート相対パスにも、やっぱりデメリットはあるの?

ローカルでホームページをつくるときは、ローカルサーバーを立てる必要があるべ……
けど、絶対パスのときのようなURLの書き換えは、しなくてもいいんだべよ

ちょっとむずかしいけど、しっかり覚えればルート相対パスは使いやすそうだね
それぞれのパスのメリット、デメリット、まとめ
最後に、それぞれのパスのメリット、デメリットをまとめます。
絶対パス
メリット
- 目的のファイルがどこにあるのか分かりやすい
- リンク切れが起こりにくい
デメリット
- パスが長くなる
- ローカルでの開発にあまり向かない
- URLが変わると、全てのリンクを書き換える必要がある
相対パス
メリット
- URLが変わっても、パスを書き換える必要がない
- ローカルで開発しやすい
- パスが短くて済む
デメリット
- リンク切れが起こりやすい
- どのファイルを表しているのか分かりにくい
ルート相対パス
メリット
- 目的のファイルがどこにあるのか分かりやすい
- URLが変わっても、パスを書き換える必要がない
- リンク切れが起こりにくい
- パスが短くて済む
デメリット
- ローカルで開発するには、ローカルサーバーを立てる必要がある

どうだべ、パスの書き方は分かったべか?

うん! それぞれにメリット、デメリットがあるのね!

がんばって覚えるよ!

うん、がんばるべよ
では、わたすは、日本橋に行ってくるべよ

へぇ、なにしにいくの?

マウスを買いに行くべ
今週……昨日で三つ目を壊してしまったべ

えっ、どうしてそんなに壊れちゃったの?

つい、ケーブルをかじってしまったべ……
どうしても、あれはねずみにしか見えないべ
ジャンクならかなりお手頃な値段で手に入るべよ
わたす、マウスは、保存用と観賞用、使う用、かじる用が必要なんだべ……まぁ、コレクションみたいなものだべ

マウス、好きなんだね
ぼくも、ポケモンカードあつめるの好きだよ

かじる用……?