AIが全部やってくれると思ってた。でも、家の設計図なしで家は建てられませんでした。
この記事は、
- Web 開発をはじめたばかり
- AI を活用してコードを書くことがある
- でも途中で “何が起きてるかわからない”
そんな僕が
Spotifyイントロクイズを作りながら
「設計の大切さ」に気づいた話です。
🎯 最初にやりたかったこと：AIの力で Spotifyイントロクイズを作る！
きっかけは、「曲を覚えるためにイントロクイズを使いたい！」と思ったこと。
でもネット上にあるイントロクイズは、できることが少なかったり、楽曲が限られていたり…。
だったら、自分の欲しいものを作ってみよう！
そう思い立ったのがすべての始まりでした。
ChatGPTにこう聞きました。
「Spotifyイントロクイズを作りたいです」
すると、すぐに動きそうなコードを大量にくれました。
「AIすごい。これで完成だ！」
と思いました。しかし…
💥 そして壊れた
途中から 地獄が始まります。
- 設定ファイルが“毎回リセット”される問題
- config ファイル が、サラッと別案で上書き提案される
→ 何回も同じ設定をし直すハメに…
- config ファイル が、サラッと別案で上書き提案される
- 何かを直すたび別の場所が壊れる
- 求めていない機能を勝手に実装される
- 正直、自分もどう直せばいいかわからない
- 言葉がおかしくなる
AI任せの「つぎはぎコード住宅」になっていました。
→ 「ちゃんと動くけど、全体はわからない感」
🏚️ 設計図なしの家は壊れる（当たり前だった）
気づいたのはシンプルなことでした。
コードには“部屋分け（設計）”が必要
だったのです
🏠 設計を意識してみた：役割ごとにを分ける
ChatGPTが出してくれたコードは、最初は全部が1つに混ざっている状態でした。
UI、再生、判定、ログイン処理…
これが初心者の自分にはとても扱いづらい。
そこで、
1つのファイルに全部を書かない！
機能ごとに分ける！
という設計の基本を取り入れることにしました。
🔧 具体的にはこんな感じで分けました
| 分割した機能 | 役割例 | ファイル/場所 |
|---|---|---|
| 認証 | Spotifyログイン処理 | auth.ts |
| データ保存 | 履歴・スコア保存 |
storage.ts / localStorage |
| 再生＆出題 | 曲を流して問題を出す | player.ts |
| 判定ロジック | 正解/不正解判定 | judge.ts |
| UI操作 | 画面表示や操作 | ui.ts |
📈 成長した！AIとの会話が変わった
少しずつですが、
- 動いてる場所がわかる
- 直したい場所を指せる
- ChatGPTの回答品質が上がる
- 1度修正した内容が反映され続ける
“魔法のコード” が
“自分の家” になっていく感触がありました。
🎮 今できていること
- ログインしてプレイリスト取得
- ランダム出題（重複あり/なし選択）
- 好きなプレイリストから問題出題できる
- 再生する秒数を自由に指定できる
- 曲名の答えの表示・非表示
- 曲名の答えを入力して判定
など
📐 設計を書き出してみた（初学者なりのバックログ）
「AIがなんでもやってくれる」と思っていましたが、
Stepを言語化するだけで理解が一気に深まりました。
このアプリでやりたいことを、整理してみます👇
🎛️ 基本操作まわり
- Spotifyログイン（PKCE認証）
- プレイリストを指定して曲を取得
- ランダムで1曲選んで出題
- 指定秒数だけイントロ再生
- 答え（曲名）を表示/非表示
🎯 クイズ体験を良くするために
- 重複出題を防ぐ/許可する設定
- ユーザーの回答入力
- 回答履歴を残す
- 自動で次に進む「Auto Next」
🧠 タイトル判定の改善
- 日本語タイトルでも判定できる（ひらがな/カタカナ揺れ吸収）
- 記号・括弧を除去して「コアタイトル」判定
📦 データとストレージ
- ローカルストレージでプール保存
- JSONインポート/エクスポート
🎨 UI/UX
- ボタン配置や見た目の改善
- テーマ切替（bright / dark）
🔗 Spotify連携（応用）
- 苦手曲だけのプレイリスト自動生成
- 曲推薦（次遊ぶ候補一覧）
- 複数プレイリスト合体機能
これが 僕なりの設計図 になりました。
書き出してみて分かったのは…
「まだ完成していない」＝「まだ育てる余地がある」
というポジティブな事実でした ✨
家づくりは続く。
完成は未来の自分に任せる。
✨ まとめ
- AIは最高の大工さん
- でも 思い通りの設計図を書いて渡せるのは自分だけ
- 初心者でも「設計」を考えると
コードが成長するし、自分も成長する
AI任せのつぎはぎ住宅 → 設計された自分の家へ
その一歩目を踏み出した話でした。
質問や改善ポイントあればぜひコメントください！🙌
次回は、この設計を基に作成した「Spotifyイントロクイズアプリ」を共有したいと思います！
Discussion