[今さら始める React マスター #6] 条件付きレンダリングとリスト表示

条件付きレンダリングとは？

条件付きレンダリングは、状態や条件に応じて表示する内容を変えることです。

ログイン済みならユーザー名を表示し、未ログインならログインボタンを表示する、といった場面で使います。

if文で分ける

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  }

  return <p>Please log in.</p>;
}

分岐が大きい場合は、普通の if 文が読みやすいです。

三項演算子

短い分岐なら三項演算子も使えます。

{isLoggedIn ? <p>Welcome</p> : <p>Login required</p>}

&&で表示する

条件が真のときだけ表示したい場合は && が便利です。

{hasError && <p className="error">エラーがあります</p>}

リスト表示

配列を画面に表示するときは map() を使います。

const todos = ["Learn React", "Build App", "Deploy"];

function TodoList() {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo}>{todo}</li>
      ))}
    </ul>
  );
}

Greeting と TodoList はコンポーネントの定義として置き、Appから表示します。三項演算子や && の短い断片は、コンポーネントが返すJSXの中に書く例です。Greeting の isLoggedIn を切り替えて表示を比べ、次に TodoList で三つのTodoが並ぶか確認すると、それぞれの役割を追いやすくなります。

keyの役割

リストを表示するとき、Reactは各要素を区別するために key を使います。安定したIDがある場合は、それを使うのが理想です。

{users.map((user) => (
  <li key={user.id}>{user.name}</li>
))}

最後の users の例は、id と name を持つ配列を別途用意している想定です。上の文字列のTodo配列とはデータの形が違う点に注意してください。

学習のポイント

条件付きレンダリングとリスト表示を使えるようになると、Reactで動的な画面を作れるようになります。Todoリストや検索結果一覧のような小さなUIで練習してみましょう。