KCC JOURNAL

小中学生がAIを使ってどこまでプログラミングを自習することができるのかーー。Kids Code Club（KCC）ではこの春、自社開発しているプログラミング学習用AIを実際に子どもたちに使ってもらうワークショップを開催しました。テキストコーディングの経験がある小中学生が参加し、JavaScriptのオリジナルチュートリアルに沿った回答をするAI チャットツールを使用。ゲームやアートなど自由に創作をしてもらったところ、「以前よりもプログラミングの意味が理解でき、楽に学習ができた」という声が上がり、カスタムAIの効果が確認できました。

特別ワークショップ ：AIを使ってJavaScriptプログラミングをやってみよう 
2024年4月6日と13日に開催し、過去のKCCのワークショップなどでp5.jsを使ったプログラミングの経験がある小中学生11人が参加した。ほとんどの参加者は過去のワークショップ内でJavaScriptの体験をした程度で、普段はScratchやMinecraftなどを使ってプログラミングを楽しんでいる子がほとんどだ。

グループごとに画面共有しながら作業。他の子の質問例を見るのも大きなピアラーニング効果があった。

「〇〇したい」がすぐに実現する驚き

KCCがこれまで開催してきたテキストコーディングのワークショップでは主に「〇〇を作ってみよう」のように取り組む機能や作品をこちらから提案する形式がほとんどでした。ところが今回開発した「AI Chat」 を使うことで子どもが自由に作りたい機能について質問ができるようになっています。実際に出た質問例をご覧ください。

この質問に対してAIが提示したコードをそのままp5.js Web エディタで実行すると大小様々な大きさの円がランダムに上から降ってくるプログラムになっていました。。

最終的にこの子が思い描いていたのは、上から物体が落ちてきて、それをよけるようなゲームだったのでしょう。AIは「隕石」をすべて円で表現しましたが、少なくとも「物体が上から降ってくる」という場面のコードを正確に提示しています。通常のプログラミング学習ではここまで辿り着くには、変数やループ、条件文、配列など、数多くのプログラミングの仕組みを理解しないといけませんが、AIを使うと自分のイメージした機能に近いものを提示してくれるため、そこで一気に楽しさが増す体験ができたという声が多く聞かれました。

子どもがChatGPTをそのまま使えない理由

生成AIを使って自分が期待する回答が得られるようにするには、質問の中に十分な背景や文脈情報を入れる必要があるのはもう広く認識されている点だと思います。先に挙げた「隕石がたくさん落ちてくるコードを教えて」という質問をそのままChatGPTにしても、提示されるコードはPythonです。しかも「JavaScriptで書いて」と指示してもHTMLとJavaScriptでブラウザ表示されるコードとなり、p5.js Webエディタで書くコードにはなりません。

以前のワークショップでAIを紹介した際に子どもたちを困惑させた問題がこの「プロンプトを組めない」という、大人でも悩むAI利用の難しさでした。

小学5年生でこんなきれいなゲームのデザインができた！

日米のエンジニアがJavaScript学習用AIを研究開発

KCCで使う教育用システム開発を支援する開発者コミュニティ、One Code Clubに参加する3人のエンジニアが協力し、Open AI社が提供するAssistant APIを利用して次のような視点からプロンプトや知識データのデザインを進めました。

• サイレントリアルを使ってJavaScript学習をする小中学生の自習をサポートする

• 回答ではp5.jsエディタでそのまま使えるサンプルコードを提示する

• 解説はなるべく簡素に、小学生でも理解できるように易しい漢字のみを使用。

• コードのコピー操作が簡単にできるようにサポートする。

AI Chatで見たAIの回答に次のようなフィードバックをもらったところ、約85％のAI回答に「うまくいった」という回答が得られました。

今回のAI Chat 開発に参加した３人のOCCメンバー：
✅ 坂島悠太さん：福岡の専門学校生でセキュリティエンジニアリングが専門
✅近江翼さん：東京都内でバックエンドエンジニアとして活躍中
✅ 林遼太郎さん：米国ロサンゼルス在住のソフトウェアエンジニア

エンジニア自らがAIを活用してプログラミング作業をしているからこそ「AIがどこまでできて、どこまでできないのか」という‟勘所”があります。そこをしっかり認識した上でプロンプトやアプリ機能のデザインをすることで「p5.jsを使ったJavaScriptプログラミング学習をする小中学生のためのAI」に仕立てることができました。

最終的に完成したAI Chatに触れたある参加者が「マインクラフトのコマンド一覧を見せて」と質問しましたところ、次のような回答になりました。

今日はマインクラフトのコマンドについて聞きたいんですね。でも、おしえるのは「p5.js」というプログラミング言語のことなんです。p5.jsでは絵を描いたり、動かしたりすることができますよ。マインクラフトのコマンドには答えられないけど、p5.jsでおもしろいことを一緒にやってみませんか？何かほかに知りたいことがあったら、どうぞ聞いてくださいね！

カスタマイズされたAIがどれだけ目的に合うように仕立てられたか、この例を見るとよく理解していただけると思います。

自分のアイディアを即実現させた10の質問

カスタムAIを使って子どもたちがどうやってプログラミングをしていったかを理解していただくために、一つの例をご覧いただきます。ある小学校高学年の子はAIに次の10の質問をしていきました。

1. 丸を右と左の矢印キーで動かしたい。

2. 上の矢印キーを押すと、円がジャンプするコードを書いて

3. 右と左の矢印キーで左右に移動できるようにして

4. そのまま図形を星形にして

5. そのまま背景を青から黒へのグラデーションにして

6. 星が矢印キーで左右に動くようにして

7. そのまま背景を黒から青へのグラデーションにして

8. そのまま星をもう少し大きくして

9. そのまま星がゆっくり回るようにして

10. drawStarの関数を入れて、書き直してください

純粋に自分の頭に浮かんでくるアイディアを一つ一つAIに質問していって、最終的に矢印キーできれいな星が回転しながらジャンプ移動するというプログラムを完成させています。

これを何もないところから作っていくプロセスを子どもに説明することがいかに難しいか、プログラミング経験のある方であれば容易に想像がつくと思います。AIはまるで「登山でいきなり8合目まで連れて行ってくれて、最後の登頂の興奮がすぐに味わえる状態にしてくれる」ようなものとも言えます。

それぞれの子どもが実現させたいもので自学習ができる！

もちろん、いきなり8合目まで連れて行くのでは何も学習していないのでは、という疑問が湧いてくると思います。ところが、子どもたちからのフィードバックには、提示されるコードの意味が説明によってよく理解できたという声が散見されました。

かつてのワークショップのように「与えられた課題」に関して説明を聞くのと、今回のように「自分がやりたいことに直結して」説明を見るのとでは大きな違いがあるのだと思います。

「前まであまりjavascriptの意味が分からなかったけどAIの説明やクルーの皆さんの声掛けがあって今日少し理解や楽しさが分かってきて楽しかったです。」

こうしたフィードバックから見えてくるのは、「自分事」として学習に取り組むことで理解度が大きく違ってくるという点です。カスタムAIを活用したプログラミング学習はある意味「究極の個別最適化学習ツール」となる可能性があり、ここは大いに注目したいポイントです。

今後はScratch、Minecraft、Roblexなどに拡大

AIだけで子どもの自習をサポートするようになるまでにはまだ多くの課題がありますが、限られたスタッフの数でも多くの子どもたちのプログラミング自習活動をサポートすることは十分に可能であることは今回明らかになったと思います。今回は文章生成AIにマッチしたテキストコーディングでのAI利用でしたが、今後はScratchなどのビジュアルプログラミングでもAIの利用ができないか研究開発を進めていきます。

執筆：Kids Code Club理事 板垣政樹（いたがき まさき）