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

今回やること

前回は、screen Stateを使って、一覧・新規登録・編集の画面を切り替えました。

今回は、その画面切り替えを残したまま、一覧画面に「気になるもの」を1件表示します。

いきなり複数件を一覧表示するのではなく、まずは1件分のデータを画面に表示する方法を確認します。

JavaScriptで用意したデータを、 JSXの中へどのように表示するのか見ていきましょう。

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つのオブジェクトの中に、名前・カテゴリ・ステータス・価格・メモなどの値をまとめています。

このコードで使っている{}は、 JavaScriptでオブジェクトを作るための記号です。

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

次に、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を実際の一覧画面に表示してみましょう。

前回作った一覧画面には、次のh2があります。

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

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

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

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

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

今回は、JavaScriptのitem.nameを JSXの{}の中に書いています。

{item.name}

これによって、item.nameに入っている「はじめてのWebデザイン本」がh3として画面に表示されます。

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

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

名前を表示できたので、同じ方法でカテゴリやステータスなども表示してみましょう。

先ほど追加した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の値を組み合わせて表示できます。

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

一覧画面にはじめての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>
  );
}