事例154

総合学科1年次「社会と情報」でのWebプログラミング実践

愛知県立高蔵寺高校 田中健先生

ちょっとハードな学校で、プログラミングを「サステナブルに」実施してみる

ご本人提供
ご本人提供

今回のお話は、私が今年度異動したため、前任校での実践です。内容としては、少々学級運営がしんどいレベルの高校で、「情報Ⅰ」で確実に教科書に記載されることになるプログラミングをどのように教えたらよいかという悩みをもとに、昨年度1年間かけてWebプログラミングを実施してみた結果についてお話ししたいと思います。

 

さて、本校(前任校、以下同)で授業づくりをする段階で、まず懸案事項になるのがこういったことでした。

・オーソドックスな座学はまず無理

・予習復習は望めない(配付物を持参しないことも往々にしてあり得る)

・小難しい内容は右から左へすーっと飛んでいく

  


 

開始2~3分で入眠、というのもよく見かける光景で、まずはここをクリアせねば、というところからになります。その打破のために、動機付けに相当すると考えたのが以下の3つです。

 

一つ目はとにかく興味を持たせるように関心を買うことです。教科書の事例の足し算、掛け算、配列はあまりにも彼らの日常とかけ離れているので、自分事とは捉えてくれません。それを音楽やスポーツなど、各自の興味が最終的な成果物になるぞと、はじめから意識に刷り込むことを考えました。

 

次に、テンポよく解説と実習、生徒同士の相談を繰り返すことです。授業そのものが一本調子にならない内容にすることで、終了のチャイムまでの脱落者が少なくなるのではないか。

 

最後が、これは私が勝手に作ったことばですが「サステナブル性」です。学習した内容が授業外でどのように活用できるか、一人でもやってみようと思えるか、ということをクリアできれば、授業に前向きに臨むようになるのではないかと考えました。

 

こういったことを勘案した結果、コンピュータがあればほぼどんな環境でも利用でき、生徒も実際にブラウザを使って利用している、昔ながらのWebプログラミングでいってみよう!ということに落ち着きました。

 


 

総合学科は、1年生から「産業社会と人間」でキャリア教育がなされるという特性もあり、4年制専門学校を最終的な進路先と位置付ける生徒も少なくありません。将来的にはWebデザイナー、ひいてはSEや開発者にも興味を寄せる生徒がいることを考えると、さほどエキセントリックな選択でもないような気もしていました。

 

ちなみに、「HTML/CSSだけなら単なるタグ打ちで、変数が出て来ない、そんなものはプログラミングとは言えない!」という意見もありますが、クライアントサイドで動かすJavaScriptを埋め込めばそれなりのものになるのでは、ということにして、実施することにしました。ちなみに、ネタバレになりますが、やはりHTML/CSSだけでもかなり苦労することになり、JavaScriptには至りませんでした。

 

TTの先生との連携の仕方を工夫することで、プログラミングに十分な時間と環境を確保する

次に考えなければいけないのが、どれだけの時間をかけるかということです。通常の学習指導計画では、プログラミングにかけるのは多くて8時間、教科書に載っている極小モジュールらしきものをいくつか作って終わり、というものだと思います。しかも、いかに「情報Ⅰ」の先行的取り組みとはいえ、「社会と情報」にはプログラミングという単元は存在しません。

 

とはいえ、プログラミングとは非常に面白いものであり、自分の作りたいものを試行錯誤しながら作り上げていくことがプログラミングの醍醐味であると考えています。ですから、ぜひそれを感じられるような実践を試してみたい、ということで、現実的な授業の大枠はこのようになりました。

 


 

具体的には、「社会と情報」のコマ2コマを、時間割レベルで1コマずつ「社情α」「社情β」に分割し、片方で週1回Webプログラミングを実施、もう片方でタイピングと年間学習指導計画に穴が開かない程度の教科書内容の学習というのを、年間通してやってみることにしました。要するに、授業担当者2名で情報科目を1単位ずつ展開するというものです。

 

多くの学校では、教科「情報」の授業では、TT(TeamTeaching)として生徒40人に対して2人の教員が付いていると思いますが、なかなかこの利点を生かし切れてないのが現状です。情報の専任教員がいる場合、複数の非常勤講師同士が助け合いながら掛け持ちしている場合はまだよい方で、他教科からの派遣の教員が単に教室の中にいるだけという場合は、結局1人の教員が「クラス数×2単位」を展開しているケースが多いのではないでしょうか。

 

今回の本題ではありませんが、情報主担当者以外に、最低「クラス数×1単位」分の授業を受け持つ教員を確保することで、各教員の個性を活かした、バリエーションのある授業が展開できると思います。また、誤解を恐れずに言えば、授業に責任を持ってもらうということを担保する上でも、非常に有効ではないかと考えています。当然ながら、この分割によるデメリットもあるのですが、ここでは割愛することにいたします。

 

というわけで、私自身は「社情α」をメインで担当、言い方を変えれば、週に1時間好き勝手やらせてもらう環境が整いました。

 

Webサイトの制作の中で、プレゼンテーションと協働学習も体験する

こちらが「社情α」の位置付けとその到達目標です。

 

位置付け(主題)としては、これまでプログラミングとは無縁だった本校で、何をどこまでできるのか、それを測定・検証する、ということで始めました。

  


 

学力層については先ほどお話しした通りですので、教科書で紹介されているような例を絡めると、四則演算や大なり小なりなど算数の基礎内容の説明が必要になり、プログラミングの本筋がブレてしまいます。そこで、年度末までにクラスメートに閲覧・評価してもらうことを目的とした「自身が興味あることについてのWebサイト制作」を完成させることを、大目標として提示しました。

 

さらに、キャリア教育を標榜する総合学科の特色として、「自己表現」を重視しており、毎学期クラスの前で「原稿をただ読むだけ」というのを禁止した、作品の中間発表・最終発表というプレゼンテーションを課しています。コンピュータの操作を不得手とする生徒も多々存在するため、こちらが許可した時間帯に限って、適宜教室内を動き回って教えあったり、制作物について相談したりすることを、協働的な学習として推奨しています。

 

こちらが、ゆっくり進んでもこれくらいはできるか、ということで当初に作成した年間学習指導計画(予定)です。

 

 

ちなみに、学期当初の4月の内容は、プログラミングとは直接の関係はありません。4月に初めて会うクラスメートをよりよく理解するためという目的で、「自分自身をピクトグラムで表すとどうなるか?」という制作とプレゼンテーションで生徒同士の距離を縮め、協働的に教えあうことの素地づくりとして実施しました。詳しくは、数研出版の「i-Net 」55号に掲載されています。ネットでご覧になれますので、ぜひそちらをご覧ください。

 

https://www.chart.co.jp/subject/joho/inet/inet55/inet55-2.pdf

 

授業の進め方に関しては、どんなコンピュータでも利用できるようにするため、また入力支援が一切行なわれない環境で実施してみようと思ったため、古き良きテキストエディタ「メモ帳」を登場させました。

 

デバッグが非常に困難になることは多々予想されましたが、アンフレンドリーな環境で実施することで、問題点が明らかになりやすいという考えがあってのことです。また、作業領域としては、各生徒アカウントに割り振った共有フォルダを利用し、その中に必要なデータを適宜入れていく、更新作業をしていくというオーソドックスな方法としました。

 

実際にこれを実施してみましたが、とにかくカツカツでした。もう一つの科目「情報β」で、毎時間タイピング練習が実施されていましたが、自宅にコンピュータがないという生徒が半数以上という状態で、なかなか上達しません。当初は、キー配列に戸惑って全く進まない生徒が多数で、コンピュータの基本的な使い方を習得させるということに1か月を要しました。ある程度予想はしていましたが、まさかここまで進まないとは、と困り果てたことを覚えています。

 

毎回の授業では、事例をPCルームの前面のスクリーンで示して、「このタグの効果は追加後にこうなる」というビフォーアフターを逐一示しつつ、各生徒のコンピュータで次々にHTML文書にタグを増やしていくという流れで行いました。一つのタグに対して5分程度解説し、5分で生徒が打ち込んで更新、行き詰った生徒には授業者とよくできる生徒が教師役として適宜移動して、遅れのケアを行う、というスタイルにしました。結果的に、11月の課題制作まで「解説を聞く→生徒自身のPCで実際に打つ→周りの生徒に教えにいく」というスパイラルが続いていくことになりました。

 

自分でやりたくて始めたとはいえ、何せ週1単位しかないため、祝日や三者面談日の短縮授業などで、授業時間を他の先生と都合し合わないと、月に1回しか授業がないというクラスもあり、時間数調整にかなり苦労しました。

 

その結果、実際の授業スケジュールが予定からこのように変わりました。ご覧になっておわかりと思いますが、JavaScriptまではても届きませんでした。

 

 

計画を非常に甘く見積もったのと、一斉授業でどうしてもつまづく生徒のケアをしたことで進度が遅くなり、結果単なるタグ打ち教室になってしまったことは、大いなる反省点です。さらに、「自身のことばで制作物を説明すること」を確実に経験させたかったため、中間発表で1時間、採取発表で2時間コマ数を割くことになったことも、時間数を圧迫した原因ですが、全体としてみれば評価のためにもメリハリをつけるためにも必要な関所になったのではないかなと思っています。

 

それでも、全体時間数のうち、5~6時間は制作準備と制作時間を取ることができたため、生徒によって出来不出来はあれ、全員最終制作物を提出させることができました。

 

「自分の興味のあることを知ってもらう」ための制作がもたらしたもの

HTML/CSSだけでの制作なので、大したものではありませんが、「クラスメートに知ってほしい、自分自身が興味あること」をテーマにした生徒作品の一例をご紹介したいと思います。

 

[今回は、生徒の公開許可を取っておりませんので、作品の公開はできません。ご了承ください]

1つ目の例は、書道の高位の段を持っている生徒のもので、楷書と行書の違いを知ってほしいという思いから、制作したということです。校内LANへのアクセスができないので、画像は授業担当者への直通アドレスに送信し、授業者が各生徒のフォルダへ振り分けるという方法で対応しました。

 

2つ目の例は、1年生から高卒での就職を見据えて進路を考えているという生徒が制作した、就職面接に臨むための心構えや難しい想定面接の設問内容に関するものです。総合学科1年次で履修する「産業社会と人間」とリンクさせて考えた結果、クラスメートと共有したいという思いが表出したのかもしれません。

 

ただ、生徒の中には最後までテーマ設定に関する意図が伝わらず、興味ということで芸能やアニメ、ゲームと単純に変換してしまう人が多かったことも事実です。これについては、著作権、肖像権といったことを考えさせる副次的な産物もありました。

 

評価については、学期ごとに社情αと社情βを合算するという形で行いました。このうち、課題点に関してはとにかく客観的な評価と、生徒同士の相互評価を点数化しています。今回の発表については、評価することが主目的ではないので割愛しますが、客観性と公平性を保てるようにしたつもりです。

 


最終発表後に書かせた生徒の感想です。記名式のため、見るに堪えない感想は見受けられませんでしたが、それを考慮しても「つまらなかった」「やらないほうが良かった」などの否定的な意見は、片手で数えられるほど少なかったという印象です。

 

上から4つ目の「<htmi><doby>」を書いたのは、入学時の成績としてはかなり厳しい位置にあった生徒ですが、自分なりのやりきった感が感想からうかがえました。 

 


また、1年次科目の「産業社会と人間」との関連も、折に触れて授業内で話したため、職業としてのウェブサイト制作に興味を持ったという生徒や、プログラミング環境を自宅に持っているかもしれないと考えられる生徒も一定数いるという印象を受けました。

 

さらに、ここに記載はされてはいませんが、中間発表・最終発表という、作品を人に見せて自分の言葉で伝えることについては、「プレゼンテーションは嫌で苦手だったが、良い経験になった」と答える生徒が多かったように思います。最後の「教えてくれる生徒がいてよかった」という意見も、全体で勉強していこうという空気が醸成されて、教室内の雰囲気づくりという点では有効だったことからのものと考えられます。

 

学んだことが活かせるという「サステナブル性」を意識することで生徒の意欲を持続させる

以上、やや特殊な学校での実践でしたが、来たるべき「情報Ⅰ」に向けて考えられる課題と展望を、私見でまとめたいと思います。

 

まず何よりも変化が起こるのが、現状「情報の科学」でしか言及されないプログラミングが、教科書に単元が配置され、年間学習指導計画上必ず実施することになることです。

 


 

そこで教科書に出て来る最小公約数的なコードの実例は、四則演算だったり並べ替えだったりと、はっきり言って面白くないですよね。プログラミングをかじったからといって、実際にどこに活用できるのか、ということがどこにも説明されていない。これを先ほども出した「サステナブル性」で、学んだことを実際に自分でやってみようと思っても、開発環境に特殊なエディタが必要だったりで、最初にかかる負荷が大きいと、どうしても始めにくくなりますよね。そうやって、プログラミングに対する興味の最初のとっかかりの部分でつまづくと、結果毛嫌いの対象に成り下がります。

 

試行錯誤で徐々に形作られていく過程が楽しいというのが、プログラミングの醍醐味であって、そこに到達する前にもういいや、となってしまう。その部分をいかに超えられるか、どのように超える手段を提供できるか。「自分でやってみたい」という興味を持たせるための「サステナブル性の確保」が第一に求められることなのではないかと思っています。とっつきやすさと、生徒の日常生活との関わりを考えた場合、Webプログラミングはあまりにも初歩的ですが、一番親和性があるのではないか、というのが今回の実践の感触です。

 

次によく挙がるのが、「プログラミングに何時間かけるのか」といこと。これは今までも至る所で議論されている話題です。教科書の例題だけをオーソドックスに入れ込むのであれば8時間程度で済みますが、やっぱりそれでは面白くない。授業者が面白くないと、その空気は生徒に直に伝わるので、要注意ですよね。今回はこんな形で1年間続けましたが、内容の難易度はどうであれ、生徒からはある種のやりきった感が感じられました。1年間の計画を最初に伝えたことが功を奏したと言えるのかもしれませんが、「最終的に(実用的な)こういうものを作り上げるのでがんばっていこう」という最終目標があると、興味や集中力が落ちることを、ある程度防げるのではないかと思います。何を題材とするか、それによって必要な時間数は変わりますが、「最終的な成果物を当初に示して、そこから必要時間数を逆算する」ことが大事だと思います。

 

そういうわけで、これは私の大放言ですが、「情報Ⅰ」からプログラミングを切り離して、普通教科「情報」の科目「プログラミング」として1単位でもいいから必須にする、という文部科学省レベルの大号令があると、大変面白い夢物語になると信ずるところです。

 

最後に、プログラミング単体で授業を終わらせてしまうと、単にコンピュータとの対話だけとなってしまい、せっかくの多くの生徒が集まる学校での授業という利点を活かせないので、他の生徒とコミュニケーションを図るための何かを授業内に入れ込むことが、興味・集中が続く要因になるのかなと思います。今回の例でいうと、許可された時間内は立ち歩いたり相談したりすることを自由としたことや、クラス全体へのプレゼンテーションを取り入れることで、生徒にとってはちょっとした(あるいはかなりの)緊張感につながり、単にコンピュータに向き合わせるだけの授業に比べ、ダレることがなかった印象です。最終的に作品をクラスメートに評価されるということは、授業に取り組ませる上での、良い意味でのプレッシャーになっていたのかなと思います。

 

他の単元とミックスさせれば、先ほどの時数設定の幅を増やせるという利点もあるので、プログラミング単独という単元で実施するのではなく、「他の学習単元で求められる内容とリンクさせる、融合させる」ということも有効ではないかと思います。あるいは、他教科と融合することがあっても面白そうですね。

 

この3点が、今回の年間授業を通して得た私なりの所感、今後への展望と言えるかと思います。

 

第13回全国高等学校情報教育研究会全国大会(オンライン大会)より