プログラミングの授業例 相対パスを学ぶ

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。

今回は相対パスの理解についての授業です。私は複数の専門学校でいくつかの科目を担当していましたが、これは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「相対パスについて説明することができる。」については、振り返りの問題「相対パスを知らない人（後輩、家族）に説明しなければいけないとき、あなたならどうやって説明しますか？」の方が、指示が明確なので学生もより動きやすいだろうと思いました。

『学び合い』について

『学び合い』（二重括弧付き）は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、様々なサイトや書籍がありますのでぜひ一度ご覧ください。

プログラミングの授業をアクティブラーニングにするには

前回の投稿からずいぶん日が経ちましたが（汗）、今回はパフォーマンス課題と呼ばれる授業方法についてです。

実際の授業はどんな感じ？

アプリケーション開発の授業で利用する「Monaca」というツールの機能や現状を理解することを目的とした、ある日の授業の課題プリントは次のようなものでした。

今日のMission

お客様からの問い合わせがありました。回答を考えましょう。

あなたは、○○（クラスの略称）株式会社マルチデバイスアプリ開発課のメンバーです。

顧客

　公共機関（○○市）

問い合わせ内容

　公共サービスのためのアプリの開発を検討している。情報や提案が欲しい。

質問

１）どんなサービスが提供できる？

２）いろいろなデバイスを使っている市民が利用できるのか？

３）データベースとの連携はできるか？

４）その他提案があったら欲しい

この時は、複数人のグループで取り組んでもらいました。もちろん何を使って調べても良いです。むしろテキストになるような書籍の出版が追い付いていないこともプログラミングの授業では日常茶飯事ですので、自分達でネットで調べたり、もし必要であればパソコンを使って自分で実際に試してみる力も求められます。

ja.monaca.io

授業の流れ

1. 今日のミッションとして、達成してもらいたいゴールを説明。
2. 必要があれば補足説明を全体に、ただし最小限に。
3. 課題に取り組む（教室内は自由に立ち歩きOK。相談OK。ネットも自由に利用。）※時間をできるだけ確保する。
4. 教員（私）がお客役となり、各グループにプレゼンテーションをしてもらう。

きっかけ

こういった授業をしようと思ったのは、授業で使うツール（プログラミング言語や開発環境）の特徴をまず最初に理解させたかったからです。

アプリなどを作るためのプログラミング開発環境は、年々進化して驚くほど便利になっていく一方で、機能が増えて複雑になってもいます。そのため「このツールで一体何がどこまでできるのか」を学生が把握しにくくなっていました。

これは授業に一番良いツールを毎年選定し、必要と判断すれば授業での開発環境を変えていっていた私にとっても同じく課題でした。

システム開発の仕事をしていた時も使うツールの選定は慎重に選んでいたつもりだったことを思い出し、学生達にもシステム開発部門のスタッフになったつもりで調べてもらえれば、当事者意識をより持って考えられるのではと思いついたのがきっかけです。

合わせて自分で考えてみる体験や、協働の効果を感じることも狙っていました。

実は、パフォーマンス課題やGRASP（詳細は下記）といった言葉を知ったのは本当に最近です。

パフォーマンス課題とは

ストーリ仕立ての課題に沿って、問題解決を行う授業です。

パフォーマンス課題の要素

ところでパフォーマンス課題には「GRASPS」と呼ばれる６つの要素があります。

1. Ｇoal （目的）
2. Ｒole（役割 ）
3. Ａudience（相手）
4. Ｓituation（状況）
5. Ｐerformance（完成品・結果）
6. Ｓtandards（スタンダード・観点）

この頭文字をとってGRASPSと呼ばれています。必ずしも６項目全てが含まれる必要はないようです。

 効果は？

ツールについての講義を一方的に聞く授業ではないですし、学生達はそれぞれ知恵を出し合って積極的に取り組んでいました。

学生同士や時には私も参加して話す中で、コンピュータ用語であいまいに覚えていたものがあれば、その場で補足し合ったり確認することもできますので、分からないことがそのままにならず知識も増えます。

なぜ効果がでたのか

学生達がより積極的に参加できていたカギは「当事者意識」だろうと思います。

「就職」が徐々に現実的になり、またIT企業への就職へのあこがれも持つ学生にとっては、単なる講義よりも興味のある取り組みだったのだろうと。

また技術者として顧客に伝えることの大切さや難しさについて時々話しており（私も決して得意でなく努力継続中であることも含め）、互いを練習相手として協力することもできたのだろうと思います。

二年目の『学び合い』の様子など

この度の豪雨で被害に遭われた方々に心よりお見舞い申し上げます。

まだ予断の許さぬ状況ですので、どうか安全を第一にお過ごしくださいますよう。

一際思い出の多い松山市、そして南予地方の被害にはただただ言葉を失うばかりです。皆様のご無事をお祈りしています。

前期授業

授業内容とクラスの状況に応じてではありますが、『学び合い』（アクティブラーニング）の授業に今年も取り組んでいます。二年目になりました。

課題

二年目ということで、少し肩に力の入ったスタートを切っていたかもしれません。

また新たに担当する授業が複数加わったこともあって、日々の授業準備（課題作り）などに追われてまるで全力疾走のような日も続きました。

去年と同じ授業内容であっても『学び合い』の授業を前提とすると、やはりクラスの状況になるべく合うような課題を毎回新たに作りました。

そんな中、去年よりももっと良い授業にしたいという欲や、『学び合い』の本質に対する戸惑いや、あれこれと考え始めてしまいました。

しかしながら肩に入っていた力を抜く転機がいくつかありました。『学び合い』の会に参加させていただき他の先生方のお話を伺えたこともそうですが、何より公開授業に伺って実際の様子を拝見したことで、自分自身でも驚くほど授業に対する迷いがそれ以前より無くなりました。

また会に参加されている先生方が、誰に対してもフラットに接し、また真摯に学び合う姿勢をお持ちだったことも、私にとっては続ける動機となりました。間接的なことなのかもしれませんが、これからの学びを問い実践する立場の者として、説得力が違うと私は思います。

留学生との『学び合い』

実は4月から、日本へ留学している学生のクラスでのWebページの制作の授業をさせて頂いています。授業は日本語で行います。

私にとって初めての経験ですので、最初は学生の様子を把握することに努めました。途中からは主体的・協働的に学ぶことのメリットを伝え、『学び合い』の授業を少しずつ行なっています。留学生達の反応が素晴らしいです。

技術的な内容として

技術的なことでは、JavaScript(enchant.js)の授業の中でSlackやGitHub Educationを試験的に用いています。GitHubは最近スタートしたばかりでこれからですが、Slackについては概ね好感触です。今の学生はSNSに十分慣れていることも実感しました。

最後に

新たな課題もいろいろと。より良い授業作りにこれからも一歩一歩取り組んでいきたいと思っています。

出会いや再開の一週間

今週は、いろいろな方に会えて楽しい一週間でした。

まず、友人たちとの勉強会がありました。会場は可愛らしいカフェ。私は初めて行くお店でしたが、オーナーの女性の顔に見覚えが。

絶対に以前会ったことがあるはずと、思い切って声をかけてみたところ、なんと小・中の同級生でした。

同級生や友人達の活躍振りに元気を頂きました。勉強も楽しかったです。話すことは大事です。

そして、アクティブラーニングの研究会である、「『学び合い』の会浜松」に初めて参加させて頂きました。静岡『学び合い』の会には２月に参加できたのですが、浜松の会はこれまでなかなか予定が合わず、今回念願叶っての参加です。

会場には、またもやお一人、見覚えがある女性の方が。

お声をかけて訊ねてみると、以前に仕事で伺った高校でスクールカウンセラーをされていた先生でした。当時はきちんとお話する機会がなく、最後にご挨拶をしただけでしたが、今回は先生の現在のご様子などお話が伺えて嬉しかったです。

しかも先生のご専門がアドラー心理学とのこと。アドラー心理学は少し前から興味を持ってはいたものの勉強出来ていませんでしたが、少しだけアドラー心理学を踏まえた子どもとの関わり方についてもお話が伺え勉強になりました。教えてもらうことも、大事です。

今回の『学び合い』の会浜松

今回、『学び合い』について『学び合い』で学ぶという模擬授業も行われました。

教わる側の立場で『学び合い』を体験できたこと、同時に『学び合い』について確認できたこと、とても有意義な時間でした。話すこと、教えてもらうこと、一緒に学ぶことの大切さを再認識できました。

ところで何冊か『学び合い』の本を読んでみたものの、やはり実際の授業を拝見しなくてはと最近思っていました。いらしていた高校の先生に授業参観をお願いしてみました。

静岡の会でも感じたことですが、先生同士の学び合いも自然と行われていて、初参加でしかも小・中・高の教員ではない私（一応免許だけはありますが）に対してもとてもフラットに接して協力した下さる雰囲気が素晴らしいと思います。

他にも現在幼児教育に関わっていらっしゃる元幼稚園の先生もお越しでした。様々なところから関心を持たれているんですね。

楽しい授業、成長する授業

実は教えている学生が私のブログを読んでくれたそうです。ありがとうございます。でも

照れくさいです。

社会人の方に読んでいただくのはほとんど照れは感じません。先日は大学でお世話になった先生が感想をメールで送ってくださりとても嬉しく、また励まされました。

おそらく、実際に私の授業を受けている学生が読んでくれることが、照れくさいのでしょうね。バックステージを見られてしまう感覚でしょうか。

ですがいろいろな方がが私のブログを読んでくれることは、私にとってとても良い刺激だと思います。

マジメな面も、ぼーっとした大変にゆるいところも、どちらも私ということですよね。

楽しい授業、成長する授業

ところでGWに勉強をした『学び合い』ですが、改めて自分の記事を読み返してみると既に忘れていたことがありました。５月、６月、そして８月と、研究会に参加させていただく予定なので、いろいろな方のお話を伺ってたくさん吸収したいと思います。

ところであるクラスで授業について無記名のアンケートを取りました。

「友達に聞いた方が分かる」ことや「すぐに質問できる」「何度も聞ける」こと、「理解が深まる」ことなどに気づいてくれていて嬉しく思います。一方で普段は見えない本音や葛藤も分かりました。特に学生同士のコミュニケーションについては複数の学生が何らか課題を抱えています。

こういった課題に対し、『学び合い』では先生一人が課題を抱え込むのではなく、子どもたちでの解決を目指します。

とはいえ、私が無記名のアンケートから知った課題をクラスにどう問いかけていいか、課題を抱える学生それぞれの気持ちを考えると、どうしたらいいのか今の私にはまだ分かりませんでした。自信がありませんでした。

今年度、私は複数の学校で複数のクラス（前期・後期で合わせて9クラス）を担当させていただいています。そこで学校名やクラス名は伏せて、アンケートを取ったクラスとは違うクラスでアドバイスをお願いしてみました。

学生たちはとても真剣に考えてくれ、学生だからこその発想でアドバイスをしてくれました。

少しだけご紹介すると、「ネットを活用すればいいのでは」というアドバイスです。対面では人と話せなくても、SNSでなら大丈夫という場合があると。言われてみればなるほどと思うものの、私には出せない発想です。質問の集め方やクラスへのシェアにもネットを活用したアイディアをもらいました。

学生達すごい。すばらしい。

無記名アンケートに協力してもらったクラスの次回授業では、アンケート結果ともに、それらのアドバイスを伝えてみたいと思います。