ToDoアプリを作る①——表示と追加

最終部です。ここからの3章、新しい道具は1つも出てきません。17章で手に入れた道具だけで、ToDoアプリという「ひとつの完成品」を組み上げます。実務のコーディングも、面接で語るポートフォリオも、本質はこれです——知っている部品の、正しい組み合わせ。

まず、データを設計する

いきなりコードを書かず、まず「ToDoとは何か」をデータで決めます。アプリ作りはデータ設計から始まる——これは実務でも同じ順番です。

ToDoの1件には、何が必要でしょうか。タスクの文章。完了したかどうか。そして前の章の最後で踏んだ問題を思い出してください——名前をkeyにしたら、同じ名前で困るのでした。「牛乳を買う」を2回登録したら? そう、1件1件を確実に見分ける名札=idが要ります。

type Todo = {
  id: number;
  text: string;
  done: boolean;
};

これがこのアプリの設計図です。3章を通してこの型が背骨になります。

idはどう発番するか。今回は「今の時刻のミリ秒」を使います。

const newTodo: Todo = {
  id: Date.now(),   // 1970年からのミリ秒。実質重複しない
  text: input,
  done: false,
};

Date.now() は呼ぶたびに違う数値を返すので、簡易な発番機として十分です。

追加は、チャプター17の型のまま

state設計はこうです。Todoの配列と、入力欄の文字列——前の章のMemberListと同じ2本立てです。