【Reactアプリ作成 JS編 #1】Reactで「気になるものリスト」を作ろう

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

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

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

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

完成するアプリを見てみよう

最終的には、次の3つの画面を持つアプリを完成させます。

完成した気になるものリストの一覧画面 — 気になるものを検索・絞り込みできる一覧画面

完成した気になるものリストの新規登録画面 — 新しいデータを追加する新規登録画面

完成した気になるものリストの編集画面 — 登録したデータを更新・削除する編集画面

最初はシンプルな画面から始めて、Reactの機能を学ぶたびに少しずつこの完成形へ近づけていきます。

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

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

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

まずは1件のデータを表示し、次に複数件をテーブルで表示します。そこから新規登録、更新、削除、検索、絞り込みと、少しずつできることを増やしていきます。

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

ReactとJavaScriptは何が違う？

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

Reactを学び始めると、Reactの機能とJavaScriptの機能が同じコードの中に登場するため、「これはReact？それともJavaScript？」と迷うことがあります。

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

	主な役割
JavaScript	データを作る、配列を操作する、条件を判定するなど
React	データをもとに画面を作り、データの変化に合わせて画面を更新する

このあと登場するオブジェクトや配列は、React専用の機能ではなく JavaScriptの機能です。

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

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

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

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

項目	内容
名前	気になっているものの名前
カテゴリ	本、漫画、映画、アニメ、ゲーム、音楽、家具、その他
ステータス	とりあえずメモ、気になる、欲しい、検討中、購入済
価格	商品の価格など
メモ	気になった理由や補足情報

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

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

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

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

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

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

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

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

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

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

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

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

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

この配列を使って、後の記事では複数のデータを一覧画面のテーブルに表示していきます。
オブジェクトや配列はJavaScriptの機能ですが、Reactではこうしたデータをもとに画面を作っていきます。
また、配列には複数のデータが入るので、変数名をitemsのように複数形にすることが多いです。