こんにちは、コーダー道場神山の本橋です。
5月26日に開催した道場では、ChatGPTを使ってみんなでプログラミングしてみました。

何作ろうか？という相談から始めて、落ち葉とブロックを作ったところ、じゃあテトリス作ろう！との流れです。

作成したプログラムは、落ち葉、合体ブロック、テトリスの３つ。それぞれ紹介していきたいと思います。
それぞれリンク先はp5.js Web Editorです。ぜひリンク先を開いて動かしてみてください。

作品の展示

落ち葉 (p5js.org)

ブロックが合体していく (p5js.org)

テトリス (p5js.org)

プロンプトの展示

プログラムだけ見ても「ふーん」ですよね。実際にどんな会話を繰り返してプログラミングしていったのか、チャットの履歴も公開しておきます。

落ち葉アニメーションを作るプロンプト

と会話を開始しました。すると最初に描かれたプログラムは落ち葉が直線的に落ちていくだけでしたので、

とお願いをしたところ、sin()関数が加わり動きがダイナミックになっていきます。そのあとは動きを細かく調整することで、立派な落ち葉アニメーションとなっていきました。

ブロックが合体していくアニメーションのプロンプトとデバッグの様子

この段階では、この画像のように右下に謎の巨大ブロックが発生してしましいました。

あとで分かったことですが、この巨大ブロックはどうやら合体したブロックが成長していく様子を表したものだったようです。成長速度がとても早かったため、一瞬で巨大ブロックが描画されたようになってしまっていました。

コードの中身を見ると、ブロックの成長速度がとても早いようです。

こんなお願いをしたところ、いい具合に成長していくアニメーションとなりました。ブロックが一色で見栄えがしないため、色を付けるように依頼します。

こんなお願いをしたところ、周囲から集まってくるブロックはとてもカラフルになりましたが、あまりに極端に色が変わるため画面がチカチカしてしまうようになります。

このプロンプトは大成功！ 気持ちよくグラデーションしながら色が変わっていくようになりました。

あとはずっと動いていてほしいのでブロックが画面サイズを超えたときにリセットして最初からやり直すように依頼をして、完成です。

テトリスのプロンプト

テトリスを作るのはけっこう大変でした。あれこれプロンプトを試してみて、一度リセットをしてやり直すことにします。

カーソルキーの移動や、ハードドロップの操作を一つずつプロンプトで追加しようとしたところ不具合が多いプログラムとなってしまったので、最初からこんな機能を持ったプログラムを書いてください、とお願いしたところうまくいきました。

具体的に指示をしていきます。このハードドロップの問題は最後まで解消させることができませんでした。

もはやこうなってくると直接コードを書き換えたほうが早いのですが、ニンジャたちの手前、なんとかChatGPTに頑張って書き直してもらおうとしました。

ここまでやったところ、ブロックの操作と落下、積み上がりまでを大体1時間くらいでプログラミングすることに成功しました。不完全とはいえ、1時間でここまで大枠を作れたのはかなり高速なプログラミング体験と言えるでしょう。

AI時代（対AI）のコミュニケーション術？

90分の道場開催中にプロンプトだけでここまで動くものが作れました。時間的に学校の授業でやってみても面白そうですね。

AIとの会話では、「具体的に誤解の無いように作りたい物を伝える」ことがコツです。このコツは人間相手に指示をする場合も同様です。AI相手なら即座にフィードバックが返ってくるうえに、何百回繰り返しても疲れることなく付き合ってくれます。SNSやAIを対象としたコミュニケーション時代の作文技術としてトレーニングしてみるのも楽しいかと思います。