🧠 概要：
この記事では、非エンジニアがChatGPTを使用して「3色オセロ」を作成した体験について詳しく述べられています。著者はJavaScriptのコーディングをほとんど知らない初心者ですが、ChatGPTの力を借りてゲームを作ることができました。
概要
- 非エンジニアがAIを活用して3色オセロを作成した体験。
- ゲーム制作にはJavaScriptを使用し、ルールの策定や仕様確認をChatGPTに依頼。
- AIの進化に驚く反面、依然としてコーディング知識の重要性を感じた。
要約の箇条書き
- 背景: 著者はPython初心者で、ほぼコーディングの知識がない状態。
- 制作するゲーム: 通常のオセロではなく、白・黒・赤の3色を使った「3色オセロ」を提案。
- ルール設定:
- 3色（白・黒・赤）で、置く順番も指定。
- 8×8の盤面を使用。
- 特殊な初期配置と追加配置ルールを導入。
- プロセス:
- ルールをGPTに説明させ、認識の確認を実施。
- コーディングをChatGPTに依頼し、指示を出す。
- 実際にコードを動かし、微調整を行う。
- 感想:
- AIを使って簡単にコードが作れることに驚き。
- 複雑なコードになると依然として人間の知識が必要。
- 自分のアイデアを形にできる楽しさと、学習のモチベーション向上を実感。
4.1のCanvasを使って、Canvas上に擬似的にゲームを作成（JavaScriptのコードをプレビューして触れる）できるらしいのでやってみました。ちょっと前にXでGeminiでアニメーションが作れる！というのが話題になってましたが同じような感じのことがGPTでもできます。
ちなみに僕はPython学習3日目の超初学者なので、ほぼコーディングの知識がない状態といえます。
つくるもの
王道といえばやっぱりオセロ。ということでオセロを作っていきます。
普通のオセロを作っても面白くないので、3色オセロを作ってみます。
3色オセロルール
-
白黒赤の3色（置く順番もこの通り）
-
3色なので通常のオセロよりも広い盤面（8*8）
-
初期配置は各色が1つずつ角に配置、そこに隣接するマスに他の2色が配置
-
（特別ルール）置く順と逆の順番に、各色の初期配置に斜めに隣接する3マスのいずれかから、好きなところに色を置ける（追加配置）
-
追加配置が完了したらゲームスタート！
進め方
ルールの確認
お互いに作るものが明確である必要があるので、ルールの認識に齟齬がないかを確認ということで、まずはGPTにオセロのルールを説明してもらいます。以下、実際のプロンプトを提示します。
オセロのルールを説明してください。
プロンプト1
特別ルールの説明
ルールの認識に齟齬がないことを確認したら、追加ルールの説明をして既存のルールに追加する形でルールを明確化します。
これからオセロを一緒に作っていきます。 普通のオセロを作っても面白くないので、3色オセロを作ってみます。 説明してくれたルールに以下のルールを追加してください。 ＜3色オセロルール＞・白黒赤の3色（置く順番もこの通り）・3色なので通常のオセロよりも広い盤面（8*8）を使用・初期配置は各色が1つずつ角に配置、そこに隣接するマスに他の2色が配置 ・（特別ルール）置く順と逆の順番に、各色の初期配置に斜めに隣接する3マスのいずれかから、好きなところに色を置ける（追加配置）
・追加配置が完了したらゲームスタート！
プロンプト2
実際に作ってもらう
CanvasをONにしてコーディング依頼をすると、ばーっとコードを書き始めます。
Canvas その感じで作ってみてください。
プロンプト3
もっと細かく技術指定やデザインの要望なんかを入れてもいいんですがまずはバッと作ってもらうために雑な指示にしてます。
微調整
実際に触りながらデザインの微調整や機能の追加、仕様の認識ずれやエラーがある場合には指摘します。
仕様を確認
細かい認識ずれがないかの確認を行います。
最後にこのオセロの仕様（ルールや操作方法）について説明してください。
プロンプト4
実際に仕様の説明はこんな感じでしてくれました。
3色オセロ 仕様まとめ
1. 基本ルール盤面：8×8のマス
コマ：白・黒・赤の3色。順番は「白→黒→赤」のローテーション
目的：最終的に自分の色のコマを一番多く盤面に残せば勝ち2. 初期配置左上の角に白、右上に黒、左下に赤、それぞれ1つずつ置く各角の**隣接マス（縦・横）**には、残り2色を1つずつ配置右下の角（8,8）は空白でスタート3. 特別ルール「追加配置」ゲーム開始前に、コマを置く順番と**逆（赤→黒→白）**で、各色の初期配置に斜めに隣接する3マスのいずれかに、1つ自分のコマを追加で置く（これが終わったら通常ゲームスタート！）4. 通常の進行「白→黒→赤」の順番で1手ずつ進行・自分の色のコマを1つ盤面に置く・置いたとき、自分のコマと既存の自分のコマに挟まれた他の色のコマをすべて自分の色にひっくり返す
・挟む方向は縦・横・斜めどこでもOK・白・黒・赤、どの色を挟んでも全部自分色にする・ひっくり返せるマスがなければ「パス」・盤面がすべて埋まるか、全員連続パスになったら終了5. 勝敗最終的に盤上に一番多く自分の色が残った人が勝ち！操作方法（このサンプル実装の場合）
・初期盤面の表示は自動で行われます
・追加配置はサンプルコードでは自動ですが、本来はプレイヤーが選択可能
コマを置く手番・操作方法・コマを置く位置（行・列）を指定することで、該当箇所に自分の色のコマを置く・ひっくり返し判定や合法手判定はプログラムで自動化予定・表示はターミナルやコマンドラインで盤面を文字で表示
ChatGPT
ここで作ったサンプルコードは共有もできるので、ぜひ触ってみてください。
感想
会話だけで実際に動くものが作れてしまうというのに驚きでした。知識がなくてもああしたいこうしたいだけで簡単なものであれば誰でも作れます。もちろんより複雑だったり量が多いコードになるとまだまだ難しい部分はありそうですが、最近のAIの進歩を見ているとそのギャップもどんどん埋まっていくのかなと。
とはいえ、修正や変更の依頼など自然言語での表現では齟齬が生まれやすいので、やはりコーディングの知識を持った上で、AIに書かせるというのが結局速さでも正確さでも勝るのかもなとぼんやり感じました。Vibe Codingが頭打ちになるっていうのはこういうことなんだなとしみじみ。
オセロの前に『ito』をやるためのアプリとかも作ってみましたが、普通に手元では動かせるので、暇つぶしとか友人同士の遊びくらいならWeb上に公開しなくても使えちゃいそうですね。
自分のアイデアが形になる面白さとまだまだ人間の可能性も感じられて勉強のモチベーションが上がりました！
Views: 0
