1. Reactで条件分岐するには？

Reactで条件分岐を行う方法はいくつかあり、代表的なものは三項演算子、論理演算子、そしてコンポーネントの切り替えです。日常生活で例えると、「雨なら傘を持つ、晴れならサングラスを持つ」のような判断をプログラムに任せる仕組みです。これを使うことで画面の表示を自由に切り替えることができます。

2. 条件付きレンダリングを使ったタブ切り替えUIとは？

タブ切り替えUIとは、画面の上部に複数のタブが並び、クリックしたタブに応じて違う内容が表示される仕組みのことです。スマートフォンの設定画面で「一般」「表示」「通知」などを切り替えるイメージです。 Reactでは条件付きレンダリングを使うことで、タブをクリックしたときに表示内容を切り替えることができます。初心者でも扱いやすく、Webアプリを効率よく作るための実用的なテクニックです。

3. useStateを使ってタブの状態を管理する

タブがどれを選ばれているかを管理するために、Reactの基本機能である useStateを使います。これは「今どのタブを押しているか」という情報を覚えておく道具です。条件付きレンダリングでは、この覚えている値を使って「この状態ならこの画面を出す」という判断を行います。

4. 実際にタブ切り替えUIを作ってみよう

ここでは、Reactで簡単なタブ切り替えUIを作るサンプルコードを紹介します。


import React, { useState } from "react";

function App() {
  const [activeTab, setActiveTab] = useState("home");

  return (
    <div className="container mt-4">
      <div className="d-flex gap-3 mb-3">
        <button onClick={() => setActiveTab("home")}>ホーム</button>
        <button onClick={() => setActiveTab("about")}>概要</button>
        <button onClick={() => setActiveTab("contact")}>お問い合わせ</button>
      </div>

      {activeTab === "home" && <div>ホームタブの内容です。</div>}
      {activeTab === "about" && <div>概要タブの説明を表示しています。</div>}
      {activeTab === "contact" && <div>お問い合わせタブの情報です。</div>}
    </div>
  );
}

export default App;

（ホーム・概要・お問い合わせの各ボタンをクリックすると、画面に表示される内容が切り替わります）

5. タブUIが条件付きレンダリングと相性が良い理由

タブ切り替えUIは、複数の表示をユーザーが選べる仕組みです。そのため「どのタブを選んだか」という状態に応じて画面を変える必要があります。このとき、条件付きレンダリングを使うと「状態によって表示を変える」という考え方がそのままコードに表現できるため、とても読みやすく自然な実装ができます。また、Reactは画面の更新が必要な箇所だけを自動で変更する仕組みを持っており、タブ切り替えのように部分的な更新が必要なUIと非常に相性が良いです。

6. タブのデザインやレイアウトについて理解しておこう

タブUIは単に内容を切り替えるだけでなく、どのタブが選ばれているかを見た目でもわかりやすくすることが重要です。例えば、選択中のタブだけ背景色を変えたり、文字を太字にしたりすると視覚的に理解しやすくなります。デザインの工夫をすることでユーザーが迷わず操作できるようになります。条件付きレンダリングを利用すれば、選んだタブにだけ特別なクラスを付けてスタイルを変えることもできます。

7. 実際に選択中のタブにスタイルをつけてみる

ここでは、選択されているタブだけ色を変える処理を追加する例を紹介します。条件によってクラスを変更することで、どのタブが選択されているのかを視覚的にわかりやすくできます。


<button
  className={activeTab === "home" ? "active-tab" : ""}
  onClick={() => setActiveTab("home")}
>
  ホーム
</button>

Reactの条件分岐の使い方を完全ガイド！初心者でもわかるReactの条件分岐