KCC JOURNAL

KCCジャーナル

2026/4/8

AI開発によって「できた!」がすぐに体験できる‶特化型教材″を実現  ー 無料オンラインイベント『英語で学ぶコンピューターサイエンス』での教材開発


小中学生が日米のITエンジニアからオンラインで直接コンピューターサイエンスの基本を学ぶ『英語で学ぶコンピューターサイエンス (CS in English)』ではここ1年ほど、テーマに沿った特化型の教材を自主開発し、短時間のセッションで効率的にCSの概念が体験できるようにしています。そんな贅沢な教材制作を可能にしているはもちろんAI開発です。本記事ではそうした「特化型教材」の開発に至った背景と、教材作成のプロセスについて紹介していきます。

テスト駆動開発のメイン講義。Googleのグレッグ先生とAmazonのUtako先生が英語と日本語で講義しました。

『英語で学ぶコンピューターサイエンス:CS in English』

日米で活躍する現役ITプロが小中学生にコンピューターサイエンスを教える無料オンラインイベント。2018年にスタートし、今春からSeason 8に入る。Seattle IT Japanese Professionsl - SIJP(米国シアトル)、一般社団法人Kids Code Club(福岡)、特定非営利活動法人くまもとLRネット(熊本)が中心となって企画・運営。Google, Amazon, Microsoftなど大手IT企業から国内外のスタートアップで活躍する現役エンジニアが直接子供たちとハンズオンの演習を進めるBreak Outセッションが好評。毎回100人前後の小中学生が日本、アジア、北米から参加する。


汎用プログラミングツールの限界

プログラミングやネットワーク、データベースなどCSには難しい技術の概念が数多く登場し、その基礎部分を理解してもらった上でハンズオンで楽しめるアクティビティをするというのがCS in Englishの面白いところです。しかし、それを2時間のイベントで実現させるのは至難の業です。

通常、その日のトピックに関する「メイン講義」を40分、英語と日本語で行い、その後子ども5、6人とエンジニアのグループに分かれてハンズオンを40分行います。最後にはKahootというクイズゲームを通してその日に習った内容を復習します。

最大の課題はハンズオンに使うツール。ScratchやJavaScriptなどの汎用言語でコーディングできれば一番なのですが、短時間で「体験した」と感じられるアクティビティを用意するのは難しく、特殊な「お膳立て」を組み込んだ教材を自前で作るしかないのが実情です。

そこで、2026年3月に開催した「テスト駆動開発(TDD)」の回で開発したTDD Tutorial をどのように設計・制作したかを紹介していきます。

TDD Tutorialのソースコードはこちらで見ることができます:
https://github.com/one-code-club/tdd-tutorial

「テストブロック」が最大の要件

今回のテーマは「テスト駆動開発 (Test Driven Development: TDD)」で、AI時代に重要性が増している開発手法の一つです。ところがこの「テスト」というのはプログラミングの目的であって、特別なコードやツールがあるわけではありません。このため「これがテストというコードだよ」というのを一目でわかるようにするには汎用コーディングではとても複雑になります。そこで「テスト」というコードブロックが使えるようにするのが最大の要件となります。

TDDを体験するために用意した「テスト」ブロック

まずは最小限の要件でMVPを作る

「AI開発」というのは単に「〇〇を作ってください」のような漠然とした要望を伝えるだけのバイブコーディングと異なり、「何をどのように作るか」を詳細にAIに伝えます。さらに、一度に全部作るのではなく、最小限のシステムをまずは構築し、そこから肉付けしていきます。この最初の一歩をMVP (Minimum Viable Product)と呼ばれたりします。

今回最初に用意したMVP用の要件定義書(PRD)がこちらです。

初期PRDの一部。最小限のMVPを作るための要件からスタートします

今回の初期PRDはScratchのようなビジュアルコーディングのUIを作ることに限定したものですが、これは最初の段階ではどのようなデザインにするか全くイメージできていなかったためです。この最小限の要件定義をClaude Code (Opus 4.6) で処理してできたアプリがこちらです。

基本的なブロックプログラミングのツールが出来上がり、簡単なコードを書いて実行させることができます。これをもとに「テスト体験専用のアプリ」に仕立て上げていきます。n

機能ごとに追加・改善する

ベースのMVPができたら、あとは細かい要件に応じて機能を追加していきます。SIJP代表理事の今崎憲児さんと細かい機能の調整を進めながら現在のバージョンを完成させます。

  • 「テスト」ブロックの追加

  • テスト失敗・成功でブロックを赤・緑にする(REDとGREENの実装)+ エラーメッセージの表示

  • サンプルコードをコピーする機能

  • コードのインポートとエクスポート

  • ガイドや画像の追加

実際には各機能について一つひとつAIに要件の詳細を渡し、コードを書いてもらって段階的にアプリを完成させていきます。

PRDで曖昧な点はAIから質問が飛んできます。念頭に置いたアーキテクチャをもとに適切に回答をしていく必要があります。

アプリ作成にAIが費やした時間はたったの23分

TDD Tutorialを完成させるまでの準備期間は結局2週間ほどかかりましたが、コアの機能を作る時間は3時間もかかっていないはずです。

ここで実験的に最新バージョンをもとにAIに初期PRDを更新してもらい、それをもとに新たに最初からこのツールを作ってもらうとどうなるか確かめてみました。更新されたPRDはこちらをご覧ください。これをAIに渡して実装計画を作成してもらい、あとは実装させるだけです。r完成までにたったの23分。出来上がりがこれです。

「逆算」的にPRDを更新し、ツールを作り直してもらったら…

一部、色合いなどの調整は必要ですが、機能的にはほぼ完全に再現しています。つまり、最初から最終版の要件を詰め込むことができたら、この程度のアプリ開発には30分とかからないのです。

「できた!」が味わえるツール

プログラミングはある意味、一行一行が成功体験です。ピリオド一つ付け加えるだけでバグが修正されることもあります。学習は大変ですが、「できた!」という成功体験をたくさん味わえるのも事実です。

短時間のオンラインイベントでいかにこの成功体験を味わってもらえるかがとても大切な要素となっています。それだけに、すぐに核心となるアクティビティができるカスタムツールの用意がとても重要となってくるのです。

今回のテスト駆動開発では、❶まずは失敗するテストを書く、❷テストする関数を実装する、❸デバッグしてテストをパスさせる、という3つの流れを一気通貫でできるTDD Tutorialが準備できたからこそ、TDDの本質の部分を体験できたはずです。

テストが失敗するとブロックが赤くなる

「最初はうまくいかなかったけど、直していたら最後はうまくいったのが嬉しかった」

参加した小学生からもらったコメントから読み取れるように、「テストファーストで失敗する」から、実装・調整後に「テストが成功する」というプロセスを視覚的にもわかりやすく体験させられたはずです。

正しく関数を実装できたらテストがパスして緑色になる

教材は‶探すもの”から‶作るもの”へ

わずか1年ほど前は、プログラミング教材としてのアプリを開発するのはとても大変なことで、当然のことながら一度作った教材は何度も再利用していました。しかし、今回の例でお分かりの通り、ここまで複雑なアプリでも、仕様がはっきりしていれば数時間でかなり高度なものが作れます。

「もっと分かりやすく、もっと楽しく」という目的で特定のテーマやトピック、ポイントを教えたり体験したりする教材を教える側自らがどんどん開発する流れが今後益々加速するはずです。


執筆:板垣政樹(Kids Code Club理事)

この記事を拡げて応援する

関連記事

keyboard_arrow_left

一覧へもどる

HOMEkeyboard_arrow_rightKCCジャーナルkeyboard_arrow_right

AI開発によって「できた!」がすぐに体験できる‶特化型教材″を実現  ー 無料オ...

わくわくするテクノロジー体験を
すべての子どもたちへ

子どもたちの笑顔と希望をつくるために、まずはできることから一緒にはじめてみませんか?

寄付で応援する

keyboard_arrow_right