ChatGPTとp5.jsで学ぶAI時代のプログラミング体験
こんにちは。
藤井寺、羽曳野、柏原の年長から学べる、こどもプログラミング教室 すまいる・キッズのとどちゃんです。（西尾）
ここまで、バイブコーディングについて2本の記事を書いてきました。
1本目では、バイブコーディングとは、AIに全部作らせることではなく、AIと会話しながら、自分の作りたいものを少しずつ形にしていくことだと書きました。
①バイブコーディングとは何か
2本目では、AIがプログラムを書いてくれる時代だからこそ、プログラミングの基礎やITリテラシー、そしてAIリテラシーが大切になるという話を書きました。
③バイブコーディングで、ミニゲームを作ってみよう
今回は、もう少し具体的に、すまいる・キッズで準備している
「バイブコーディングで学ぶAIプログラミング講座」
では、どんな流れで学んでいくのかを書いてみたいと思います。
AIを使う前に、まず安全面を大切にします
今回の講座では、ChatGPTなどの生成AIを使う予定です。
ただし、子どもたちがAIを使うことについては、最初にきちんと考えておく必要があります。
生成AIのサービスには、年齢に関するルールがあります。
たとえば、13歳未満のお子さんについては、子ども本人が自由にAIアカウントを作って使うような形にはしません。
また、13歳から18歳までのお子さんについても、保護者の同意や、大人の見守りが大切になります。
そのため、すまいる・キッズの講座では、子どもたち個人のAIアカウントを作る形ではなく、教室で管理するAI環境を使って進める予定です。
小学生のお子さんについては、いきなりAIに直接入力して送信するのではなく、まずGoogleドキュメントに「AIへのお願い文」を書いてもらいます。
たとえば、
「p5.jsで、丸いキャラクターを矢印キーで動かすゲームを作りたいです」
「上から落ちてくる敵に当たったらゲームオーバーにしたいです」
「小学生にもわかるように、コメントをつけてください」
こんなふうに、自分の作りたいものを言葉にしてもらいます。
そして、その内容を先生やスタッフが確認したうえで、AIに送信します。
最後にEnterキーを押してAIにお願いするところは、スタッフが確認してから行う形にします。
これは少し手間に見えるかもしれません。
でも、ここがとても大切だと思っています。
AIに名前や住所、学校名、電話番号、顔写真などの個人情報を入れないこと。
AIから出てきた内容を、そのまま信じすぎないこと。
もし思っていない内容や、少し不安な内容が出てきたときには、すぐに先生に知らせること。
こうしたことも含めて、AIとの付き合い方を学んでいく講座にしたいと思っています。
なぜp5.jsを使うのか
今回、最初のプレ講座では、ChatGPTとp5.jsを使ったミニゲームづくりに挑戦する予定です。
p5.jsは、JavaScriptを使って、ブラウザ上で絵を描いたり、動きを作ったりできるツールです。
難しく聞こえるかもしれませんが、画面に丸を表示したり、キャラクターを動かしたり、マウスやキーボードに反応させたりすることができます。
そして、p5.jsの良いところは、実行結果がすぐに目で見えることです。
コードを書いたら、すぐ動かしてみる。
動かしてみて、なんか違うなと思ったら、また直してみる。
エラーが出たら、どこが違うのかを考える。
そして、もう一度動かしてみる。
この流れがとても速くできます。
前の記事でも書いたように、プログラミングでは、作って、試して、直して、また試すことが大切です。
PDCAをぐるぐる回すように、少しずつ良くしていくことが大切です。
p5.jsは、その練習にとても向いていると思っています。
結果が画面で見えるので、子どもたちにもわかりやすいです。
「動いた！」
「なんか速すぎる！」
「敵が多すぎる！」
「あれ、画面から出ていった！」
「ここを変えたらどうなるんやろ？」
そんなふうに、目で見て、感じて、試しながら進められます。
「AIへのお願い文」はシートで考え、Googleドキュメントに残します
今回の講座では、AIへのお願い文をきちんと考え、記録として残すことも大切にします。
いきなり真っ白なGoogleドキュメントに向かって、「AIへのお願い文を書いてみよう」と言われても、子どもたちは少し迷うと思います。
そこで、Canvaで作った見やすいワークシートも使う予定です。
「どんなゲームにしたい？」
「どんなキャラクターを出したい？」
「どう動かしたい？」
「どこを直したい？」
そんな順番で考えられるようにしておくと、子どもたちも頭の中を整理しやすくなります。
そのうえで、AIへのお願い文はGoogleドキュメントに入力してもらいます。
最初にどうお願いしたのか、うまくいかなかったときにどう聞き直したのか、エラーをどう伝えたのか。こうしたやり取りを残しておくことで、あとから振り返ることができます。
これは、ただAIを使った記録ではありません。自分の考えを言葉にする練習であり、相手に伝わるように説明する練習でもあります。
もちろん、タイピングの練習にもなります。すまいる・キッズでは、これまでもタイピングを大切にしてきましたが、今回も「AIに聞くために、ちゃんと打つ」という形で、自然に入力する時間が増えていくと思います。
そして、Googleドキュメントに書いたお願い文は、先生やスタッフが確認してからAIに送ります。
個人情報が入っていないか、AIに送ってよい内容か、何を作りたいのかが伝わる文になっているか。そうしたことを確認したうえで、最後の送信操作を行います。
これは、子どもたちを信用していないからではありません。AIという新しい道具と安全に付き合うために、最初は大人が横にいて、使い方を一緒に見ていく必要があると考えているからです。
作品そのものだけでなく、AIにどうお願いしたのか、どこを直したのかというプロセスも残せるようにしたいです。
まずは基本も少し学びます
もちろん、いきなりAIに全部お願いして終わり、という形にはしません。
最初に、p5.jsの基本的な仕組みも少しお話しします。
たとえば、最初に画面の大きさを決めて、そのあと何度も画面を描き直しながらキャラクターを動かしていく。そんな基本の流れを、かんたんに確認してから進めます。
また、JavaScriptの基本的な考え方にも少し触れます。
変数に数字を入れること。
条件によって動きを変えること。
くり返しの中で画面を更新していくこと。
キーボードやマウスの入力を受け取ること。
このあたりは、Scratchを使ったことがあるお子さんなら、少しイメージしやすいところです。
Scratchで学んできた「変数」「条件」「くり返し」「キーボードで動かす」といった考え方を、JavaScriptやp5.jsのコードに少しずつ置き換えて見ていくような形で進めたいと思っています。
むずかしい言葉をたくさん覚えることが目的ではありません。
でも、AIが出してきたコードを見たときに、
「ここでキャラクターの位置を変えているのかな」
「ここで敵を動かしているのかな」
「この数字を変えたらスピードが変わるのかな」
と、少しでも見当がつくようになってほしいと思っています。
AIに作ってもらったコードでも、中身をまったく見ないのではなく、
「どこを変えたらどう動くのか」
を一緒に見ていきます。
もしAIが少し難しいコードを出してきたら、
「小中学生にもわかるように、もっとシンプルなコードにしてください」
「コメントをたくさん入れて、ていねいに説明してください」
とお願いし直すこともできます。
こういう聞き直しも、AIを使ううえで大切な練習になると思っています。
講座ではミニゲームづくりに挑戦します
実際のバイブコーディングでは、子どもたち自身の「こんなものを作ってみたい」という気持ちを大切にしたいと思っています。
ただ、今回は初めての取り組みです。いきなり「AIを使って自由に作ってみよう」と言われても、どこから手をつけたらいいのか迷ってしまう子もいると思うんですね。
なので、今回のプレ講座では、最初にこちらでミニゲームのお題を用意しておく予定です。
まずはそのお題を見ながら、「これをAIにどう伝えたらいいかな」「どんな言葉でお願いしたら、思っている動きに近づくかな」というところを、私やサポートスタッフと相談しながら進めていきます。
もちろん、全部こちらで決めてしまうのではなく、できるだけ本人の意思も大切にしたいと思っています。
「ここはこうしたい」
「この動きはもう少し変えたい」
「このキャラクターはこんな感じにしたい」
そんな声が出てきたら、それを拾いながらAIへのお願い文にしていきます。
ゲームとしては、最初は軽めのところまで作る予定です。キャラクターを動かす、敵をよける、点数をつける、ゲームオーバーを作る、色や速さを変える。まずはこのくらいの範囲で、「AIと一緒に作る」感覚をつかんでもらいたいと思っています。
小さくても、自分で考えて、AIにお願いして、動かして、直した作品です。ちゃんと動いた瞬間には、きっと「やったー！」という顔が見られるんじゃないかなと思っています。
今回は2回連続の講座として考えています。1回目でAIへのお願いの仕方やp5.jsの基本、ミニゲームの土台づくりを行い、2回目では動きを直したり、見た目を変えたり、点数やスタート画面などを加えたりして、少しずつ自分の作品に育てていきます。
もし早く進む子がいれば、「じゃあ、今度は一回、自分で一から作ってみようか」というところまで挑戦してもらえたらいいなと思っています。
まずは小さく作って、動かして、直して、また試す。この流れを、AIと一緒に体験してもらう講座にしていきたいと思っています。
完成よりも、試して直すプロセスを大切にします
この講座で大切にしたいのは、すごく立派な作品を完成させることだけではありません。
もちろん、作品ができるのは嬉しいです。
でも、それ以上に大切なのは、途中で
「うーん……」
と悩むことだと思っています。
思った通りに動かない。
AIに聞いても、まだちょっと違う。
どこを直せばいいのかわからない。
でも、もう一度聞いてみる。
少し言い方を変えてみる。
数字を変えてみる。
もう一度動かしてみる。
そんなふうに、何度も試していく中で、プログラミングの学びが深くなっていきます。
AIがあると、すぐに答えが出るように見えるかもしれません。
でも本当は、その答えをどう受け止めて、どう使い、どう直していくかが大事です。
AIに丸投げするのではなく、AIと一緒に考える。
その体験を、子どもたちにしてほしいと思っています。
会員さま向けに先行プレ講座を行います
まずは5月に、会員さま向けの先行プレ講座として実施する予定です。
初回は、目の届く少人数で行いたいと考えています。
人数としては、4名くらいまでがよいかなと思っています。
理由は、AIへのお願い文を確認したり、p5.jsで出たエラーを一緒に見たり、子どもたちがどこでつまずくのかを丁寧に見たいからです。
今回のプレ講座で、実際に子どもたちがどんな反応をするのか、どこで「うーん……」となるのか、どこで「パチーン」とひらめくのかを見ながら、本講座に向けて内容をさらに良くしていきたいと思っています。
講座名としては、
バイブコーディングで学ぶAIプログラミング講座
という形で準備しています。
まずは、ChatGPTとp5.jsを使って、ミニゲームづくりに挑戦します。
AIに丸投げするのではなく、自分の作りたいものを言葉にし、AIとやり取りしながら、試して、直して、自分なりの作品にしていく講座です。
子どもたちがAIを使ううえでの安全面や、年齢に応じた関わり方にも配慮しながら、安心して学べる形を考えています。
詳細は、あらためてご案内します。
気になる会員さまは、LINEで
「AIプレ講座」
と送ってください。
コメント