Tensinの話 (2) AIと一緒に復刻する
Tensinは面白いパズルなのですが、動く環境が旧MacOSとWindows(32bit)しかありません。Win版は動くといっても古くさいUIです。
近年いろいろソフトウエア開発手法も環境もツールもとんでもなく発展してその都度書き直したいと思ったのですが、結構ロジックは複雑だし、すでに作り終えたものをもう一度最初からというのはモチベーションがもたないのです。何度か試みたのですがなかなか完成形まではいかない。
ソフトの開発方法論の一つに「まず小さくプロトタイプを作ろう」という話がありますが、すでに動いている旧MacとWinの完成形のソフトがあります。
その上で作ろうとなると「以前作ったTensinより高機能に」とか「今風のゲームのようにリッチに」とか思ってしまうので自分でゴールポストが動いてしまいます。そうなるとなかなかモチベーションが持たない。
去年の手術の後にAIと相談する
去年の5月頃うかつにも骨折して手術と入院をしていろいろ大変だったのですが、無事手術も終わって症状も安定するとベッドで寝ている状態を持て余すわけです。
といっても手元にあるのはスマホくらい。
で
ChatGPTに相談してTensinを今風にバイブコーディングで書き直させよう
と思いついたのです。
バイブコーディングといっても去年だとまだ走りですが、それでもきちんと指示すればAIがコーディングを全部やってくれると話題になり出した頃です。
まずスマホのChatGPTアプリにTensinのルールを書き始めました。
次のルールの麻雀牌を使ったパズルゲームを実行するためのプログラムをつくります。
プログラム言語はVueとtypescript を使います。
全麻雀牌を横17,縦8に並べます。
各牌を1つづつあるルールで動かし同じ面の牌が隣り合ったら盤面から除去できます。
…
と18行くらい書いて、送信しました。
```
<template>
<div class="board">
<div v-for="tile in tiles" :key="tile.id"
…
```
Vue 3 と TypeScript でのシングルファイルコンポーネントとして、盤面の初期化、タイル配置、初期隣接除去、ドラッグ（移動）／ドロップ、隣接判定と除去、勝敗判定までの大まかな骨組みを組みました。
…
おお、らしいものが出てきた。すごいな。
退院してしばらくしてからこの出力は本当に動くのか試して見ました。
それっぽい麻雀牌盤面とクリックして牌が動きましたが、Tensinのルール通りには動きません。。
「まぁ今のバイブコーディングはこんなものかな」と思って、とりあえず放って置いたのです。
今回の入院のときに問題を再検討する
骨折は十分に治り、先日埋め込んでいたパネルを外す手術をすることになりました。全身麻酔は必要という話なのですが、前回よりは短い数日の入院です。
短い入院なので、今回も持ち込みはスマホだけです。そこで前回のTensinバイブコーディングを再トライしてみることにしました。
前回、何が問題だったのか。
そもそもルールの細かいところまで記述できていないのではないか。自分としてはこれだけ書いてあれば大体分かるだろう という気になるのですが想定した通りには動かなかった。じゃどこの記述が足りなかったのか。
最近のAIバイブコーディングは丸投げしても仕上げてきたというくらいに賢いし、コンテキスト長も長くなって長い仕様も受け付けられるらしい。でもどのくらいまで書いても大丈夫なのか自分では検証していない。
であればAI本人に「どこがわからないの?」と聞くのがよいのではないか。
前回依頼した18行の文に加えて「どこがわからないの?」と書いてみます。
実装をつづける前に生成AIにソース生成を指示する目的でルールの文章を整理します。以下の指示を解釈し実装時にルールの不明確点を抽出してください。「次のルールの麻雀牌を使ったパズルゲームを実行するためのプログラムをつくります。…
ChatGPT5.5 mid
以下の指示は、ゲームの大枠はかなり伝わりますが、実装に落とすには未確定の部分が多いです。特に「移動可能な経路」「ブロック移動」「除去タイミング」「失敗判定」を明確にする必要があります。
実装時に不明確になる点
1. 「全麻雀牌」の枚数と構成
「全麻雀牌を横17, 縦8に並べます」とあるため、盤面は 136マス です。
通常の日本麻雀牌は、…
(大項目で12項目を長文で書いてくる)
特に明確化すべき重要項目
最低限、生成AIに実装させる前に決めるべきなのは以下です。
項目決めるべき内容
牌の構成 通常麻雀牌136枚でよいか
…
大項目で12項目、個々にかなり詳細に不明点が羅列される。。
わー、これだけわからなければ想定通りに動く訳ないな。。。
でも、なんとなくこの返答をみていて思い出しました。
営業SE: 先日の案件を弊社の開発部で検討してところ以下の質問が出てきました。回答をよろしくお願いいたします。
「これは委託先からの質問票だな」
自分はだいたいこういう質問を書いてきた側です。顧客のビジネス現場側が当たり前のように書いてることは、開発側には見えてないものです。
このときにプログラマが納得いくまで詰めないと納品物が乖離する。
「これはAIが納得するまで細かく返答をしないといけない」
気合い入れて全部に返答することにしました。スマホ画面相手にポチポチです。
以下に少しづつ指摘箇所の記述をします。少しづつ書きますのでルールの清書はまだしないでください。返答内容に不足点等があれば指摘してください。
「使用する牌は通常の麻雀牌136枚とする。赤ドラ・花牌・季節牌は使用しない。」と「一萬同士、東同士、白同士 を同一とみなす」という解釈でよいです。
了解です。ここは次のように確定事項として扱えます。
…
不足点としては、牌の表記名を実装用に決めておくとよいです。
…
返答について疑問があるとAI側も追加で質問してくる。
これ面白いぞ!!
…
案Bとしてください。理由としては「対で取るのが基本ルールであるため、T字型以外はうまく選択すればすべて取れるのに対して、T字型は対で取る場合必ず取れない2牌が残る」ためです。
…
了解です。案Bで確定として扱います。理由も仕様文に入れる価値があります。
整理すると、4枚連結の扱いはこうなります。
…
…
「失敗時に自動で再シャッフルするのか、失敗画面を表示して終了するのか
開発・プレイ都合上、成功するまで再生成してよいのか」→現状、失敗を表示して終了にします。ただ将来、成功するまで再生成にするかもしれません。
…
…
了解です。単独牌の移動については、解釈Bで確定として扱います。
現時点の理解は次の通りです。
…
不足点として、次はまだ決める必要があります。
1. 単独牌の移動距離
…
…
「5. 「移動方向の変更は最大1回」の意味」は解釈通りで正しいです。「元の位置に戻るような移動は許可するのか」は可能です。
長くなったので一旦ここまでのルールを整理してください。その上で不明点を再指摘してください。
了解です。ここまでの確定ルールを、まだ最終清書ではなく、作業用整理としてまとめます。
ここまでの確定ルール
1. 使用する牌
使用する牌は通常の麻雀牌136枚とする。
…
現時点で残っている不明点
1. 移動後の除去判定対象
まだ一番重要な未確定点です。
…
まだ大項目で10項目以上疑問点がある。。
でもこれ面白い!! 下手なゲームより全然面白い!
濃い会議でもやってるような。
チーム会議でもこのくらい濃い会議は珍しいし、顧客間だと遠慮して2回くらいのピンポンで終わる。
もう手術も終わって病室にいるのだから時間はあります。体を休めながらも、文字で書いた盤面も例示してみっちり返答します。
数日かけて返答し、
了解です。一旦ここで「生成AIにこのゲームのルール処理と基本的なUI操作を実装するための指示プロンプト」を生成してください。
以下は、生成AIにそのまま渡すことを想定した実装指示プロンプトです。
Vue 3 + TypeScript で、麻雀牌を使ったパズルゲームを実装してください。
目的
麻雀牌136枚を横17列、縦8行の盤面に配置し、牌を移動させながら同じ牌を対で除去していくパズルゲームを作ります。
…(約550行)
必要なら次に、このプロンプトをさらに「最初にAIへ渡す短縮版」と「実装仕様詳細版」に分けられます。
約550行の指示プロンプトが出ました。
すごいね。。
でも「短縮版」と「実装仕様詳細版」って何だろう。こちらも依頼します。
以下に、生成AIへ渡しやすい 短縮版 と 詳細版 を分けて作成します。短縮版は最初の実装依頼向け、詳細版はルール誤解を避けたい場合の完全仕様向けです。
短縮版プロンプト
Vue 3 + TypeScript で、麻雀牌を使ったパズルゲームを実装してください。
概要
…(約110行)
詳細版プロンプト
Vue 3 + TypeScript で、麻雀牌を使ったパズルゲームを実装してください。
…(約610行)
人でも分厚い厳密な仕様書を渡してそれで理解は、ほぼ無理です。概要書を作成してまずそこを理解してもらう必要があります。
AIもそういうものなのだろうか?
理解は出来るので、受領しました。
Claude Code (Fable 5)とCodex (ChatGPT 5.5)に実装させてみる
Fable5
退院してから、スマホ上で生成したプロンプトで実装指示してみることにしました。
丁度Claude Fable 5も再び使えるようになったらしいので、Claude Code+Fable 5でやってみます。Fable 5を使うのは初です。
このときはClaude Code Cliを直に叩いていたのできちんとしたsessionログを取り忘れたのです。今考えると結構面白いログだったのに。
Claude.mdに短縮版プロンプトを追記して、麻雀牌のアプリのビルド指示をしました。
約15分間Fable 5は沈黙しました。Fable 5を使うのは初めてで、これがFable5の特性なのか、Claude側が混み合っているかはわからなかったです。
15分後いきなりClaude Codeはソースを書き始めました。
ログが残っていないので正確な文は言えないのですが、ビルドの最後に「同じ行き先指示の場合に複数経路を確認するルールは冗長で不要です」みたいなことを出力しました。
短縮版プロンプトだったのに一発で完全なルールで動作しました。
ほんと凄いな。。
ChatGPT 5.5
Codex (ChatGPT 5.5)でもビルドさせてみることにしました。
元々の生成プロンプトはスマホのChatGPT 5.5で作ったものなので、解釈は安定していると予想しました。
こちらではFable5 のような変な待ちはなく、同じ短縮プロンプトで約5分ほどでビルドしました。
こちらもルール動作は完璧でした。
こちらもすごい。。
生成AIの進化もさることながら「仕様を詰めて理解齟齬がないようにする」のは人でもAIでも同じってことでした。
画面的にはCodexのほうがややリッチで多機能に出来ています。
ではFable 5の15分とはなんだったのか。
同じ行き先指示の場合に複数経路を確認するルールは冗長で不要です
Fable 5は、もしかしてルールを完全に掌握したのか?
(続く)
