← いちらんへ もどる
Phase 5 ・ だい20かい 🔎

/kuku を読む
（流れを追う）

🎯 きょうのゴール

VS Code でこの repo を開いて読みます。20〜30分。コードを全部わからなくてOK。

📖 まなぼう

コードは「読む」が先

プロでも、新しいコードはまず読むことから始めます。いきなり全部書けなくていい。だから今日は、自分で書くより「本物を読んで、流れを追う」れんしゅう。

むずかしい所は飛ばしてOK。 1行ずつ意味が分からなくても、3つのファイルが「だれが何の係か」が分かれば大成功です。

九九アプリのデータの旅

このサイトの /kuku（九九れんしゅう）は、3つのファイルがバトンをわたして動いています。だい1かいの入力 → しょり → 出力と同じ形だよ。

① 画面で出題して、回答時間をはかる（入力）
app/kuku/Quiz.tsx が、10問の九九を画面に出す係。きみがボタンをおすと、何を選んだか・何秒なんびょうかかったかを覚えておく。10問おわると、ぜんぶまとめてサーバーへ送る。

// Quiz.tsx：何秒かかったかをはかる elapsedMs = performance.now() - start // 10問ぶんを まとめてサーバーへ送る fetch("/api/kuku/attempts", { method: "POST", … })

② サーバーに送って、保存する（しょり・保存）
app/api/kuku/attempts/route.ts が、送られてきた答えを受け取る係。ここで正かい・まちがいをサーバー側でもう一度たしかめてから、データベースにしまう。画面の言うことをそのまま信じないのがコツ。

// route.ts：正誤はサーバーで決めなおす isCorrect: chosen === dan * multiplier

③ DBから集計して、ダッシュボードに出す（出力）
app/kuku/page.tsx が、たまった記録をデータベースから集めて、毎日の正答率せいとうりつのグラフや、とくい・にがてな段を画面に出す係。

「画面 → サーバー → DB → また画面」。このひとまわりが分かれば、もうアプリの骨組みほねぐみが読めています。

✋ やってみよう

VS Code で repo を開いて、つぎをやってみよう。全部わからなくて大丈夫。

  1. 3つのファイルをエディタで開く：app/kuku/Quiz.tsx ／ app/api/kuku/attempts/route.ts ／ app/kuku/page.tsx
  2. それぞれが「入力 ／ しょり・保存 ／ 出力」のどれか、紙に書いてみる
  3. 分からない行を1つえらんで、AI に「これ何してる？」と聞いてみる
  4. じっさいに /kuku を遊んで、画面の動きと読んだコードを頭の中で結びつける

ヒント： ファイルの名前そのものが手がかり。Quiz はクイズの画面、route は受け取り口（API）、page は見せるページ、だよ。

💡 気になった1行を AI に聞こう：たとえば「Quiz.tsx の performance.now() は何のため？」のように、分からない1行をそのままコピーして AI にはり、「これ何してる？」と聞いてみよう。読むときのいちばん大事な力は、分からない所を1つずつ聞ける力です。
🔁 ふりかえり

「保存」ってどうやってるんだろう？ つぎの回からは、記録をしまっておく データベース の話に入ります。