応用編 第10章

実践プロジェクト集

スキルは「作った数」だけ伸びます。この章は難易度順の制作課題集です。各プロジェクトに開始用プロンプトを用意していますが、慣れてきたら自分の言葉で要件を書くことに挑戦してください。

この章のレッスン
  1. プロジェクトの進め方テンプレート
  2. 初級①：ポモドーロタイマー
  3. 初級②：おみくじ・診断アプリ
  4. 中級①：グラフ付き家計簿
  5. 中級②：神経衰弱ゲーム
  6. 上級：予約フォーム（Supabase連携）

10-1プロジェクトの進め方テンプレート

どのプロジェクトも、基礎編第6章で身につけた同じ型で進めます。毎回この手順をなぞることで、型が体に染み込みます。

制作の7ステップ

  1. 要件定義 — 5つの質問（誰が・何を・必須機能・後回し・見た目）に答える
  2. 環境準備 — フォルダ作成 → claude起動 → Git有効化 → CLAUDE.md作成
  3. 土台作り — 最小機能だけ実装 → 確認 → コミット
  4. 機能追加 — 1機能ずつ「追加→確認→コミット」
  5. デザイン — 第9章の言葉で磨き上げる
  6. 意地悪テスト — 想定外の操作で穴を探す
  7. 公開 — Cloudflareへデプロイ（任意）

学習効果を最大化するコツ

10-2初級①：ポモドーロタイマー

学べること：時間処理（setInterval）、画面の状態切り替え、音の再生

25分作業＋5分休憩を繰り返す、定番の集中法タイマーです。シンプルですが「時間」と「状態」というプログラミングの重要概念が詰まっています。

開始プロンプト 
ポモドーロタイマーを作ってください。

【必須機能】
- 25分の作業タイマーと5分の休憩タイマーが自動で交互に切り替わる
- スタート／一時停止／リセットボタン
- 残り時間を大きく表示。作業中と休憩中で背景色が変わる
- タイマー終了時に音を鳴らす

【構成】HTML/CSS/JSのみ。スマホ対応
【進め方】計画説明 → OK後に1機能ずつ実装してください
🖐 アレンジ課題（1つ以上挑戦） ・完了したポモドーロ数を記録して表示する
・作業時間・休憩時間を自分で設定できるようにする
・今日の合計集中時間をlocalStorageに保存する

10-3初級②：おみくじ・診断アプリ

学べること：乱数、条件分岐、データ（質問・結果）の設計

ボタンを押すと結果が出るおみくじと、複数の質問に答えると診断結果が出るアプリ。「データとロジックを分けて作る」感覚を学びます。

開始プロンプト 
2画面構成の「今日の運勢＆性格診断」アプリを作ってください。

【機能1：おみくじ】
- ボタンを押すと大吉〜凶がランダムに表示
- 結果ごとにラッキーカラーとひとことアドバイス

【機能2：性格診断】
- はい/いいえで答える質問5問
- 回答の組み合わせで4タイプに分類して結果表示

【条件】
- 質問や結果のデータは、コードと分けて編集しやすい形に
- 結果画面はSNSでシェアしたくなる楽しいデザイン
【進め方】計画説明 → OK後、おみくじ→診断の順で
🖐 アレンジ課題 ・診断テーマを自分の趣味に変える（推し活タイプ診断、パン好き診断など）
・「1日1回しか引けないおみくじ」にする（localStorageで日付管理）

10-4中級①：グラフ付き家計簿

学べること：データの集計、グラフライブラリ（Chart.js）、月別の絞り込み

記録するだけでなく「見える化」する家計簿。外部ライブラリを使う経験と、データを集計・加工する処理が学びどころです。

開始プロンプト 
グラフ付きの家計簿アプリを作ってください。

【必須機能】
- 支出の登録：日付・金額・カテゴリ（食費/日用品/交際費/その他）・メモ
- 月ごとの一覧表示と合計金額
- カテゴリ別の円グラフ（Chart.jsを使用）
- 月別の支出推移の棒グラフ
- データはlocalStorageに保存

【見た目】第9章で学んだ3色ルールで。家計簿らしい安心感のある配色
【進め方】計画説明 → OK後、登録機能→一覧→グラフの順で
1機能ずつ。各ステップで動作確認の方法も教えてください
🖐 アレンジ課題 ・月の予算を設定して、残額と使用率バーを表示
・CSVエクスポート機能（Excelで開ける形式）
・収入も記録できる収支対応版に拡張

10-5中級②：神経衰弱ゲーム

学べること：ゲームの状態管理、アニメーション、ロジックの整理

ゲームは「状態管理」の総合演習です。めくったカードの管理、判定、ターン制御——複雑な状態を整理する力が付きます。

開始プロンプト 
絵文字を使った神経衰弱ゲームを作ってください。

【必須機能】
- 4×4の16枚（8ペア）。絵文字でカードの絵柄を表現
- カードをクリックでめくる。2枚めくって一致なら取得、
  不一致なら裏に戻る
- めくった回数と経過時間を表示
- 全ペア発見でクリア画面（回数とタイムを表示）
- 「もう一度遊ぶ」でシャッフルして再開

【見た目】カードがめくれるアニメーション付き
【進め方】計画説明 → OK後、盤面表示→めくり→判定→クリアの順で
🖐 アレンジ課題 ・難易度選択（4×4 / 6×6）を追加
・ベストスコアをlocalStorageに記録
・2人対戦モード（交互にめくり、取得数を競う）

10-6上級：予約フォーム（Supabase連携）

学べること：第7章の総動員。DB設計、フォームのバリデーション、管理画面の概念

架空のお店（教室・サロンなど）の予約システム。利用者用と管理者用、2つの顔を持つ本格構成です。

開始プロンプト 
小さなパン教室の予約システムを作ってください。

【利用者側】
- レッスン日時の一覧から空きを選んで、名前・メール・人数で予約
- 定員（各回4名）に達した回は「満席」表示で予約不可
- 予約完了画面で予約内容を確認できる

【管理者側（パスワードでログイン）】
- レッスン日時の登録・削除
- 予約一覧の確認

【技術】Supabase（DB＋認証）を使用。プロジェクト作成済み
【進め方】まずテーブル設計から提案してください。
私が理解してから実装に進みたいので、設計の説明は丁寧に。
⚠️ 上級のつまずきポイント 満席判定やRLS設定など、考えることが一気に増えます。詰まったら「今の問題を整理して、選択肢を提案して」とAIに状況整理させるのが突破のコツ。これが乗り越えられたら、実務レベルの構成力が付いた証拠です。
🎉 第10章 修了 6つのプロジェクトを終えたあなたは、もう「チュートリアルの人」ではありません。次は完全オリジナルの題材で、誰かに使ってもらえるものを作りましょう。

📝 第10章 理解度チェック

全問正解できたら次の章へ進みましょう。