Reactで状態に応じてスタイルを切り替える方法を徹底解説！初心者でもわかる条件付きレンダリングとクラス付与

1. Reactで状態に応じてスタイルを切り替えるとは？

1. Reactで状態に応じてスタイルを切り替えるとは？

Reactでは、状態（state）という仕組みを使うことで、ボタンを押したり、入力したり、変化が起きたタイミングで画面の見た目を変えることができます。特にWebサイトでは、選択されているボタンだけ色を変えたり、エラーがあるときだけ赤い文字にしたりなど、状態に応じてスタイルを変えたい場面はとても多くあります。こうした処理は、デザイナーやエンジニアがよく使う手法であり、ユーザーにとってわかりやすい画面を作るために欠かせません。 Reactでは、このような見た目の変化をクラス名の切り替えで実現します。HTMLではclass属性を使ってスタイルを適用しますが、Reactも同じようにclassNameを指定することでCSSと組み合わせてデザインを変えることができます。状態が変わるたびにclassNameを変えることで、まるでスイッチを切り替えるように瞬時に見た目が変わります。 例えば「選択されているボタンは青色」「選択されていないボタンはグレー」という動作は、ReactとCSSを組み合わせればとても自然に実現できます。これは、プログラミング未経験の人でもイメージしやすい「ライトのオン・オフ」のような切り替えに似ています。ボタンを押すと状態が変わり、それに応じて表示内容も変わるというシンプルなしくみです。

2. 状態によってクラスを切り替える基本パターン

2. 状態によってクラスを切り替える基本パターン

Reactでは、状態に応じてclassNameを変更する方法がいくつかありますが、最も基本的な書き方は三項演算子を使う方法です。「もし〜ならAのクラス、違うならBのクラス」という考え方で、まるで会話で条件を話すように自然な形で切り替えられます。この方法は初心者にも非常にわかりやすく、複雑な処理をしなくても簡単に実装できるためよく使われます。

import React, { useState } from "react";

function App() {
  const [active, setActive] = useState(false);

  return (
    <div>
      <button
        className={active ? "btn-active" : "btn-default"}
        onClick={() => setActive(!active)}
      >
        状態を切り替える
      </button>
    </div>
  );
}

export default App;

ここでは、activeという状態がtrueなら「btn-active」というクラスを付け、falseなら「btn-default」というクラスを付けています。この仕組みを使えば、ボタンだけでなく文字の色、背景色、枠線、サイズなどを自由に変えることができます。状態に応じて適切なクラスを切り替えることは、Reactの画面づくりで非常に重要なポイントです。

3. 複数のクラスをまとめて管理する方法

3. 複数のクラスをまとめて管理する方法

少し複雑なスタイルになると、複数のクラスを組み合わせたい場面も増えてきます。例えば「基本のデザイン」「選択中のデザイン」「小さいサイズ用のデザイン」など複数の条件が重なる場合です。そのようなときは、クラスを文字列として組み立てたり、配列のようにまとめたりする方法があります。 状態によって複数のクラスを切り替える書き方はとても柔軟で、Reactの書き方にも自然に馴染みます。

function Button({ active }) {
  const className = `btn ${active ? "btn-active" : ""}`;

  return <button className={className}>ボタン</button>;
}

この例では、「btn」という基本クラスに加えて、activeがtrueのときだけ「btn-active」を追加しています。このようにベースとなるクラスに状態に応じたクラスを足す方法は、現場でもよく使われる実践的な書き方です。クラス名を組み合わせることでCSSの管理もシンプルになり、保守性も高くなります。

4. 実際にボタンの見た目を変えるサンプル

4. 実際にボタンの見た目を変えるサンプル

次は、選択されているボタンだけ色が変わるサンプルです。日常の操作の中でよく見かける動きで、メニューやタブの切り替えにもそのまま応用できます。特に初心者の人がReactの動きを実感しやすい例であり、状態とクラスの関連がとても理解しやすい書き方です。

import React, { useState } from "react";

function App() {
  const [selected, setSelected] = useState("A");

  return (
    <div>
      <button
        className={selected === "A" ? "btn-active" : "btn-default"}
        onClick={() => setSelected("A")}
      >
        A
      </button>

      <button
        className={selected === "B" ? "btn-active" : "btn-default"}
        onClick={() => setSelected("B")}
      >
        B
      </button>
    </div>
  );
}

export default App;

こうした切り替えは、タブメニューやナビゲーションなどでもよく使われる基本的な仕組みです。この仕組みを理解しておくと、ユーザーが操作しやすい画面を作ることができるため、実務でも必ず役に立ちます。状態とクラス名を結びつける考え方は、Reactの特徴を活かした自然なデザイン手法です。

まとめ

まとめ

今回の記事では、Reactにおける動的なスタイルの切り替え方法について詳しく解説してきました。Reactを使いこなす上で、状態（State）と見た目（CSSクラス）を連動させる技術は、モダンなWebアプリケーション開発において欠かせない要素です。初心者の方でも、まずはuseStateフックを使って「今、画面がどのような状態にあるのか」を管理し、その値に基づいてclassNameを書き換えるという一連の流れを掴むことが重要です。

Reactでスタイルを切り替える際のポイント

記事の中で紹介した通り、Reactでのスタイル管理にはいくつかの代表的なアプローチがあります。最もシンプルで直感的なのは三項演算子を用いた方法です。条件が真（true）か偽（false）かによってクラス名を出し分けるこの書き方は、コードの可読性も高く、小規模なコンポーネントであれば非常に効率的です。また、テンプレートリテラルを活用することで、共通のクラスを維持しつつ、特定の条件下でのみ追加のクラスを付与する柔軟な設計も可能になります。

さらなるステップアップ：実用的な応用例

実際の現場では、スタイルの切り替えは単なる色の変更に留まりません。例えば、フォームのバリデーション結果に応じて入力欄の枠線を赤くしたり、データの読み込み中（Loading）にボタンを非活性化させて半透明にしたりと、ユーザー体験（UX）を向上させるために幅広く活用されています。さらに、今回の基礎をマスターした後は、クラス名の操作をより便利にするライブラリ（classnamesやclsxなど）の導入を検討してみるのも良いでしょう。これにより、複雑な条件分岐が重なる場面でも、コードをスッキリと保つことができます。

実践的なサンプルプログラム：タブ切り替えの実装

ここでは、まとめとして「タブメニュー」の切り替えをより実践的なコードで見てみましょう。複数の選択肢がある場合に、どの要素が選択されているかを状態として保持し、それに基づいて動的にスタイルを適用するコードです。

import React, { useState } from "react";

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

  // タブのリストを定義
  const tabs = [
    { id: "home", label: "ホーム" },
    { id: "profile", label: "プロフィール" },
    { id: "settings", label: "設定" },
  ];

  return (
    <div className="tab-container">
      <div className="tab-buttons" style={{ display: "flex", gap: "10px" }}>
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`tab-item ${activeTab === tab.id ? "active-style" : "default-style"}`}
            onClick={() => setActiveTab(tab.id)}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="tab-content mt-4">
        {activeTab === "home" && <p>ホーム画面の内容が表示されています。</p>}
        {activeTab === "profile" && <p>ユーザープロフィールの情報を編集できます。</p>}
        {activeTab === "settings" && <p>各種アプリケーションの設定変更が可能です。</p>}
      </div>
    </div>
  );
}

export default TabNavigation;

このプログラムでは、配列のmapメソッドを使用して効率的にボタンを生成しています。各ボタンのclassNameは、現在のアクティブなタブIDと比較され、一致する場合にのみ強調用のスタイルが追加される仕組みです。このように、条件付きレンダリングとクラスの切り替えを組み合わせることで、インタラクティブなUIを簡単に構築できます。

SEOを意識したフロントエンド開発の考え方

Reactを用いた開発において、SEO（検索エンジン最適化）は非常に重要なトピックです。Googleなどの検索エンジンはJavaScriptを実行してページ内容を理解しようとしますが、初期表示の速度やアクセシビリティも評価の対象となります。適切なクラス名の切り替えによってユーザーが迷わず操作できるUIを作ることは、直帰率の低下や滞在時間の向上に繋がり、結果としてSEOスコアの改善に寄与します。また、見た目の変化だけでなく、HTMLの適切な構造（セマンティックHTML）を意識しながら、Reactの状態管理を組み込んでいくことが、質の高いWebサイト制作の第一歩となります。