Claude Codeに「仮面ライダーのクイズが作りたい」と言ってから、気づけば3作品・ミニゲーム付きのアプリになっていた話
Claude Codeに「ちょっとクイズアプリを作りたい」と伝えるだけで、気付けば3作品・ミニゲーム付きの本格アプリに化けました。
きっかけは単純でした。放送中の特撮番組『仮面ライダーゼッツ』のクイズアプリで遊びたいと子供から言われ、Claude Codeに相談しながら作り始めただけです。ところが「ついでにあの番組も」「どうせなら1つにまとめられない?」「クイズだけじゃ物足りない」と要望を重ねているうちに、気づけば3作品ぶんのクイズと豆知識、ミニゲームまで載ったアプリになっていました。
「まったく同じ会話」をもう一度したくなくて、作り直した
最初に手をつけたのは『仮面ライダーゼッツ』のクイズ&豆知識アプリです。公式サイトやWikipediaで裏取りした情報をもとに、登場人物や変身システム、敵怪人にまつわる問題を作り、ひと通り遊べるようになりました。
翌日、「ギャバン インフィニティ版も作りたい」と声をかけました。同じ要領で登場人物・変身システム・敵・制作トリビアを調べ、同じ機能(難易度別クイズ、ふりがな付ききっずモード、間違えた問題の復習機能)を積んだアプリをもう1本作りました。
ここで「ゼッツとギャバン、この2つのアプリを統合できないか」という話になりました。素直にやるなら、片方のコードをコピーして中身を書き換えるだけです。ただそれでは、3作品目が欲しくなったときにまた同じ作業を繰り返すことになります。そこで、作品ごとの違い(問題データ、色、バナー画像、カテゴリ名)を1つの設定オブジェクトにまとめ、画面側のコンポーネントは「どの作品か」を意識しなくても動くように書き直しました。作品選択画面で選んだタイトルに応じて、テーマカラーもバナーも問題も丸ごと切り替わる仕組みです。
この作り直しが効いたのは、3作品目を追加したときでした。今回選んだのは、東京都江戸川区の商店街連合会がプロデュースする、ご当地ヒーロー「商売繁盛エドレンジャー」です。全国放送のテレビ番組とは情報量がまったく違い、複数の情報源を突き合わせないと正確な設定が拾えませんでした(実際、ある情報源では敵キャラクターの名前が別の表記になっていて、裏取りに手間取りました)。それでも、新しい問題データとバナー画像を用意するだけで、既存の画面がそのまま動きました。設計を1つ手前で整理しておいたおかげです。
きっずモードを作っていたのですが、同じ設計がそのまま活きています。難しい漢字にはすべてふりがなを振り、俳優名や放送日といった大人向けの細かい情報は出題から外しました。
クイズだけじゃ物足りなくなって、ミニゲームまで
3作品がそろったところで、「クイズだけではなく、ミニゲームも追加できないか」というリクエストをもらいました。作った(というより一緒に作ってもらった)のは次の3本です。
神経衰弱: 各作品の出題データから自動でアイコンを抽出し、カードマッチとして遊べるようにしたもの
反射神経タップ: お題のアイコンを制限時間内にタップするゲーム。ラウンドを重ねるごとに制限時間が短くなっていきます
ならべかえパズル: 各作品のヒーローバナーを9分割し、タップで入れ替えて絵を完成させるパズル
ここでも、先に作品ごとの設定を1つにまとめておいた効果が出ました。神経衰弱と反射神経タップは、それぞれの作品の出題データからアイコンを自動で拾ってくるだけで成立します。ならべかえパズルは、ホーム画面のバナー画像を「絵の中身」と「表示する枠」に分離しておき、パズルの側では同じ絵を9分割してクロップして見せる形にしました。新しい画像を1枚も描き足さずに、3作品ぶんのパズルが動いています。
複雑になったら、一度まっさらから作り直すのもアリだと思う
今回、最初から複数作品・ミニゲーム対応の設計を見通していたわけではありません。まずゼッツ版を素直に作り、そこに機能を一つずつ足していく形で進めました。ギャバン版を追加し、2つを統合し、さらにエドレンジャーとミニゲームを重ねていくうちに、当然ながら中身はどんどん複雑になっていきました。
その過程で強く感じたのは、機能を継ぎ足しながら複雑になったタイミングで、一度「今ある機能をすべて含めた前提」でゼロから作り直すと、驚くほど作りがシンプルになるということです。実際、ゼッツとギャバンの2作品がそろった段階では、既存コードを直接いじり続けるのではなく、両方の要件を踏まえた上で設計をまとめ直しました。行き当たりばったりに継ぎ足した構造ではなく、最初から「複数作品を切り替えられる」「難易度別に出題できる」といった要件が揃っている前提で組み直したからこそ、3作品目やミニゲームをすんなり追加できたのだと思います。
今回はもともと規模の小さいアプリだったので、この「一度作り直す」判断も比較的軽いものでした。ただ、これがもっと複雑なプロダクトになれば、この判断はずっと重くなるはずです。それでも、次にもっと複雑なものを作るときは、機能追加で複雑さが積み上がってきたと感じた時点で、「今ある機能を全部含めて、一から作り直す」という選択肢を、迷わず候補に入れてみようと思います。AIと一緒に作っているからこそ、こうした作り直しにかかる時間も、以前より軽い決断で済むようになっている気がしています。
このnoteが参考になった方がいれば「いいね」等、反応していただけると励みになります。
ではまた次回のnoteでお会いできればと思います。 読んでいただきありがとうございました!
