「相対パス」の壁をどう越える？

授業

Web制作の授業で、学生たちが最初にぶつかる巨大な壁。 それが 「相対パス」 です。

「先生、画像が表示されません」 「リンクをクリックしても飛びません（Not Found）」

画面を覗き込むと、そこには C:/Users/Student/Desktop/... という絶対パスが書かれていたり、img/photo.jpg と書くべきところが ../img/photo.jpg になっていたり。

毎年、黒板に図を描いて説明するのですが、それでも一定数の学生は「？」という顔をします。 特に最近は、「そもそもフォルダ階層という概念自体がピンときていない」というケースも増えてきました。

今回は、私が授業で実際に使っている図解資料と、それでも伝わらない時に試している「別のアプローチ（例え話や身体を使った方法）」について共有します。

まずは「図解」で攻める（王道の2パターン）

視覚的な理解を促すため、私はいつもこの2種類の図を使って説明しています。 多くの学生は、この2つを見比べることで理解してくれます。

Aパターン：包含構造（ボックス型）

WindowsのエクスプローラーやMacのFinderに近い見せ方です。

  • メリット： 「aa フォルダの中に page2 がある」という「入れ子（包含）」の関係が直感的にわかります。

Bパターン：階層構造（ツリー型）

エンジニアや慣れている人には最も伝わりやすい、サイトマップ形式の図です。

  • メリット： サイト全体の深さや、ファイル同士の距離感が把握しやすいです。

なぜ、図解しても伝わらないのか？

「これだけわかりやすい図があるのに、なぜ？」 以前の私はそう悩んでいましたが、学生の作業を観察していて2つの根本的な原因に気づきました。

原因①：スマホ世代の「フォルダレス」感覚

今の学生（デジタルネイティブ）は、スマホの写真アプリや検索機能に慣れ親しんでいます。 「ファイルは検索して出すもの」であり、「順序立ててフォルダを辿って探す」という経験が圧倒的に不足しています。

彼らにとってファイルは「フラットに散らばっているもの」であり、階層構造という概念自体が異世界の話なのです。

原因②：「現在地」の喪失

これが最大の原因です。 相対パスは「道案内」です。ゴール（リンク先）が同じでも、スタート（今、編集しているHTML）がどこかによって、道順は変わります。

  • index.html から見る page2.html
  • page3.html から見る page2.html

図解を見て「全体図」はわかっても、「今、自分が地図上のどこに立っているか（Current Working Directory）」がわかっていないため、ナビゲーションができないのです。

「幽体離脱」を防ぐ！ アナロジー（例え話）作戦

そこで、図解でピンとこない学生には、「自分自身が小人になって、ファイルの中に入る」イメージを持たせるようにしています。

例え話：「建物と部屋」

  • HTMLファイル ＝ 「自分の部屋」
  • フォルダ ＝ 「フロア（階）」や「区画」
  • ../ ＝ 「廊下に出る（部屋の外に出る）」

例えば、図の aa/page2.html から index.html にリンクしたい場合。

  1. 「今、あなたは『page2』という部屋の中にいる」（現在地の確認）
  2. 「『index』という部屋に行きたいけど、壁があって直接は行けない」
  3. 「まず ../ で、部屋から『site』という廊下（共有スペース）に出ましょう」
  4. 「廊下に出たら『index』のドアが見えますね？ だから ../index.html と書きます」

このように説明すると、「あ、一回外に出なきゃいけないんですね！」と腹落ちする瞬間があります。

4. 物理で解決！「指差し確認」メソッド

概念的な説明でもダメなときは、物理的なアクションを取り入れます。 PC画面上のツリー図（またはプリントした図）を使って、実際に指を置かせます。

  1. 「左手の人差し指を、今書いているファイル（現在地）に置いて」
  2. 「右手の人差し指を、リンクさせたいファイル（目的地）に置いて」
  3. 「左手を右手の場所に移動させるには、どう動かせばいい？」
  • 指を上に動かす動作 ＝ ../ （親フォルダへ）
  • 指を下に動かす動作 ＝ フォルダ名/ （子フォルダへ）

頭の中だけで考えさせず、「指の動き」と「パスの記述」をリンクさせるこの方法は、特に初学者には効果的です。

5. よくある「つまずきポイント」への処方箋

最後に、授業中によく発生するミスと、それに対する私の声掛けをまとめておきます。

Q. いきなり C:/Users/... と書いてしまう

  • 原因： ブラウザのアドレスバーをコピペしたり、エクスプローラーからパスをコピーしている。
  • 対策： 「あなたのPCにしかない住所（絶対パス）だと、Webサーバーに上げたときに『住所不定』になってしまう。誰から見てもわかる相対的な住所を使おう」

Q. ../ を書きすぎる（../../index.html）

  • 原因： とりあえず戻ればいいと思っている（闇雲に戻る）。
  • 対策： 「戻りすぎ！一階層ずつ確認しながら戻ろう」

Q. 同階層なのに folder/ をつけてしまう

  • 原因： 親フォルダの名前を書かなきゃいけないと思い込んでいる。
  • 対策： 「同じ部屋にいる友達を呼ぶのに、わざわざ住所から言わないよね？ 　名前（ファイル名）だけで呼べばいいんだよ」

まとめ：静的な「地図」と動的な「視点」

相対パスを教えることは、単なる記号の書き方を教えることではありません。 「情報の構造（地図）」と「自分の立ち位置（視点）」という、2つの空間認識能力を養うトレーニングなのだと感じています。

  1. 図解で「全体像」を見せる
  2. 例え話で「自分」をファイルの中に入れる
  3. 指差しで「移動」を体感させる

それでもまだうまく理解できない学生もいるのですが……ここで躓くとずっと後を引くので、結局根気の勝負ですね……。

コメント

タイトルとURLをコピーしました