GPT-4を使って ぷよぷよ 作ってみたときの感想
以下のツイートに反響があったので、どういう感じで作っていったかと感想をメモ
要約
この記事ではAIのChatGPT（GPT-4）を使用して、JavaScriptでぷよぷよを作成する手法について紹介しています。最初の依頼は「JavaScriptで動くぷよぷよのコードを書いて」とされており、最初に生成されたコードは不完全であったとのことです。
その後、AI側からは、1.ぷよの衝突検出、2.プレイヤーの入力によるぷよの操作、3.ぷよの回転の順に実装するように指示があり、徐々に改善を施していきました。
短時間で開発を終えることができるため、エンジニアとしてのスキルや要求、不具合の言語化能力があれば有効だとされています。現時点では優秀なプログラミングのアシスタントとして機能しています。
エンジニアが直面するストレスや不安を軽減できる可能性があります。一例として、短期間で開発を終えることができるため、長期間の開発に伴うモチベーションの低下を防ぐことができます。
いくつかの課題も存在します。AIが生成するコードには、エンジニアのスキルが必要な部分が含まれている場合があるため、エンジニアリングのスキルがない人が利用する場合は、コードの改良や不具合の解決が困難になることがあります。
※上記要約は Notion AI の要約をベースに、筆者が軽く添削しました
やったこと
- ChatGPT（GPT-4）で ぷよぷよを作った
- HTML, CSS, JavaScript を使った
- 作成環境は codepen を使った
最初の依頼
最初の依頼は「JavaScriptで動くぷよぷよのコードを書いて」のみ
- 枠と上から下に落ちていくだけのコードが生成された
- ブロックは枠を超えて下に突き抜けて消えてしまう
ただ、このコードが不完全であることも説明されていた。
AI曰く「次のコードを追加することで改善できます」とのこと
1. ぷよの衝突検出
2. プレイヤーの入力によるぷよの操作
3. ぷよの回転
この時点で、最下部で止まるという処理も “衝突検出” に含まれることを私は理解した
実際の対話 （一部分）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ぷよぷよ</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
margin: 0;
}
canvas {
border: 1px solid #fff;
}
</style>
</head>
<body>
<canvas id="puyopuyo" width="320" height="640"></canvas>
<script src="puyopuyo.js"></script>
</body>
</html>
次に、puyopuyo.jsファイルを作成し、以下のコードを追加してください。
const canvas = document.getElementById('puyopuyo');
const ctx = canvas.getContext('2d');
const blockSize = 32;
const columns = 10;
const rows = 20;
const colors = [
null,
'red',
'blue',
'yellow',
'green',
'purple',
'cyan'
];
class Puyo {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
}
draw() {
ctx.fillStyle = colors[this.color];
ctx.fillRect(this.x * blockSize, this.y * blockSize, blockSize, blockSize);
}
}
class PuyoPair {
constructor() {
this.puyos = [
new Puyo(4, 0, Math.floor(Math.random() * (colors.length - 1)) + 1),
new Puyo(5, 0, Math.floor(Math.random() * (colors.length - 1)) + 1)
];
this.direction = 0;
}
draw() {
this.puyos.forEach(puyo => puyo.draw());
}
}
let pair = new PuyoPair();
let dropCounter = 0;
let dropInterval = 1000;
function update(time = 0) {
dropCounter += time;
if (dropCounter > dropInterval) {
pair.puyos[0].y++;
pair.puyos[1].y++;
dropCounter = 0;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
pair.draw();
requestAnimationFrame(update);
}
update();
...といった感じ
その後の流れ
- 前述した画像を見る通り、AIが最初にCoT（chain-of-thought）的に命令しろと示唆してきたので、順番に命令していった
- 1、2、3の実装を順番に命令し、生成されたコードをコピペして挙動を確認、想定してない挙動をしたら言語化し、AIにフィードバックした
- 連鎖判定や、浮いているぷよぷよを落下する処理などは1回では完璧なコードにならず、数回の返答を要した
- 完全にGPT-4が生成したわけではなく、98%コピペ、2%の修正
- 最終的に20〜30対話で完成、所要時間は1時間程度
２%の修正はどこで行ったか？
- 回答を続けるうちに変数が置き換わり、VARIABLE is not defined のエラーが出てしまう -> 人間が手で書き換え
- columns という変数名が、cols に置き換わって生成される
- rows という変数名が、 boardHeight になって生成される
- ぷよぷよの色が6色だったので、4色に変更 -> 一部コードを削除
- コード見ればすぐ分かったのでAIには聞かなかった
- 色の配列から削っただけ
- 連鎖判定の順番がおかしく、その部分だけロジックを直した -> ロジックのコピペ
- すでにあるロジックを別のタイミングで呼ぶようにコピペした
- もうちょっとAIに頼ってみてもよかったかもしれない。
修正といってもコードを削ったり、コピペしたりで済むレベルだった。コードを読むところで一定頭は使った。もっとAIに任せちゃってもいいが、（不具合が理解できれば）人間が直したほうが速いケースもある。
感想
立ち上がりが楽
- 「やる気は最初からあるものではなく、作業に着手すると自然と湧いてくるもの」らしい
- 立ち上がりが楽だと、やる気が出るまでがはやくなる
やる気がなくなる前に完成する
- 例えば個人開発で週末作業して1ヶ月かかると、徐々にやる気がなくなってくる（少なくとも自分は）
- やる気がゼロになる前に、ある程度のものが完成する
- 短時間でできることが分かっているので、作業に着手しやすくなる
要求や不具合を適切に伝える言語化能力が必要
- なんか思ったような挙動にならないが、AIにどう伝えたらいいかわからない状況が発生する
- 経験から「なんかこの関数が怪しい」と伝えてあげると直してくれたり
現時点では優秀なプログラミングのアシスタント
- 完璧なコードが生成されるわけではないので手直しは必要
- そのときに既存のエンジニアリングのスキルが必要になる
- 前述した要求や挙動を適切に言語化できる人はうまく波に乗れる
廃業する！と嘆いている時間があれば触ってみるといい
- 1時間でぷよぷよぐらいなら作れる
- 直近の不安は解消されるだろう
- ただし1年後にどうなってるかは正直分からない…
まだしばらく仕事はあるなあ、、と思いつつも結構な衝撃だった。もともと問題解決できるなら手段はなんでもいい派の人間なので、軸足を移していくのは問題ないが、どうなるかなあ。
不安はありつつも色々触ってみるのは楽しいですね！
Discussion