WebアプリをClaudeCodeで作成しました！③

全5回 ― 第3回

課題：プリセットが固定で自由度がなかった

もともと管理画面の卓設定は「四麻」「三麻」の2種類しかなく、ハードコードされていました。麻雀には様々なルール（東風戦・チューリップ・三人打ちなど）があるため、自由に追加できる仕組みが必要でした。

実装した機能

• プリセットをFirebaseに保存
• 管理画面から追加・削除できる専用シート
• 名前とカラーを自由に設定

Firebaseのデータ構造に追加

mahjong_status/
  tablePresets: [
    { label: '四麻', color: '#059669' },
    { label: '三麻', color: '#7c3aed' },
    { label: '東風戦', color: '#2563eb' },  // 追加例
  ]

新しいフィールドを追加するときのポイントはnormalize関数の更新を忘れないこと。Firebaseからデータを読み込む際に整形する関数があり、ここに新しいフィールドを追加しないと消えてしまいます（後述の失敗談参照）。

UIの変更

卓設定のボトムシートに「⚙️ 編集」ボタンを追加。タップするとプリセット管理シートが開き、一覧表示・追加・削除ができます。

プリセットはFirebaseに保存されるため、複数の端末から同じプリセットが使えます。

AIとのやり取りで気づいたこと

この機能を実装する際、最初に「プリセットを自由に追加・削除できるようにしたい」と伝えただけで、データ構造の設計からUI実装まで一気に提案してくれました。「どこに保存するか」「どんな画面にするか」を一から考えなくて済むのが、AI開発の大きなメリットです。

一方で、normalize関数の更新漏れのような「細かい落とし穴」は、AIが実装した後に実際に動かして初めて気づくことも多いです。実装→確認→修正のサイクルを丁寧に回すことが、品質を保つコツです。