Reactの基礎を学ぼう: コンポーネントとデータ表示の手法を解説

投稿日 6月 24, 2023
更新日 10月 3, 2024
著者しんぺー
カテゴリー React

Reactの基礎的な書き方を学びたいです。
何からやればいいですか？

Reactではハードコーディングせず、オブジェクト内のデータ（JSONなど）をコンポーネントに渡してあげます。その際map関数を使うことが多いので今回はその方法を解説したいと思います。

完成形のイメージ

描画されているテーブルは至って普通のものですが、これらは全てReactで描画されています。
HTMLには<div id="root"></div>しかありません。
一つ一つ解説していきますね。

See the Pen Untitled by shimpei (@shimpei) on CodePen.

CodePenでReactを使う方法はこちらで解説していますので、必要な方はこちらの記事を参照ください。

HTML

HTMLはこれだけです。CSSは省きますね。
肝心のJavaScript（JSX）へ行きましょう。

<div id="root"></div>

JavaScript

配列の作成

const rows = の箇所で配列内にオブジェクトを作成しています。
idや、type、answersといったプロパティがあり、それぞれ値を持っています。

const rows = [
  {
    id: "type01",
    type: "男性",
    answers: [0.45, 0.11, 0.52, 0.13],
  },
  {
    id: "type02",
    type: "女性",
    answers: [0.3, 0.08, 0.91, 0.31],
  },
];

JSXで配列内のオブジェクトを表示

作成した配列をmapメソッドを使用して表示させています。
このようにmapメソッドを使用するケースがとても多いです。

最後の行ではReactDOM.render(, document.getElementById("root"))が呼び出されています。
これにより、AppコンポーネントがrootというIDを持つHTML要素に描画されます。

function App() {
  return (
    <div>
      <div>
        <h1>React コンポーネントとデータ表示</h1>
      </div>
      <table>
        <thead>
          <tr>
            <th>性別</th>
            <th>th01</th>
            <th>th02</th>
            <th>th03</th>
            <th>th04</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={row.id}>
              <th>{row.type}</th>
              {row.answers.map((answers, index) => (
                <td key={index}>{(answers * 100).toFixed(0)}%</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));