【Reactアプリ作成 JS編 #4】一覧画面に1件のデータを表示しよう

今回やること

前回は、screen Stateを使って、一覧・新規登録・編集の画面を切り替えました。
今回は、その画面切り替えを残したまま、一覧画面に「気になるもの」を1件表示します。

一覧画面に気になるものを1件表示した状態 — 今回の完成イメージ：一覧画面に1件のデータを表示

いきなり複数件を一覧表示するのではなく、まずは1件分のデータを画面に表示する方法を確認します。
JavaScriptで用意したデータを、JSXの中へどのように表示するのか見ていきましょう。

1. 1件分のデータを用意しよう

まず、一覧画面に表示する1件分のデータを用意します。
第1回でも確認したように、1件分のデータはJavaScriptのオブジェクトで表します。

Appの中、export default function App()のすぐ下に、次のitemを追加します。

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

itemという1つのオブジェクトに、名前・カテゴリ・ステータス・価格・メモなど、1件分の値をまとめています。

2. 名前を画面に表示してみよう

用意したitemから、まずは名前だけを一覧画面に表示してみましょう。
前回作った一覧画面には、次のh2があります。

<h2 className="screen-title">一覧画面</h2>

このすぐ下に、次のh3を追加してください。

<h2 className="screen-title">一覧画面</h2>

<h3>{item.name}</h3>

今回使っている{item.name}は、 JavaScriptで用意した値をJSXの中に表示する書き方です。
詳しい仕組みは、実際に表示を確認したあとで整理します。

ブラウザで名前が表示されることを確認しよう

ファイルを保存して、ブラウザを確認してみましょう。
「はじめてのWebデザイン本」と表示されればOKです。

気になるものリストの名前を表示した画面 — 気になるものリストの名前が表示されています。

オブジェクトから値を取り出す

先ほど使ったitem.nameは、 itemオブジェクトからnameプロパティの値を取り出す書き方です。

item.name

item.nameでは、itemオブジェクトのnameプロパティから「はじめてのWebデザイン本」という値を取り出しています。

itemオブジェクトから取り出せる値
書き方	取り出せる値
`item.name`	はじめてのWebデザイン本
`item.category`	本
`item.status`	気になる
`item.price`	2200
`item.memo`	図が多くて読みやすそう

これはReactの機能ではなく、JavaScriptの書き方です。

JSXの{}とは？

先ほどのコードでは、item.nameをそのまま書くのではなく、 {}で囲んでいました。

{item.name}

JSXの中でJavaScriptの値を使いたいときは、 JavaScriptの値を{}で囲みます。

今回は、JavaScriptのitem.nameを JSXの{}の中に書くことで、「はじめてのWebデザイン本」を画面に表示しています。

3. ほかの値も表示してみよう

名前を表示する仕組みが分かったので、同じ方法でカテゴリやステータスなども表示してみましょう。

先ほど追加したh3の部分を、次のコードにしてください。

<h3>{item.name}</h3>
<p>カテゴリ：{item.category}</p>
<p>ステータス：{item.status}</p>
<p>価格：{item.price}円</p>
<p>メモ：{item.memo}</p>

カテゴリ：や価格：、円のような固定の文字は、そのままJSXに書いています。
JavaScriptから取り出した値だけを、{item.category}や{item.price}のように{}で囲みます。

JSXでは、このように固定の文字とJavaScriptの値を組み合わせて表示できます。

ブラウザで1件分のデータを確認しよう

ファイルを保存して、一覧画面に「はじめてのWebデザイン本」と、カテゴリ・ステータス・価格・メモが表示されることを確認してみましょう。

一覧画面にはじめてのWebデザイン本の名前、カテゴリ、ステータス、価格、メモが1件表示された画面 — JavaScriptのitemオブジェクトの値が一覧画面に表示されています。

「新規登録」や「編集」をクリックして、前回作った画面切り替えもそのまま動くことを確認しておきましょう。

ReactとJavaScriptを分けて見てみよう

今回登場した内容を、ReactとJavaScriptに分けて整理します。

今回登場したReactとJavaScriptの要素
種類	今回登場したもの
React	JSXの`{}`を使ってJavaScriptの値を表示する
JavaScript	オブジェクト、プロパティ、`item.name`のような値の取り出し

itemオブジェクトを作ったり、 item.nameで値を取り出したりする部分はJavaScriptです。
そのJavaScriptの値を、JSXの{}を使って画面へ表示しています。

今回のまとめ

1件分のデータをJavaScriptのオブジェクトで用意した
item.nameのように.を使ってオブジェクトの値を取り出せる
JSXの中でJavaScriptの値を使うときは{}で囲む
オブジェクトの{}とJSXの{}は役割が異なる
前回の画面切り替えを残したまま、一覧画面に1件分のデータを表示した

今回の完成コード

今回のApp.jsxの完成コードです。
前回の画面切り替えを残したまま、一覧画面に1件分のデータを表示します。

src/App.jsx

import { useState } from "react";

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

  const [screen, setScreen] = useState("list");

  if (screen === "create") {
    return (
      <main className="form-screen">
        <header className="screen-header">
          <h1>気になるものリスト</h1>
          <div className="header-actions">
            <button type="button" className="secondary" onClick={() => setScreen("list")}>
              一覧へ
            </button>
          </div>
        </header>

        <h2 className="screen-title">新規登録画面</h2>
      </main>
    );
  }

  if (screen === "edit") {
    return (
      <main className="form-screen">
        <header className="screen-header">
          <h1>気になるものリスト</h1>
          <div className="header-actions">
            <button type="button" className="secondary" onClick={() => setScreen("list")}>
              一覧へ
            </button>
          </div>
        </header>

        <h2 className="screen-title edit-title">編集画面</h2>
      </main>
    );
  }

  return (
    <main className="list-screen">
      <header className="list-header">
        <h1>気になるものリスト</h1>
        <div className="header-actions">
          <button type="button" onClick={() => setScreen("create")}>
            新規登録
          </button>
          <button type="button" onClick={() => setScreen("edit")}>
            編集
          </button>
        </div>
      </header>

      <h2 className="screen-title">一覧画面</h2>

      <h3>{item.name}</h3>
      <p>カテゴリ：{item.category}</p>
      <p>ステータス：{item.status}</p>
      <p>価格：{item.price}円</p>
      <p>メモ：{item.memo}</p>
    </main>
  );
}