Frontend Academy · レッスン

リスト・キー・条件付きレンダリング

.map() で要素の配列をレンダリングし、安定した key Props を指定し、&& と三項演算子で要素を条件付きでレンダリングします。

「リスト・キー・条件付きレンダリング」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

map()によるリストのレンダリング

配列に対して.map()を呼び出し、各項目に対応するJSXを返すことで、動的なリストをレンダリングします。Reactは、単一の要素と同じように要素の配列をレンダリングします。

const fruits = ['apple', 'banana', 'cherry'];

return (
  <ul>
    {fruits.map(fruit => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

keyプロパティ — 重要な理由

keyは、リスト内のどの項目が変更、追加、削除されたかをReactが識別するための特別なReactプロパティです。keyがない場合や、インデックスのように安定しないkeyを使った場合、Reactが誤った更新を行うことがあります。

良いkeyと悪いkey

良いkey：データに含まれる一意で安定したID（例：item.id）。悪いkey：配列のインデックス（項目の順序が変わる可能性があります）やランダムな値（レンダリングのたびに変わります）。

// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}

// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}

オブジェクトのレンダリング

オブジェクトの配列をコンポーネントに変換し、オブジェクトを分割代入してpropsにします。

interface Todo { id: number; text: string; done: boolean; }

const todos: Todo[] = [...];

return (
  <ul>
    {todos.map(({ id, text, done }) => (
      <TodoItem key={id} text={text} done={done} />
    ))}
  </ul>
);

&&による条件付きレンダリング

&&の短絡評価演算子を使うと、JSXを条件付きで含められます。左辺がfalsyの場合、何もレンダリングされません。falsyな数値には注意してください。0は「0」としてレンダリングされます。

function Status({ count }: { count: number }) {
  return (
    <div>
      {count > 0 && <Badge count={count} />}
      {/* Safer: */}
      {count > 0 ? <Badge count={count} /> : null}
    </div>
  );
}

三項演算子による条件付きレンダリング

条件に基づいて2つの要素のいずれかをレンダリングするには、三項演算子を使います。

function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
  return isLoggedIn
    ? <button onClick={logout}>Sign Out</button>
    : <button onClick={login}>Sign In</button>;
}

if文による条件付きレンダリング

複雑な条件には、returnの前でif文を使います。ローディング状態やエラー状態では早期returnを使います。

function UserProfile({ user }: { user: User | null }) {
  if (!user) return <p>Loading...</p>;
  if (user.banned) return <p>Account suspended.</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

マッピング前のフィルタリング

一致する項目だけをレンダリングするには、マッピングの前に配列をフィルタリングします。簡潔で読みやすい方法です。

const activeUsers = users.filter(u => u.active);

return (
  <ul>
    {activeUsers.map(user => (
      <UserItem key={user.id} {...user} />
    ))}
  </ul>
);

空の状態

配列が空の場合を必ず処理してください。空のリストを何も表示せずにレンダリングすると分かりにくいため、代わりに役立つ空状態のメッセージを表示します。

return (
  <div>
    {todos.length === 0
      ? <p className="empty-state">No tasks yet. Add one above!</p>
      : <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
    }
  </div>
);

リストのポータルレンダリング

別の DOM ノード（ドロップダウンなど）に表示する必要がある長いリストでは、ReactDOM.createPortal を使用できます。ただし、ほとんどのリストのレンダリングはツリー内で直接行えます。

仮想化リストによるパフォーマンス向上

非常に長いリスト（1,000 件以上）には、react-window や @tanstack/react-virtual などの仮想化ライブラリを使用します。表示中の行だけをレンダリングするため、DOM によるパフォーマンス問題を回避できます。

確認問題

React のリストで、配列のインデックスを key として使用してもよいのはどのような場合ですか？

まとめ：リストと条件付きレンダリング

.map() でリストをレンダリングします。常に安定した一意の key props を追加します。任意の要素には && を使用します（0 には注意が必要です）。どちらか一方を表示する場合は三項演算子を使用します。読み込み中やエラーの状態には早期 return を使用します。条件付きリストでは、mapする前にフィルタリングします。配列が空の場合は、空の状態を示すメッセージを表示します。非常に長いリストは仮想化します。

よくある質問

「リスト・キー・条件付きレンダリング」レッスンは無料ですか？

はい。「リスト・キー・条件付きレンダリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「リスト・キー・条件付きレンダリング」で何を学びますか？

.map() で要素の配列をレンダリングし、安定した key Props を指定し、&& と三項演算子で要素を条件付きでレンダリングします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「リスト・キー・条件付きレンダリング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る