12日目。Wordleはみんなプレイしたことがあるはず。AIがどこまで本物に近づけるか見てみよう。
プロンプト#
「適切な単語リスト、タイルアニメーション、キーボード、統計トラッキング、シェア機能を備えたWordleクローンを作って。」
どうやって作ったか#
今回は7つのWatchfireタスクを経た。その進行を見ていると面白くて、無限の忍耐力があったら実際にポリッシュされたゲームをどう作るかというプロセスそのものだった。
- ゲームエンジンと単語リスト。 基盤部分：約2,300語の解答リスト、約10,000語の有効推測リスト、そしてコアの推測評価ロジック。緑、黄、灰色。基本中の基本。
- 洗練されたUIとタイルアニメーション、キーボード。 結果表示時のタイルフリップ、入力時のポップ、無効な単語でのシェイク。プレイに合わせて文字の色が更新されるオンスクリーンキーボード。
- 統計とシェア機能。 勝率、推測分布の棒グラフ、現在の連勝数と最大連勝数のトラッキング。シェアボタンで絵文字グリッドをクリップボードにコピー。本物のWordleと同じ。
- ヘルプモーダル、ダーク/ライトテーマ、ハードモード。 ビジュアル例付きの遊び方オーバーレイ。スムーズなトランジション付きのテーマ切り替え。判明したヒントを以降の推測で使うことを強制するハードモード。
- 色覚サポートモード、アクセシビリティ、React refsバグ修正。 色覚に配慮したハイコントラストカラー。このタスクではタイルアニメーションに問題を起こしていたReact refsのバグもキャッチして修正した。
- Web Audio APIによる効果音。 キー入力、タイル表示、勝利、エラー時の音声フィードバック。すべてWeb Audio APIで生成されるので、読み込むオーディオファイルはゼロ。
- 勝利時の紙吹雪演出。 パズルを解くと発動するキャンバスベースのパーティクルシステム。だって、それだけのことをやり遂げたんだから。
ゲームロジック全体が1つのカスタムReactフック（useWordle.ts）に収まっていて、UIはNext.jsページとして構成。きれいな分離。
できたもの#
Wordleそのものの感触。 それがハードルだったけど、クリアしている。結果表示時のタイルフリップアニメーション、文字を打った時のわずかなポップ、無効な単語を入力した時のシェイク。これらのマイクロインタラクションこそが本物のWordleをプレイして気持ちいいと感じる理由で、全部ここにある。
ダークテーマとライトテーマ。 どちらもきれい。ダークモードがデフォルト（当然そうあるべき）だけど、ライトモードもちゃんと機能する。ヘッダーにトグルがあって、トランジションもスムーズ。
永続する統計データ。 プレイ回数、勝率、現在の連勝数、最大連勝数、推測分布チャート。すべてlocalStorageに保存されるので、セッションをまたいでも統計が残る。シェアボタンで結果を絵文字グリッドにフォーマットして、どこにでも貼り付けられる。
意味のある設定。 ハードモードは本当の制約であって、ただのラベルじゃない。3番目の位置にAがあると判明したら、以降のすべての推測で3番目にAを入れなければならない。ゲームがそれを強制して、なぜ推測が却下されたかも教えてくれる。色覚サポートモードは緑と黄色をオレンジと青に変更する。小さなことだけど、これでもっと多くの人がゲームをプレイできるようになる。
音声ファイルなしの効果音。 Web Audio APIのアプローチは賢い。mp3の読み込みなし、オーディオスプライトなし、プリロードなし。音はその場で合成される。キー入力のソフトなクリック音、タイル表示時の心地よいトーンシーケンス、勝利時のちょっとしたファンファーレ。ダウンロード容量を一切増やさずに、体験を大きく向上させている。
しっくりくる紙吹雪。 ゲームに勝つと画面中央からキャンバスパーティクルが弾ける。小さな演出だけど、静かな「やった」という瞬間をお祝いに変えてくれる。
バグレポート#
タスク5のReact refsの問題が唯一の本当のバグだった。再レンダリング時のReactのref処理の仕方が原因で、タイルフリップアニメーションが一貫してトリガーされなかった。Watchfireがアクセシビリティパス中にそれをキャッチして、同じタスク内で修正した。別途バグレポートを出す必要はなかった。
それ以外は、最初からゲームは正しく動作した。有効な単語は受け入れられ、無効な単語はシェイクで拒否され、キーボードの色は正しく更新され、ハードモードはルールを適切に強制した。
数字で見る#
- 約2,300の解答単語と約10,000の有効な推測
- 7つのWatchfireタスク（素のゲームエンジンから紙吹雪まで）
- 1つのカスタムフック（
useWordle.ts）にすべてのゲームロジックを集約 - Web Audio APIでダウンロード不要の効果音
- キャンバスパーティクルシステムで勝利演出
- localStorageで統計とゲーム状態の永続化
プレイしてみよう#
5文字の単語を入力してEnterを押そう。緑は正しい文字で正しい位置。黄色は正しい文字だけど位置が違う。灰色はその文字が単語に含まれていない。6回のチャンスで当てよう。
Day 12の評価#
Wordleは、作ろうとするまではシンプルに見えるゲームの1つだ。コアロジックは分かりやすいけど、ポリッシュこそが肝心。アニメーション、キーボードのフィードバック、統計、シェア機能、ハードモードの強制。どれか1つでも取り除くと、Wordleらしさが失われる。
ここで感心したのは進行の仕方だ。タスク1では機能的だけど見た目の悪い単語当てゲームができた。タスク7までに本物のWordleが持つすべてに加えて、効果音と紙吹雪まで付いた。各タスクが特定のカテゴリのポリッシュを重ねていき、どれも前のものを壊さなかった。Reactのアニメーションと状態管理でそれをやるのは簡単じゃない。
効果音でWeb Audio APIを選んだのは嬉しい驚きだった。オーディオファイルに手を伸ばすと思っていた。代わりにプログラムで音を生成する方式で、追加アセットはゼロ、再生は即座。賢いトレードオフだ。
パターンは維持されている。毎日ポリッシュが加わり、まだ何も崩れていない。
これは30 Days of Vibe Codingの12日目です。AIアシストコーディングで30日間に30プロジェクトを出荷する挑戦をフォローしてください。
