1. リスト表示と条件付きレンダリングとは

Reactでは、配列のデータを画面に一覧で表示することがよくあります。これを「リスト表示」と呼びます。

一方で「条件付きレンダリング」とは、ある条件を満たしたときだけ画面に表示する仕組みです。レンダリングとは、画面に表示するという意味です。

現実の例で言うと、雨の日だけ傘を持って出かけるようなものです。条件が合ったときだけ、必要なものを出します。

2. リスト表示の基本をおさらい

まずは、Reactで配列を使って一覧を表示する基本形を確認します。 mapという仕組みを使うことで、同じ形の表示を繰り返せます。


import React from "react";

function App() {
  const animals = ["いぬ", "ねこ", "うさぎ"];

  return (
    <ul>
      {animals.map((animal, index) => (
        <li key={index}>{animal}</li>
      ))}
    </ul>
  );
}

export default App;

（画面に「いぬ・ねこ・うさぎ」が縦に表示されます）

このように、配列の中身を一つずつ取り出して表示します。同じ形の表示が続くときにとても便利です。

3. 条件付きレンダリングの基本

次に、条件付きレンダリングの考え方を見てみましょう。 Reactでは、条件がtrueのときだけ表示する書き方があります。


import React, { useState } from "react";

function App() {
  const [showMessage, setShowMessage] = useState(false);

  return (
    <div>
      <button onClick={() => setShowMessage(true)}>
        表示する
      </button>
      {showMessage && <p>メッセージが表示されました</p>}
    </div>
  );
}

export default App;

（ボタンを押すとメッセージが表示されます）

「&&」は、条件が正しいときだけ右側を表示するという意味です。難しく考えず「条件が合えば表示する」と覚えると分かりやすいです。

4. リストと条件付きレンダリングを組み合わせる

ここからが本題です。リスト表示と条件付きレンダリングを一緒に使うと、「特定の条件に合うデータだけ表示する」ことができます。

例えば「在庫がある商品だけ表示する」ような場面です。


import React from "react";

function App() {
  const items = [
    { id: 1, name: "ノート", stock: true },
    { id: 2, name: "えんぴつ", stock: false },
    { id: 3, name: "消しゴム", stock: true }
  ];

  return (
    <ul>
      {items.map(item => (
        item.stock && <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default App;

（在庫がある商品だけが表示されます）

stockがtrueのときだけ、リストに表示されます。表示しないものは、そもそも画面に出てきません。

5. 条件によって表示内容を変える方法

条件付きレンダリングは、表示するかしないかだけでなく、表示内容を切り替えることもできます。


import React from "react";

function App() {
  const users = [
    { id: 1, name: "たろう", login: true },
    { id: 2, name: "はなこ", login: false }
  ];

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.login ? "ログイン中：" + user.name : "未ログイン"}
        </li>
      ))}
    </ul>
  );
}

export default App;

（ログイン状態に応じて表示が変わります）

「? :」は、条件によって表示を分ける書き方です。条件が正しければ左、そうでなければ右が表示されます。