生成AIで社内研修ゲームを作ってみた ── タイピングバスケができるまで ──

🌸 はじめに ── 社内発案型研修って？

弊社には「社内発案型研修」という制度があります。社員が「こんなことを学びたい」「こんなことに挑戦してみたい」と自ら提案し、会社がそれをバックアップしてくれる仕組みです。

今回私が選んだテーマは、「生成AI（Claude Code）を使ってブラウザで動くゲームを作る」でした。最近AIツールが話題になっていたこともあり、「実際に使ってみないとわからない」という気持ちと「何か形になるものを作りたい」という気持ちが重なり、このテーマを提案しました。

先輩からのアドバイスをもとに、ゴールを3ステップで設定しました。

「タイピング練習になるやつが業務に役立ちそうだし、バスケみたいにシュートする感じだと楽しそうじゃない？」という雑談から「タイピングバスケ」というコンセプトが誕生。ゲームの過程をホームページのブログにまとめることも決まりました。

IT用語15単語（バグ・ログ・サーバーなど）。1かな打つごとに1球シュート。ゴール固定。命中率92%以上でクリア。

IT用語15単語（プログラム・アジャイル・デプロイなど）。2かな打つごとに1球シュート。ゴールが左右移動。7ゴール達成でクリア。

長めのIT用語20単語（クラウドコンピューティングなど）。3かな打つごとに1球シュート。ゴールがランダム移動。5ゴール達成でクリア。

日本語入力でOSの変換候補が勝手に出てきてゲームが止まる問題が発生。

【解決策】keydownイベントをキャプチャフェーズで横取りし、自前のローマ字→ひらがな変換テーブルを実装することでIMEを完全バイパス。

ウィンドウの高さによってボールが手前に落ちてしまう問題。

【解決策】「飛行時間ベースの軌道計算」を採用。ゴールまでのフレーム数から重力加速度を逆算して初速を決定する方式に変更。

「ぴゅ」などの複合かなが「ぴ」と「ゅ」に分断されてマッチ失敗していた。

【解決策】splitReading関数を実装。小書き仮名は前の文字とセットで1ユニットとして扱うよう改修。

内部処理のひらがなと表示のカタカナが不一致を起こしていた。

【解決策】内部処理をひらがなで統一し、displayUnit関数でUnicodeコード差（+0x60）を利用してカタカナ表示に変換。

v1：基本タイピングゲーム（ひらがなのみ）
v2：IMEバイパス実装
v3：飛行時間ベースの物理演算を実装
v4：splitReading実装・カタカナ対応
v5：displayUnitでカタカナ表示対応
v6（現在）：ミスしたらボール不発・ノーミスボーナス・ステージリトライ実装

ゲーム公開後、「クリアした記録を残したい」という欲求からSupabase（クラウドDB）との連携を実装。プレイヤーランキング・ステージ別クリア率・命中率統計などを表示するdashboard.htmlも作成・公開しました。

CDNの読み込み方式（ESM vs UMD）の違いで「エラーは出ないのに動かない」という問題も経験。UMDビルドへの明示変更で解決しました。