はじめに

皆さんこんにちは。東京科学大学デジタル創作同好会traPの @Alt--er(23B)でございます。
普段は主に プロジェクト でのゲーム制作や Game班,SysAd班,グラフィック班 での活動を行っています。

さて、こちらの記事は 伊勢崎市教育委員会様 よりご依頼を受けて行った 「ISESAKIプログラミングチャレンジキャンプ in TOKYO」のプログラムの一つ、「東京科学大学の学生に教わるプログラミング」での活動報告記事となります。
なお、本記事の作成および教室での撮影許可を先方より頂いております。この場をお借りして改めて感謝申し上げます。

目標制作物

参加される生徒さんが、 Scratch による「ビジュアルプログラミング」の経験があるとのことでした。
そこで、ステップアップを目的とし JavaScript を用いた「テキストプログラミング」の入門を行う講義内容を構成しました。
中学生のみなさんにも興味を持ってもらいやすいよう、簡単な図形で構成されるゲームを作成することを目標とし、講義設計および教材制作を行っています。

また、生徒側端末の制約からブラウザ上での JavaScript 実行環境である p5.js の Web Editor を用いてコーディングを行いました。

教材について

教材は traP で開催されている部内向けの講習会資料と同様に VitePress を用いて Web 上に公開しました。

今回の教材は

1. 理論編
2. 初心者向けコースの実践編
3. 中級者向けコースの実践編
4. 付録

という大きく分けて4つのパートで構成されています。

「1. 理論編」では、Scratch などのビジュアルプログラミング言語を学んだことがある人を対象に、演算や変数・条件分岐などといった、プログラミングの基本的な概念を扱いました。最初に概念の説明をし、適宜練習問題や演習を挟む構成となっています。

「2. 初心者向けコースの実践編」では、JavaScript のフレームワークである p5.js を使って、「落ちものゲーム」が完成するまでの流れを扱いました。前半は教材を見ながらハンズオン形式でゲームを完成させ、後半はさまざまなアレンジのやり方を簡単に紹介する構成となっています。

「3. 中級者向けコースの実践編」では、JavaScript のフレームワークである p5.js を使って、「15パズル」が完成するまでの流れを扱いました。こちらもハンズオン形式で進めることができ、最後にはGitHub Pagesへのデプロイ方法まで紹介しています。

「4. 付録」ではRGBや型、スコープなどといった、本編で扱いきれなかったトピックを紹介しています。

いずれも今回の教室のために、@howard127 , @rurun , @Suima などを中心に、運営メンバーで一から作成しました。

教室の様子

当日は、約3時間の教室を以下のように進行しました。
また、生徒の中でも習熟度に大きな差があったため、事前のアンケートに基づきクラス分けを行い指導 / 補助を行いました。

通常クラス

通常クラスでは、前述した教材に沿って進めました。@Lachite が前で全体に説明しTAがフォローする形で、プログラミングを体験してもらいました。

用意した教材の最後まで完成させることはできなかったものの、プログラミングの基本的な概念を学んでもらうことができました。

発展クラス

発展クラスの方では、先述した教材作成で主軸となってくれた @howard127 が中心となって講義をしました。

発展クラスの方では、通常クラスとは異なり、スライドパズル(所謂15パズル)を作成する実習を行いました。

お昼ごはん

講義終了後は、参加生徒の皆さんを交えてお昼ご飯、歓談会を実施しました。
生徒間同士の交流、生徒と担当部員の交流ともに活発で、参加された皆さんのパワーも感じ取ることができました。

これを機に、生徒の皆さんに科学大やtraPに関心を持っていただければ幸いです。

中高生のためのプログラミング教室について

traPでは、夏休みと春休みの時期にも中高生向けのプログラミング教室を実施しております。
これまでの開催回数は10回を超え、どの回でも多くの参加者に満足いただいているものとなっております。

こちらはどなたでも無料でご参加いただけますので、興味がありましたらtraPウェブサイト、公式Xなどをご確認ください。

中高生のためのプログラミング教室を開催しました!(2025年夏)

8/23に中高生のためのプログラミング教室を開催いたしました。 今回も例年通り対面形式で開催し、TA1人に対して2人の生徒がつく形で教室を進行しました。 本教室では、JavaScriptを用いてブラウザ上で動くシューティングゲームを作成しました。 司会による全体の説明ののち、各グループに分かれてプログラミングを始めました。 以下は、当日に使用した資料の一部です。プログラミングとは何かといった概念的な話から始まり、図形の描画やキーボード操作を受け付ける方法など基本的なことを学んだ後、それらを活かして実際のゲームを作るという流れになっています。 お昼休みにはドミノ・ピザさんのピザ(アレルギーの方にはお弁当)をいただきました。生徒やスタッフへの昼食・飲み物の提供は、ご協賛いただいている株式会社サポーターズ様の支援により実現しています。 また、昼食後には@Alt--erさんによる「Just DO it !!!!」、@howard127さんによる「ゲームエンジン『Minecraft』」というLT(ライトニングトーク)が行われました。皆さん真剣に話を聞いていました。LTに併せて行われ

東京科学大学デジタル創作同好会traPmirin

プログラミング教室 - 東京科学大学デジタル創作同好会traP

『デジタル創作同好会traP』は、東京科学大学で活動するデジタル創作・プログラミング系サークルです。ゲーム制作を中心に、アプリ、音楽（DTM）、グラフィック（イラスト、3Dモデル、ドット絵、動画）などのクリエイティブ活動の他、競技プログラミング（競プロ）やCTFも行っています。

東京科学大学デジタル創作同好会traPmirin

終わりに

これまで、traPでプログラミング教室を運営する機会はありましたが、公的機関からの依頼を受けての開催は初めての経験でした。

@Alt--er 自身は教室の運営のための諸連絡を主に行なっていましたが、初めてのやり取りも多くお手を煩わせてしまうところも複数ありました。懇切丁寧に対応くださった伊勢崎市の担当者様にも、改めて感謝申し上げます。

参加された生徒の活発な様子には、私たち部員も元気づけられ今後の活動への大きなモチベーションになったと思います。
参加してくださった生徒の皆さん、協力してくださった伊勢崎市教育委員会の皆さんおよびtraP部員の皆さん、ありがとうございました。