feature image

2022年9月16日 | ブログ記事

『中高生のためのプログラミング教室』でTAをしました

こんにちは、@d_etteiu8383です。この記事は夏のブログリレー 2022年 37日目の記事です。

本記事では『中高生のためのプログラミング教室』にTAとして参加した感想を述べます。過去4,5回ほどTAとして参加したことがあるのですが、その時の知見をあまり外部に向けて発信していなかったので今回改めて色々話します。

『中高生のためのプログラミング教室』とは

『中高生のためのプログラミング教室』は、弊サークルが毎年春と夏に開催しているプログラミング教室(体験会)です。

直近の開催報告記事も先日投稿されていますのでぜひご覧ください。

中高生のためのプログラミング教室を開催しました!(2022年夏)
traPは、8/28に中高生のためのプログラミング教室を開催しました。本記事は、その教室の開催報告となります。 本教室は対面で開催しました。2020年春以降でtraPのプログラミング教室が対面開催できたのは本教室が初となります。 今回の教室では、最初に教室全体で説明を行い、その後それぞれのグループに割り振った講義室に移動して、2人の生徒に対してtraPのTA1人が教えるという形で進行しました。 今回の教室の最終目標も、前回までのプログラミング教室同様、Webブラウザ上で動くインベーダーゲームを作成することです。 TAと生徒の間でアイスブレイクを行ったのち、教室がスタートしました。…

扱う内容

本教室ではJavaScripを用いてWebブラウザで動くインベーダーゲームを作成します。ゲーム制作を通してプログラミングの基礎を学ぶことを目標としています。

もうちょっと詳しく説明すると、CanvasRenderingContext2D.fillRect()でcanvasに長方形を描いてプレイヤー/敵インベーダー/弾として、setIntervalで繰り返し処理してゲームにしています。生徒にはsetIntervalに渡すコールバック関数の中身を書いてもらう形になります。

"プログラミングとは"から始まり、Hello World!、基本構文の説明、if文と進んでいきます。

LT会

お昼休憩時に、LT会としてtraPの部員から発表を行います。毎回プログラミングに関連のある発表が行われています。

LT会の様子(2022年夏)

反省

traPとして過去10回以上開催している本教室ですが、開催報告記事はほぼ毎回投稿されているものの、その反省点はあまり共有されていないため、今回(traP公式としてではなく@d_etteiu8383個人的に勝手に)簡単にまとめてみようと思います。

もちろん部内向けに文書として毎回開催後反省がまとめられ、引き継がれていますが、部外向けに出すことで他大学のサークル・団体等の活動での参考になれば幸いです。

開催形式

本教室は

で開催しています。私はオフライン1回、オンライン3回参加しています。

もちろんどちらの開催形式にもメリット・デメリットがあると感じています。

オフライン開催

オンライン開催

オンライン/オフラインでTA-生徒間のコミュニケーションがどう異なるかについては、かなり人によって意見が割れそうです。個人的にはオンラインの方が話しやすかったのですが、対面の方が話しやすいという人も普通にいます。

人数

TA対生徒の割合

何度か変化していますが、オンライン・オフラインともに"TA一人に生徒二人"で進めるのが基本になっています。

過去の開催から以下のような反省が得られています。

もちろん教材のレベルや生徒の年齢・経験にもよると思いますが、TA一人に生徒二人が無難かなと感じています。

全体人数

サークル内でTAとして参加できる部員数にも依る部分ではありますが、基本的にTA十数名、生徒20-30名での開催をしています。オフライン開催の場合はそこそこの広さの部屋を用意する必要がありますね。

また、本教室ではTAのほかに"遊撃"と呼ばれるスタッフが数名参加します。彼らは直接生徒に指導はせず、TAが解決できない問題(PC・エディタの不具合やよくわからんバグ)を解決するため、裏方で待機している人たちです。サークル内でも特にPC・JavaScriptに詳しい人を募って参加してもらっています。遊撃には毎回3-5人ほど参加してもらっています。

資料

解説資料

本体験会の資料はMarkdownで管理されており、honkitを用いて†イイ感じに†"本"にしたうえでwebページとして公開しています。

オフライン開催時、資料印刷のためのPDF化はebook-convertを用いて行っています。

Markdownで管理しているのがかなり偉いと思っていて、

といった利点があります。(弊サークルは部内チャットツール「traQ」(タグ:traQの記事一覧)や部内Wiki(Crowi)、部内CodiMDを部員全員が常用しており、たいていの部員はMarkdownをスッと書けるという背景もある)

コード

本教室で使用するコードは以下のような構成になっています。

.
│  index.html
│  logic.js
│  main.js
├─.vscode
│      extensions.json
│      settings.json
├─example (資料の各章終了時点での完成形)
│      0.js
│      1.js
│      ...
├─img (画像素材)
│      enemy.png
│      ...
└─se (音声素材)
        bgm_l.mp3
        ...

index.htmllogic.jsmain.jsが読み込まれており、生徒にmain.jsを書き換えてもらう形になっています。

logic.jsでは†おまじない†的なJavaScript特有の操作みたいなものを詰め込んでいます(canvas.getContext('2d')window.addEventListener('keydown', keyDown)setInterval()など)。main.js内のmain関数の中を書き換えるだけでゲームが作れるようになっています。

.vscodeを作って強制的に設定を適用させているのが良いですね。

環境

PC

オンライン・オフライン開催共に生徒自身が所有しているPCで作業してもらう形になります。「そもそもPCを所有していないと参加できない」のは個人的には悲しいポイントですが、サークルとして自由に使えるPCを複数台所有しているわけでもないので仕方ないですね...

参加者自身のPCを使用する場合の注意点として以下のようなものが挙げられます。

エディタ

本教室ではVSCodeを事前にインストールしてもらうようにしています。僕が初参加した時代からずっとVSCodeが利用されていたので選定理由は詳細には知らないのですが、初心者向けにも妥当な選択だと思います。

ただ、正直この辺りは改善の余地というか、もう少し検討をすべきとも思っていて、JSを扱う程度なのでブラウザ版VSCodeでも十分かなとも感じています。

ブラウザ版VSCodeを使用していなかった理由として過去に

等が挙げられていたのですが、"OS・ブラウザを完全に指定してそれ以外を排除"してしまうのであればブラウザ版でも大丈夫かなといった感じ。

実行環境

コード構成からもわかるように、index.htmlをブラウザで開くだけで†環境構築†は終わりです。生徒にはChromeを事前にインストールしてもらうよう案内しています。

main.jsを編集→ブラウザをリロード→ゲームの動作/開発者ツールでのエラーの確認

といった形で進めています。これぐらいなら別にホットリロードとかはいらなさそうなのでLive Serverとかは使用していません。

言語・制作物

本教室ではJavaScriptでのゲーム制作を通してプログラミングについて勉強しますが、完全初心者向け体験会としては無難な選択だと思います。

まずJavaScriptについてですが、以下の二点だけでも選択する理由としてかなり強いと思っています。

ネット上に参考資料が無限に転がっているので、体験会後生徒自身で学修を進めやすいのも良いですね。

制作物を"インベーダーゲーム"にしている点は、実装難易度と"楽しさ"の観点から無難な落としどころなのかなと感じています。ブラウザで動作する時計やToDoリストを中高生向け教室で作ったところで、生徒自身が意欲的に取り組んでくれるとも思えませんし...

もちろん言語をPythonにして「†AI†で遊ぼう!」とか、C言語で「ロボットを動かそう!」とかもできたら面白そうですが、弊サークルがゲーム制作を主な活動内容としているのも「JSでインベーダーゲーム」な理由の一つです。

その他

zip解凍は地味に強敵

本教室の資料とコードは当日zipファイルとして配布されるのですが、zipの解凍は難しいです。「配布したzipファイルを解凍してください」で伝わる生徒は体感7割程度です。zip解凍から丁寧に説明しましょう。

数学の学習指導要領は便利

変数の説明やif文・真理値の説明、(ゲーム制作なら)座標系の理解など、学校の数学の授業と関連して説明できるプログラミングの概念は多々あります。文字を用いた式を中学一年生で習うこと、集合と命題を数Iで習うことなどを頭に入れつつ、「学校の授業でこういうのやったよね」と一つ例を挙げるだけでもかなり理解度が変わります。

私は毎回文部科学省の学習指導要領を確認しています。

おまけ LT内容の公開

おまけに僕が過去のプログラミング教室で行ったLTのスライドを共有します。"こんな雰囲気でやってます"の例です。

その1

リンク:https://detteiu.trap.show/slides/p4kLT-21-summer/

その2

リンク:https://detteiu.trap.show/slides/p4kLT-22-spring/

その3

リンク:https://detteiu.trap.show/slides/p4kLT-22-summer/

一貫して「プログラミングは手段」を主張していますね。ただこの辺りは人によって違う意見もあると思います。


以上、簡単なまとめではありましたが、何かの参考になれば幸いです。最後までお読みいただきありがとうございました。夏のブログリレー 明日の担当者は@Komichiさんです!楽しみ~

d_etteiu8383 icon
この記事を書いた人
d_etteiu8383

グラフィック班とゲーム班とSysAd班所属 いろいろ活動しています

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2022年9月26日
競プロしかシラン人間が web アプリ QK Judge を作った話
tqk icon tqk
2022年9月16日
5日でゲームを作った #tararira
Komichi icon Komichi
2023年9月27日
夏のブログリレーは終わらない【駄文】
Komichi icon Komichi
2023年9月13日
ブログリレーを支えるリマインダー
H1rono_K icon H1rono_K
2023年8月21日
名取さなになりたくてOBSと連携する配信画面を作った
d_etteiu8383 icon d_etteiu8383
記事一覧 タグ一覧 Google アナリティクスについて