読者です 読者をやめる 読者になる 読者になる

いんたーねっと日記

141文字以上のものを書くところ

中学生にプログラミングを教えてみた

www.wantedly.com

どういうわけか、会社で中学生向けにプログラミングを体験する会の講師に指名されて、HTMLとかCSSとかJavaScriptをちょろっと教えたりしました。

きっかけ

ある日執行役員エンジニア氏にとつぜん「中学生、好き?」という意味不明な質問をされ、聞いてみれば区内の中学校のコンピューター部の生徒さんたちにエンジニアの仕事を紹介したりプログラミングを体験してみたりする企画があるという話で、面白そうなのでやることにしました。

自分が中学生の頃どんな感じだったかを思い出してみると、HTMLを覚えてそれをFTPレンタルサーバーにアップロードすると全世界に発信できる!すごい!みたいなことをやっていた頃で、とはいえそこから一歩踏み出してプログラミングっぽいことをするには、独学ではなにからやれば良いのかよくわからなくて、入門書みたいなものを読んでみても何を言っているのかよくわからなくて挫折する……という感じでした。そういう時期にプログラミングの質問したらちゃんと教えてくれる人がいるのはすごいことなんじゃないかという感じがします。

準備

事前にわかっていたことはこんな感じでした。

  • コンピューター部の生徒さんたちはプログラミングなどはあまりやったことがないらしい
  • 一人一台のWindowsタブレットを与えられているらしくて(!)、プログラミング体験にはそれが使えそう
  • とはいえネットワーク接続やUSBメモリを使う自由はないっぽい

というわけで、開発のために何かインストールしてもらうとか途中まで作ったサンプルコードをいじってもらうというのもできないので、消去法的にHTML+CSS+JavaScriptをメモ帳で書いて(写経して)もらうという感じになりました。とはいえ日常的に触るWebの技術を体験できるというのは面白いんじゃないかな、という期待もありました。

学生時代にプログラミング入門的な授業のアシスタントをした経験から、ループがあるとけっこうな割合で挫折してしまうので敢えてやらない感じにしました。if文くらいまでやれれば充分かな、という思いがありました。

せっかくなので、当日教える内容の延長線で作れるモノをみせてあげたい、という気持ちもあって、当日の資料はWebページとして実装しました。

https://ymrl.github.io/hands_on_for_junior_high/

他の準備は、写経メインということで、手元でサンプルコードは見れたほうがいいだろうと印刷して、ほかにお菓子と会社のパンフレットやノベルティも用意しました。

当日

生徒さんは二十数人来るということで、興味ありそうな人を募ってアシスタント的なことをやってもらいました。4人くらいごとに班をつくってそこに一人以上ずつエンジニアが付くみたいな状態だったのでやりやすかったかと思います。

生徒さんたちはすごく礼儀ただしくて、オフィスに来るなり「起立、例」とかしてくれて、普段「チーッス、ウーッス」程度の挨拶をしている自分含めた弊社の人間が動揺するところから始まりました。最初は緊張していた生徒さんたちも、お菓子やドリンクバーの力もあって打ち解けてきたので甘いものは大事だなあという感じでした。

講師側は学生インターン1人を除いてアラサー以上ばっかりという感じだったので、中学1年2年生と一緒にプログラミングをやるというのはなかなか新鮮な体験でした。タブレットPCのトラックパッドの出来があまり良くなくて、トラックパッドを使うより画面をタッチしたほうが快適に操作できるとか、タブレットネイティブな若い人たちはテキストのカーソルを移動させるのに矢印キーより画面をタッチするというのはなかなか新鮮な発見でした。これは普通にソフトウェア開発に活かしたいですね。

あと生徒さんの成長速度がやはり早くて、2時間程度のあいだにみんなタイピングが早くなっていたのが衝撃的でした。アラサー以上の講師陣がわりとショックを受けていました。

とはいえやはりメモ帳でやるというのは大変で、全角半角の区別がつかないし、そもそもプログラミングをやったことがないとダブルクオートの出し方がわからないとか、いろいろな問題が発生しました。あと、色とかつかないと面白くなかろうとおもってCSSのサンプルを入れたら記号が多すぎて時間がかかってしまったみたいなところも、今思えばやらなくてよかったのではと思います。このあたりは次回があれば改善できるかなと思っています。あんまりコードの話をしすぎるとつまらないかなと思って小ネタを挟んだりしたんですが、わりとコードの話だけでも楽しんでもらえてたので安心でした。できればサンプルコードとVisualStudio Codeあたりのエディタを配布して、写経部分を減らせるとより良い体験にできたかもしれません。

資料はGitHubにCC-BY-SA 3.0で置いてあるので、もし似たような機会のある方がいらっしゃいましたら参考にしてもらえると幸いです。

github.com

こんな面白い機会を作ってくださった方々に感謝しています。あと、「こんな会社に就職したい!」って言ってくれた生徒さんがいたのは最高でした。