事例63

映像教材を利用したプログラミング教育の一手法

東京都立小金井北高校 飯田秀延先生

本日は、映像教材を利用したプログラム教育の一手法を紹介します。

 

具体的にはLife is Tech社のTECH for TEACHERS(※)という教材を使って行ったプログラミング教育の内容です。

 

もちろん、特定の企業の宣伝をするということではありません。こういう教材で授業をするときには、だいたいどんなふうにするとうまくできるのかという「コツ」をお話ししていきたいと思っています。ですから、教材の部分はご自分の使いやすいような言語や教材に置き換えてお聞きください。

 

https://tech4teachers.jp/

 

陥ってしまいがち「残念なプログラミング授業」とは

私は11年前に情報の教員になって、最初の4年間は情報Bでプログラミングを扱っておりました。そのあと情報の科学で通算6年間プログラミングをやりましたので、その辺のことも含めてお話ししたいと思います。

 

まずは、私が経験した「残念なプログラミングの授業」を紹介します。ちなみに言語は、C言語やJavaなど難しいものにも挑戦しました。

 

「写経」。テキストを渡してひたすら写させる授業。

 

「コピペ」。電子データで正解を渡して、「コピペして使ってね。動いた?良かったー」という授業。

 

また、生徒に「自由にやっていいよ」「立ち歩いてもいいよ」「好きなプログラムを作ってみよう」と言って、収拾がつかなくなった授業。

 

そこで怒ったり厳しくしたりすると、生徒が寝てしまう…ということで、昔はいろいろと失敗を経験しました。

 

授業がうまく進まなかったのはなぜか?

失敗したいろいろな授業のどの辺がいけなかったのかを考えてみました。

 

まずは教材です。情報があまり新しくない、自由度がない、あるいは「これをやって何になるんですか」という内容だったように思います。

 

次に雰囲気です。なんだかつまらないし楽しくない。特に文系の女子から「プログラミングは楽しくない」という声をしばしば聞いて、心を痛めました。使っているテキストやWebサイトなども見づらい。「テキストに書いてあるでしょう」と言っても、そのテキストが見づらいと、生徒はそれだけで「難しい」と思い込んでしまいます。

 

一方で教員は、東京都の場合、一人しかいません。手を挙げている生徒の方へ行くと、他のところでまた別の生徒が手を挙げます。そちらに行くとまたこっちでということで、あちこちから呼ばれて行っているうちに授業が終わってしまいます。よく生徒には「私はファミレスの店員じゃないんだから」と言っているのですが、これはほとんどの情報の先生方が経験されていることだと思います。

 

ですから、これらの問題がすべて裏返しになればいい、つまり教材も新しくて、自由にできて、難しくない。雰囲気も楽しくて、授業のテキストも見やすい。生徒は勝手に自分で進めることができて、教員は自由に動き回って生徒の様子を見ることができる。そんな授業にすれば、プログラミングはうまくいくのでないかということです。

 

では、具体的にはどんなふうに授業を進めればいいのでしょうか。今日はそのコツをお伝えできればと思います。

 

TECH for TEACHERSを使った授業の進め方

それでは、今回使った教材と授業の進め方を具体的にご紹介します。

 

まず教材ですが、動画の資料とテキストがあります。動画の資料は全部でレッスンが1から10まであって、それぞれのレッスンに三つずつ話があります。

 

最初にプログラムのひな型が与えられています。テキストを見ながらソースを編集することにより、表示されるフォントや背景を変えたり画像や地図を挿入したりするなど、だんだん難しい技術を入れていくことになります。

 

それぞれの一つの動画が5分ぐらい。これが三つで一つのレッスンになっているので、授業1時間の中で15分ぐらい動画を見ることになります。では残りの時間は何をしているかというと、今度はテキストを見ます。

 

オンラインでテキストを見ながら1から順番にやっていくと、さっき言ったようなフォントや背景の変更などが自然にできていくという流れになっています。

 

生徒は動画を見ながら自分でテキストを開き、その日の自分のやるところを各自で進めていきます。わからないことがあったら動画をもう一度観るか、ネットで調べるか、近くの友達に聞くか、どうしても困ったら先生を呼びなさいという感じでやっています。そうすると、意外と生徒の間で解決することが多いですね。

 

「○○君はこれできているよ」とか、「○○さんのページはとてもよい」などと声をかけておくことも有効です。そうすると生徒同士で解決するだけでなく、こちらが思いもよらないようなテクニックでうまく切り抜けたりするということもあります。

 

教材を効果的に使うための様々な工夫

このテキストは、古臭くない新しい技術を使っているところがよいと思います。難しくなくて、オフラインでも見られるようなテキストがあるので便利です。

 

また、単にアプリの使い方にならないよう、タグ打ちでWebページを作れるというところが気に入っています。

 

今回使ったテキストエディターは、「Sublime Text 3」(※)というものです。私が好んで使っているテキストエディターなのですが、お使いになっている先生もけっこういらっしゃるのではないかと思います。タグのところや命令のところの色が変わるので、ソースコードの編集が非常にやりやすいです。

 

また、スタイルシートやテキスト、ブートストラップなどを編集するといったことも簡単にできます。テキストエディターはどれを使ってもいいのですが、もし何を使ったらいいか特に決まってない先生がいらっしゃったら、「Sublime Text 3」はおすすめです。 

こちらが今回使った授業のページです。ポイントは、全体を見渡しやすくするということです。

 

授業時間数が10時間あったので、1日1レッスンを目安にしてみました。進度の早い生徒は、だいたい30分ぐらいあれば全部終わってしまうので、このページだけを教えて、あとは自分で動画やテキストを見て、それぞれ進めてもらいました。そういう生徒は5時間ぐらいでレッスン10まで終わってしまうので、あとは好きなページを作っても構わないとしました。

 

もう一つのポイントは、全6クラスの生徒の進捗がわかるページを作ったことです。さらに、ここでは先輩たちが作った過去の作品も見ることができます。自分の作業をしながら、手が空いたときに他のクラスの生徒の作品を見たり、あるいは過去の先輩の作品を見たりして、どのようなものを作っているのかを参考にすることもできますし、あるいはそれ以上のものを作ろうというふうに意欲を持つこともあります。

 

また、授業の最後に生徒同士で相互評価を行うのですが、その時にこういう全ての作品が見られるページがあると非常にやりやすいのでおすすめです。

 

授業中に立ち歩いて他人の作品を見るのも相談するのもOKです。教員が良い作品や進んでいる作品を、「○○君がいいものを作っているよ」「○○さんのここがいいね」などと全体に聞こえるように言うと、みんなが「どれどれ?」と見にいきます。そうすると、その生徒も嬉しくてモチベーションがさらに上がります。

 

いろいろなブログパーツを使ったり映像にはないテクニックを使ったりすることも大歓迎です。放課後や休み時間、自宅での作業もOKにしています。

 

また、これはご意見が分かれるかもしれませんが、私は授業中にBGMを流しています。これが意外と大変で、10時間あるとネタが尽きます。どういうBGMをかけるかというのが、もしかしたら教員の一番の仕事になるかもしれません(笑)。今まで一人だけ「集中したいので静かにしてください」って言った生徒がいましたけれども、だいたいは楽しみながらやってくれました。たまにリクエストを受け付けたりすると、盛り上がってのめり込んでくれる生徒が増えたりもします。

 

まとめ~適切な教材と授業を楽しむ環境づくり

最後にプログラミング授業のコツをまとめておきます。

 

まずは、何と言っても適切な教材を使うことです。映像教材とテキストを見ながら、それだけで進められるような教材が望ましいでしょう。できれば教員は教え過ぎないように、ファシリテーターに徹しながら教室の中をぐるぐる回って一緒に楽しむという形がいいと思います。

 

次に、生徒たちが「燃える」要素としては、まずテーマ設定を自由にするということ。それから、過去の作品や他の人の作品がいつでも見られるようになっていること。さらに、作業は放課後や休み時間、自宅でもOK。テキストにないことをしてもいいし、むしろみんなに紹介してどんどん新しいことを取り入れていこう…そのような感じで進めるとよいのではないでしょうか。

 

相互評価、これも重要です。最後の授業で相互評価を行いますが、その際ポイントとなるのは、その場でコメントを生徒たちにフィードバックするということです。フィードバックが後日になってしまうと、印象が薄れてあまり効果が上がらないと感じています。「鉄は熱いうちに打て」といいますが、授業のフィードバックも、その場ですぐに行った方が効果的です。

 

雰囲気づくりについては、立ち歩く、他人の作品を見る、相談しあう、誰かに助けを求める……すべてOKにします。教員はBGMを流しながら、良い作品や進んでいる作品を紹介して、生徒と一緒に楽しみながらやるというのがいいのかと思います。もしよろしければ参考にしていただければと思います。

 

[質疑応答]

 

質問1(私立高校教員):二つ質問をさせてください。

一つ目は、生徒さんが過去の作品を見るに当たって、過去のOB、OGたちに何らかの許可を得ているのでしょうか。もしくは、許可をとらなくてもよいような、何か配慮などをされているのですか。

二つ目は、相互評価をする際に、コメントを出すに当たってのガイドラインというか、そういうものを用意されていたりするのでしょうか。

 

飯田先生:一つ目の、OB、OGの生徒たちに許可を得ているかどうかについては、特に許可をとるようなことはしておりません。ただ、この授業では毎年過去の作品を参考にし、「来年はみんなも見本になるよ」と、後輩にも見られることを前提に作ってもらっています。今のところ嫌だという生徒はいないですが、もしいたらそこは見られないように配慮します。なお、表現や内容にやや不適切な部分があるようなページは、抜くような配慮はしています。

 

二つ目の評価の観点については、授業の最初に細かい評価基準を生徒に示してあります。ちなみに評価基準を生徒に細かく伝えてから相互評価をさせると、だいたい生徒の評価と教員の評価は一致します。最近では、生徒の相互評価の結果と私の評価の結果を同じくらいの割合で合計して、総合して授業評価としています。

 

質問2(大学院生):相互評価についてですが、ほかのクラスのメンバー全員の作品について評価をするのか、それとも、例えばランキングで一番いいと思うもの三つまで選ぶといったようにするのか、その辺りを教えていただけますでしょうか。

 

飯田先生:時間的な制約から、評価はクラスの中、つまりおよそ40人分のみで行っています。評価は三つの観点についての5段階評価と、コメントを入れるというものにしました。それでも一人当たりにかけられる時間は1分程度になるので、かなり忙しいです。そのためコメントは「いいところを探して一言で記入するように」と指示しています。

 

※第10回全国高等学校情報教育研究会全国大会(東京大会)(2017年8月8日・9日)の講演より