Reactで「気になるものリスト」を作ろう

このシリーズで作るアプリ

このシリーズでは、Reactを使って「気になるものリスト」を作っていきます。

本や漫画、映画、ゲーム、家具などを見ていて、 「これ気になるな」「あとで調べたい」「いつか欲しい」と思ったことはありませんか？

そんな気になるものをまとめて管理できるアプリを、 Reactを学びながら少しずつ完成させていきます。

最初から難しいアプリを一気に作るわけではありません。 まずは1件のデータを表示するところから始めて、 記事を進めるごとにできることを増やしていきます。

この記事でできるようになること

• このシリーズで作るReactアプリの全体像が分かる
• アプリで管理するデータの内容が分かる
• 1件のデータをJavaScriptのオブジェクトで表現できる
• ReactとJavaScriptがそれぞれ何を担当するのか、大まかに区別できる

どんなデータを管理する？

「気になるものリスト」では、1件につき次の情報を管理します。

たとえば、気になる本を見つけたら「本」、 新しいゲームが欲しくなったら「ゲーム」として登録できます。

ステータスも最初から用意しておきます。 見つけたばかりなら「とりあえずメモ」、 本格的に買おうか考え始めたら「検討中」といった使い方ができます。

JavaScriptではデータをどう表す？

では、アプリで扱う1件分のデータを見てみましょう。

const item = {
  id: "sample-1",
  name: "はじめてのWebデザイン本",
  category: "本",
  status: "気になる",
  price: 2200,
  memo: "図が多くて読みやすそう",
};

こうして見ると、先ほど決めた項目がそのまま並んでいますね。

JavaScriptでは、このように関連する値を{}の中にまとめたものを、 オブジェクトとして扱えます。

今回は「名前」「カテゴリ」「ステータス」「価格」「メモ」に加えて、 idという項目もあります。

idは、1件1件のデータを区別するための番号や文字列です。 後の記事で「このデータを編集する」「このデータを削除する」といった処理をするときに使います。

複数のデータはどうする？

実際のアプリでは、気になるものを1件だけではなく、たくさん登録します。

そこで、複数のオブジェクトを配列にまとめて管理します。

const items = [
  {
    id: "sample-1",
    name: "はじめてのWebデザイン本",
    category: "本",
    status: "気になる",
    price: 2200,
    memo: "図が多くて読みやすそう",
  },
  {
    id: "sample-2",
    name: "小さなサイドテーブル",
    category: "家具",
    status: "欲しい",
    price: 3500,
    memo: "部屋に置きやすそう",
  },
];

配列は、複数のデータを[]の中に並べ、,で区切ってまとめる書き方です。
今回は、1件分のオブジェクトを複数まとめています（配列の中にオブジェクトが複数）。

この配列を使って、後の記事では複数のデータを一覧画面のテーブルに表示していきます。

ここではコードをすべて覚える必要はありません。 「1件はオブジェクト、複数件は配列にまとめる」くらいのイメージで大丈夫です。
また、配列には複数のデータが入るので、変数名をitemsのように複数形にすることが多いです。

ReactとJavaScriptは何が違う？

Reactは、JavaScriptでUI（画面）を作るためのライブラリです。 JavaScriptを使いながら、Reactの機能を組み合わせて画面を作っていきます。

Reactを学び始めると、Reactの機能とJavaScriptの機能が同じコードの中に登場します。

最初は「これはReact？ それともJavaScript？」と迷うかもしれません。

このシリーズでは、できるだけ両者を区別しながら進めていきます。

先ほど登場したオブジェクトや配列は、React専用の機能ではなく JavaScriptの機能です。

Reactでは、そうしたJavaScriptのデータを使いながら画面を作っていきます。

今は細かい仕組みまで理解しなくても大丈夫です。 実際にアプリを作りながら、「ここはJavaScript」「ここからがReact」と少しずつ整理していきましょう。

このシリーズではアプリを少しずつ育てていく

このシリーズでは、Reactの機能を順番に覚えてから最後にアプリを作るのではありません。

アプリを作るために必要になった機能を、そのタイミングで学んでいきます。

まずは1件表示する。 次に複数件をテーブルで表示する。 そして、新規登録画面から自分でデータを追加できるようにする。

そこから編集画面での更新や削除、検索、絞り込みへと機能を増やしていきます。

今回はページを増やさず、Reactで表示する画面を切り替えながら作っていきます。 画面を切り替える具体的な仕組みは、後の記事で扱います。

記事を1つ進めるたびに、アプリも少しずつ完成形へ近づいていきます。

今回のまとめ

• Reactを使って「気になるものリスト」を作っていく
• 名前・カテゴリ・ステータス・価格・メモを管理する
• 1件のデータはJavaScriptのオブジェクト（{}）で表現できる
• 複数件のデータは配列（[]）としてまとめられる
• JavaScriptで扱うデータを使って、Reactで画面を作っていく

これから何を作るのかは見えてきたでしょうか？

次回はいよいよReactの開発環境を用意して、 「気になるものリスト」の最初の画面をブラウザに表示してみましょう。

アプリの完成状況

• ✅ 完成するアプリの全体像を確認
• ⬜ Reactの開発環境を作る
• ⬜ Stateで画面を切り替える
• ⬜ 1件のデータを表示する
• ⬜ 複数のデータをテーブルで一覧表示する
• ⬜ コンポーネントとpropsを使う
• ⬜ コンポーネントを別ファイルへ分ける
• ⬜ 新しいデータを登録する
• ⬜ 一覧データをStateで管理する
• ⬜ 編集画面を作る
• ⬜ データを更新する
• ⬜ データを削除する
• ⬜ キーワードで検索する
• ⬜ カテゴリ・ステータスで絞り込む
• ⬜ ブラウザにデータを保存して完成