Day 6・小さなアプリを作って公開する — 現場の地図

部品を組み合わせて小さなアプリを作る

props/state/effect/list/formをレゴのように組み合わせ、TODOアプリを例に「設計の順番」をつかむ。

アプリは「部品の組み合わせ」でできている

ここまでで、props(部品への入力)、state(覚えておく値)、effect(外の世界とのやりとり)、リスト表示、フォーム入力を学んできました。実はアプリは、この5つの部品をレゴのように組み合わせたものにすぎません。難しそうに見えるTODOアプリやメモ帳も、分解すれば「状態を持つ箱」と「その状態を映す部品」と「状態を変えるボタン」の組み合わせです。

料理でたとえると、いきなり盛り付けから始める人はいません。まず「何を作るか(完成形)」を決め、次に「材料(具材)」を並べ、最後に「手順どおりにつなぐ」。Reactのアプリづくりも同じ順番です。設計には決まった順番があり、そこを外さなければ迷いにくくなります。

設計の順番: 状態を決める → 部品に分ける → つなぐ

状態を決める: 画面が「覚えておく必要のある値」は何かを書き出す。TODOなら「タスクの一覧」と「入力中の文字」の2つ
部品に分ける: 画面を意味のある単位に切る。入力フォーム、一覧、1件分の行、の3つに分けられる
つなぐ: 状態をどこに置き、どの部品に渡すか(props)を決め、ボタンで状態を更新する関数を配線する

いちばん大事なのは最初の「状態を決める」です。状態を置く場所を間違えると、あとで配線がこじれます。原則は「その状態を使う部品たちの、いちばん近い共通の親に置く」こと。TODOの一覧は入力フォームと表示の両方から触るので、両者の親にまとめて置きます。

TSX

"use client";
import { useState } from "react";

type Task = { id: number; text: string };

export default function TodoApp() {
  // 1) 状態を決める: タスク一覧と入力中の文字
  const [tasks, setTasks] = useState<Task[]>([]);
  const [input, setInput] = useState("");

  // 3) つなぐ: 状態を変える関数
  function addTask() {
    if (input === "") return;
    setTasks([...tasks, { id: Date.now(), text: input }]);
    setInput(""); // 追加したら入力欄を空に戻す
  }

  return (
    <main>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTask}>追加</button>
      <TaskList tasks={tasks} />
    </main>
  );
}

TODOアプリの骨組み。状態を親に置き、部品に配る

TSX

type Task = { id: number; text: string };

// props で tasks を受け取り、リストを描くだけ
function TaskList({ tasks }: { tasks: Task[] }) {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
}

2) 部品に分ける: 一覧は受け取ったtasksを映すだけの部品

なぜ状態を「親」にまとめるのか

同じ状態を複数の部品が触るとき、それぞれが別々に持つと食い違いが起きます(片方だけ古い値になる、など)。状態はひとつの場所(共通の親)に置き、子には props で配り、更新は親から渡した関数で行う。この「一方向の流れ」がReactの一貫性を守る背骨です。

よくある落とし穴: 状態を置く場所を最初から決めない

「とりあえず動かしてから考える」と、状態があちこちに散らばって配線がスパゲッティになります。最初に1分だけ「この画面が覚える値は何か」を紙に書くだけで、後の作業が驚くほど楽になります。

AIにはこう聞く

「TODOアプリを作りたい。まず状態を何個、どこに持てばいいか設計だけ提案して。コードはまだ書かなくていい」と、設計と実装を分けて聞くのがコツです。いきなり全部書かせると、自分が地図を持てません。設計を自分で理解してから実装をAIに任せると、出てきたコードの良し悪しを判断できます。

まとめると、アプリづくりは「状態を決める → 部品に分ける → つなぐ」の順番。状態は共通の親に置き、子へは props で配り、更新は関数で行う。この地図さえ持てば、TODOでもメモ帳でも、同じ手順で組み立てられます。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

Reactで小さなアプリを設計するとき、推奨される順番はどれ?

複数の部品が同じ状態を触りたいとき、状態はどこに置くのがよい?

TODOアプリを例に、「設計の順番」と「状態の置き場所」の考え方を説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。