『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。
今回は相対パスの理解についての授業です。私は複数の専門学校でいくつかの科目を担当していましたが、これはWebサイト制作に関する科目の中で行いました。
相対パスと絶対パス
これらはWebサイトを制作するときには欠かせない知識の１つで、ファイルやフォルダの場所を指定する方法です。相対パスと絶対パスは、道案内や住所に例えられることが多いかもしれません。
例えば相対パスは、「（今いる建物の中の）ここから２つ上の階のAという部屋」といったように、ある地点（現在地など）を基準に位置を説明します。
それに対して絶対パスは「○○県○○市○○区○○番地 Xビル５階A号室」といった指定方法です。
どちらも決められたルールに従っていれば間違いなくファイルやフォルダを指定できるとはいえ、Webサイトの制作においては相対パスを使うことで、納品後の誤動作などを防ぐことなどができるため必須の知識といえます。
授業概要
授業で配布したプリントは次のようなものです。
「相対パスを理解する」
Mission１）相対パスをHTMLの中で使うことができる。
Mission２）相対パスについて説明することができる。
次の例題を利用しても構いません。
例題 下記のようなフォルダ構成でデータが保存されている。次の問題に答えましょう。
ファイルとデータの構成について（あるフォルダの中に下記ファイルとフォルダが入っているとします。）
index.html
pic01.jpg
imagesフォルダ中にpic11.jpgとpic12.jpgがある
profileフォルダ中にprofile.htmlがある
※実際には樹形図で表示
１）Index.htmlで画像ファイルpic01.jpgを表示させるには、index.htmlの中に記述するimgタグはどのようになるか？
２）Index.htmlで画像ファイルpic11.jpgを表示させるには、index.htmlの中に記述するimgタグはどのようになるか？
３）profile.htmlで画像ファイルpic01.jpgを表示させるには、profile.htmlの中に記述するimgタグはどのようになるか？
４）profile.htmlで画像ファイルpic12.jpgを表示させるには、profile.htmlの中に記述するimgタグはどのようになるか？
５）profile.htmlで表示される文字列「トップページへ」をクリックするとindex.htmlへジャンプするようなリンクの設定をするには、profile.htmlにどのようなaタグを記述をすれば良いか？
求められたMissionをクリアできたのかについてはクラスの状況に合わせて方法を変えてみていました。『学び合い』で使われるネームプレートでの確認、学生をランダムで指名して答えてもらう、振り返りのための問題を出題する、などです。
振り返りの問題例
フォルダ構成（課題用のフォルダ中に下記ファイルとフォルダがある）
index.html
pic01.jpg
imagesフォルダ中にtitle.jpgとmenu1.jpgがある
accessフォルダ中にaccess.htmlとimgフォルダ(map.jpg含む)がある。
※実際には樹形図で表示
問１）index.htmlに画像を表示するための記述について答えましょう。
A）title.jpgを表示するためにindex.htmlに記述するimgタグを書きましょう。
B）map.jpgを表示するためにindex.htmlに記述するimgタグを書きましょう。
問２）access.htmlに画像を表示するための記述について答えましょう。
A）title.jpgを表示するためにaccess.htmlに記述するimgタグを書きましょう。
問3）access.htmlに表示される文字「トップページへ」をクリックしたときに、index.htmlへジャンプするようなリンクの設定について。index.htmlに記述するaタグを書きましょう。
〇Mission２ 相対パスについて説明することができる。
問1）相対パスを知らない人（後輩、家族）に説明しなければいけないとき、あなたならどうやって説明しますか？（記述スペースが足りないときは、裏へ）
振り返り
こうやって見てみると、最初のMisson（達成課題）をもう少し具体的にできたらと思いました。授業ではおそらく口頭で補足説明をしたのだろうと思いますが、例えばMission2「相対パスについて説明することができる。」については、振り返りの問題「相対パスを知らない人（後輩、家族）に説明しなければいけないとき、あなたならどうやって説明しますか？」の方が、指示が明確なので学生もより動きやすいだろうと思いました。
『学び合い』について
『学び合い』（二重括弧付き）は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、様々なサイトや書籍がありますのでぜひ一度ご覧ください。
