MENU
  1. ホーム
  2. React
  3. Reactで学ぶトグル実装：クリックで状態を切り替える方法

Reactで学ぶトグル実装：クリックで状態を切り替える方法

React

ボタンをクリックするたびに状態が切り替わる「トグル機能」は、多くのWebアプリケーションで使われる基本的なインタラクションのひとつです。たとえば、テーマの明暗モードの切り替えや、設定画面でのオプションのオン・オフなど、あらゆる場面で活用されています。Reactでは、このトグル機能を簡潔かつ直感的に実装できます。本記事では、Reactの基本的な状態管理機能であるuseStateフックを使ったトグル機能の作り方をはじめ、複雑なケースへの応用例や実践的な演習課題まで、段階的に詳しく解説していきます。これを通じて、Reactを用いたインタラクティブなUI構築の基本を学びましょう。

目次

トグル機能とは？


トグル機能とは、ユーザーのアクション（たとえばクリックやタップ）に応じて、特定の状態を切り替える動作を指します。最も基本的な例として、ボタンのオン・オフやチェックボックスの選択/解除などが挙げられます。この機能は、ユーザーに明確なフィードバックを与え、直感的に操作できるインターフェースを提供する上で非常に重要です。

トグル機能のUI/UXにおける役割


トグルは、以下のような目的で使われることが一般的です：

  • 状態の切り替え：テーマの明暗モード、通知のオン/オフなど、状態を視覚的に表現します。
  • シンプルな操作性：ボタン1つで操作が完了するため、複雑なメニューや設定を省略できます。
  • 視認性の向上：現在の状態が視覚的にわかるため、ユーザーが迷うことがありません。

トグル機能の動作例


以下に、典型的なトグルの動作例を示します：

  1. ボタンをクリックすると、背景色が白から黒に切り替わる（ダークモードの切り替え）。
  2. フォーム内の「サブスクリプションを有効にする」スイッチをオン/オフにする。
  3. メニューバーの展開/縮小。

トグル機能は、見た目のシンプルさに反して幅広い用途があり、UIのデザインにおいて重要な役割を果たします。Reactでは、この機能を簡単に実装できるため、初心者が最初に取り組むのに適したテーマといえます。

Reactでのトグル実装の基本例

Reactでトグル機能を実装するには、useStateフックを使用して状態を管理します。これにより、ボタンをクリックした際に状態を切り替える簡単なトグル機能を作成できます。

トグル機能の基本コード


以下は、トグルボタンを作成するReactコードの例です。

import React, { useState } from "react";

function ToggleButton() {
  const [isOn, setIsOn] = useState(false); // 初期状態を false に設定

  const handleToggle = () => {
    setIsOn((prevState) => !prevState); // 状態を切り替える
  };

  return (
    <button onClick={handleToggle}>
      {isOn ? "ON" : "OFF"} {/* 状態に応じて表示を切り替え */}
    </button>
  );
}

export default ToggleButton;

コードの説明

  1. useStateフックで状態を定義：
    useStateは、トグル状態を管理するために使用します。この例では、初期状態をfalseに設定しています。
  2. 状態を更新する関数setIsOn：
    setIsOnを使って状態を切り替えます。prevStateを使用して現在の状態を反転させています。
  3. ボタンの表示を動的に変更：
    状態がtrueのときは「ON」、falseのときは「OFF」と表示が切り替わるようにしています。
  4. イベントハンドラーでトグル動作を実現：
    ボタンのonClickプロパティにhandleToggle関数を設定することで、ボタンがクリックされるたびに状態が切り替わります。

実行結果

このコードをブラウザで実行すると、ボタンをクリックするたびに「ON」と「OFF」が切り替わるシンプルなトグルボタンが動作します。

次のステップ

この基本例を基に、複数の状態を持つトグル機能や、より複雑なUIの実装に発展させることができます。次のセクションでは、応用的な例を詳しく解説します。

応用例：複数の状態管理

単一のトグルボタンだけでなく、複数のボタンやコンポーネントで状態を管理するケースでは、状態管理の拡張が必要です。ReactのuseStateフックや配列、オブジェクトを活用することで、簡単に実現できます。

複数のトグルを管理する基本例


複数のトグルボタンを一括で管理する例を以下に示します。

import React, { useState } from "react";

function MultiToggle() {
  const [toggles, setToggles] = useState([false, false, false]); // トグルの初期状態

  const handleToggle = (index) => {
    setToggles((prevToggles) => 
      prevToggles.map((toggle, i) => (i === index ? !toggle : toggle)) // 特定のトグルを切り替える
    );
  };

  return (
    <div>
      {toggles.map((isOn, index) => (
        <button key={index} onClick={() => handleToggle(index)}>
          {isOn ? `Button ${index + 1}: ON` : `Button ${index + 1}: OFF`}
        </button>
      ))}
    </div>
  );
}

export default MultiToggle;

コードの説明

  1. 複数の状態を配列で管理：
    配列togglesを使って複数のトグルボタンの状態を管理しています。それぞれのボタンにtrueまたはfalseの値が対応します。
  2. 状態を更新するmap関数：
    setToggles内でmap関数を使い、クリックされたボタン（indexが一致するボタン）の状態だけを反転させます。
  3. 動的にボタンを生成：
    配列のmapメソッドでボタンを生成し、それぞれのボタンにクリックイベントを割り当てています。

実行結果

  • 3つのボタンが表示され、それぞれ独立して「ON」と「OFF」を切り替えることができます。
  • ボタンを増やしたい場合は、toggles配列に初期値を追加するだけで簡単に拡張可能です。

応用例：オブジェクトで状態管理

より複雑なケースでは、オブジェクトを使った管理が便利です。以下に例を示します：

const [toggleStates, setToggleStates] = useState({
  toggle1: false,
  toggle2: false,
  toggle3: true,
});

const handleToggle = (key) => {
  setToggleStates((prevState) => ({
    ...prevState,
    [key]: !prevState[key], // 指定したキーだけを反転
  }));
};

この方法では、キー名（例：toggle1）で状態を識別でき、拡張性がさらに高まります。

次のステップ

複数の状態管理は、コンポーネント間で状態を共有する場合や、複雑なアプリケーションで役立ちます。次は、トグル機能にスタイリングを加え、状態をビジュアル的にわかりやすくする方法を解説します。

スタイリングとトグル状態のビジュアル化

トグル機能を視覚的にわかりやすくすることで、ユーザー体験（UX）を向上させることができます。CSSを使用してボタンの状態を明確に表現し、より魅力的なUIを作成する方法を解説します。

基本的なスタイリング

以下は、トグルボタンにシンプルなスタイリングを加える例です：

import React, { useState } from "react";
import "./ToggleStyle.css"; // CSSファイルをインポート

function StyledToggle() {
  const [isOn, setIsOn] = useState(false);

  const handleToggle = () => {
    setIsOn((prevState) => !prevState);
  };

  return (
    <button 
      className={`toggle-button ${isOn ? "on" : "off"}`} 
      onClick={handleToggle}
    >
      {isOn ? "ON" : "OFF"}
    </button>
  );
}

export default StyledToggle;

CSSファイル例（ToggleStyle.css）

.toggle-button {
  padding: 10px 20px;
  font-size: 16px;
  border: 2px solid #333;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.toggle-button.on {
  background-color: #4caf50;
  color: white;
}

.toggle-button.off {
  background-color: #f44336;
  color: white;
}

コードの説明

  1. 動的なクラスの切り替え：
    ボタンのクラス名に状態（onまたはoff）を基に動的にクラスを付与しています。これにより、状態に応じたスタイルを適用できます。
  2. CSSで状態を明確化：
    onクラスには緑色、offクラスには赤色の背景を設定しており、トグルの状態が視覚的にわかるようにしています。
  3. アニメーションの追加：
    transitionプロパティを使い、トグルの切り替え時に滑らかなアニメーション効果を加えています。

トグル状態をさらに魅力的にする応用例

トグルスイッチのデザインを採用することで、より洗練されたUIを作成できます：

import React, { useState } from "react";
import "./ToggleSwitch.css"; // 別のCSSファイルをインポート

function ToggleSwitch() {
  const [isOn, setIsOn] = useState(false);

  const handleToggle = () => {
    setIsOn((prevState) => !prevState);
  };

  return (
    <div className="toggle-switch" onClick={handleToggle}>
      <div className={`switch ${isOn ? "active" : ""}`}></div>
    </div>
  );
}

export default ToggleSwitch;

CSSファイル例（ToggleSwitch.css）

.toggle-switch {
  width: 60px;
  height: 30px;
  border-radius: 15px;
  background-color: #ccc;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-switch .switch {
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  transition: transform 0.3s;
}

.toggle-switch.active {
  background-color: #4caf50;
}

.toggle-switch.active .switch {
  transform: translateX(30px);
}

実行結果

  • ボタンは赤/緑の明確な背景色で視覚的に状態を示します。
  • スイッチデザインでは、クリックするとスライダーが左から右に移動するエフェクトが追加され、より直感的な操作感を提供します。

次のステップ

スタイリングを完成させたら、トグル機能に状態変更時の副作用（例：API呼び出しやローカルストレージの更新）を追加する方法を学びます。次のセクションで詳しく説明します。

状態変更時に副作用を処理する方法

Reactでは、トグル操作に応じて副作用（例：API呼び出しやローカルストレージの更新）を処理する必要がある場合があります。このような場合、useEffectフックを活用することで簡単に実現できます。

useEffectを使ったトグル状態の副作用処理

以下の例では、トグル状態が変更されるたびにコンソールにログを出力し、ローカルストレージに状態を保存します。

import React, { useState, useEffect } from "react";

function ToggleWithEffect() {
  const [isOn, setIsOn] = useState(() => {
    // 初期値をローカルストレージから取得
    const savedState = localStorage.getItem("toggleState");
    return savedState === "true";
  });

  const handleToggle = () => {
    setIsOn((prevState) => !prevState);
  };

  useEffect(() => {
    // 副作用処理：状態をローカルストレージに保存
    localStorage.setItem("toggleState", isOn);
    console.log(`Toggle state updated: ${isOn}`);
  }, [isOn]); // isOnが変更されるたびに実行

  return (
    <button onClick={handleToggle}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}

export default ToggleWithEffect;

コードの説明

  1. 状態の初期化に副作用を利用：
    ローカルストレージに保存された値を状態の初期値として利用します。これにより、ブラウザをリロードしても前回の状態が保持されます。
  2. 副作用を処理するuseEffect：
    isOnが更新されるたびにuseEffectが呼び出され、状態をローカルストレージに保存し、ログを出力します。
  3. 依存配列[isOn]：
    useEffectの依存配列にisOnを指定することで、この状態が変更されたときだけ副作用が実行されます。

API呼び出しを伴うトグル機能の例

トグル状態が変更されたときに、APIリクエストを送信する例を示します：

import React, { useState, useEffect } from "react";

function ToggleWithAPI() {
  const [isOn, setIsOn] = useState(false);

  const handleToggle = () => {
    setIsOn((prevState) => !prevState);
  };

  useEffect(() => {
    const updateServerState = async () => {
      try {
        const response = await fetch("/api/updateToggle", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ toggleState: isOn }),
        });
        if (!response.ok) {
          throw new Error("Failed to update toggle state");
        }
        console.log("Toggle state updated on server");
      } catch (error) {
        console.error("Error updating toggle state:", error);
      }
    };

    updateServerState();
  }, [isOn]); // isOnが変更されたときだけ実行

  return (
    <button onClick={handleToggle}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}

export default ToggleWithAPI;

コードの説明

  1. 非同期API呼び出し：
    状態が変更されるたびにuseEffect内でAPIリクエストを送信し、トグル状態をサーバーに反映します。
  2. エラーハンドリング：
    try...catchブロックでエラー処理を行い、通信エラー時にもアプリケーションがクラッシュしないようにします。
  3. 状態の依存管理：
    依存配列にisOnを設定しているため、状態が変わるたびに副作用がトリガーされます。

実行結果

  • ボタンをクリックすると、トグルの状態がサーバーに同期されます。
  • 状態変更のたびにログが出力され、通信エラーが発生した場合はエラーメッセージが表示されます。

次のステップ

副作用処理をマスターすることで、トグル機能をさらに高度に活用できます。次は、トグルロジックを再利用可能な形に抽象化する方法を解説します。

トグル機能を複数コンポーネントで再利用する

Reactでは、トグルロジックを再利用可能な形に抽象化することで、複数のコンポーネントで効率的に状態を管理できます。このような抽象化には、カスタムフックを利用する方法が一般的です。

カスタムフックでトグルロジックを抽象化する

以下の例では、useToggleというカスタムフックを作成し、トグルのロジックを分離しています：

import { useState } from "react";

// カスタムフックの定義
function useToggle(initialState = false) {
  const [state, setState] = useState(initialState);

  const toggle = () => {
    setState((prev) => !prev);
  };

  return [state, toggle];
}

export default useToggle;

カスタムフックを使ったトグルの実装

カスタムフックを利用することで、複数のコンポーネントでトグルロジックを簡単に再利用できます。

import React from "react";
import useToggle from "./useToggle";

function ToggleComponent1() {
  const [isOn, toggle] = useToggle(); // 初期値はデフォルト false

  return (
    <button onClick={toggle}>
      {isOn ? "Component 1: ON" : "Component 1: OFF"}
    </button>
  );
}

function ToggleComponent2() {
  const [isOn, toggle] = useToggle(true); // 初期値を true に設定

  return (
    <button onClick={toggle}>
      {isOn ? "Component 2: ON" : "Component 2: OFF"}
    </button>
  );
}

function App() {
  return (
    <div>
      <ToggleComponent1 />
      <ToggleComponent2 />
    </div>
  );
}

export default App;

コードの説明

  1. カスタムフックuseToggleの作成：
    useToggleはトグル状態（state）と切り替え関数（toggle）を提供します。これにより、同じロジックを複数のコンポーネントで使い回すことができます。
  2. 初期値の設定：
    useToggleに初期値を渡すことで、各コンポーネントごとに異なる初期状態を設定できます。
  3. シンプルなロジック：
    フックの内部では、useStateと状態反転のロジックを組み合わせています。これにより、トグルの実装が明確で再利用可能になります。

実行結果

  • 2つのトグルボタンが表示され、それぞれ独立して動作します。
  • 1つ目のボタンは初期値false、2つ目のボタンは初期値trueで動作します。

カスタムフックを利用する利点

  1. ロジックの再利用：
    トグルのロジックを一箇所にまとめて管理できるため、複数のコンポーネントで同じ機能を実現する際に便利です。
  2. コードの簡潔化：
    各コンポーネント内で状態管理ロジックを記述する必要がなくなり、コードの可読性が向上します。
  3. 拡張性：
    カスタムフックを改良することで、新たな機能（例：トグル変更時のイベントトリガー）を簡単に追加できます。

次のステップ

カスタムフックを用いてトグルロジックを抽象化できたら、その機能を実際のアプリケーションで活用してみましょう。次は、トグル機能を使ったミニプロジェクトとして、タスクリストアプリの演習問題を紹介します。

演習問題：トグル機能を活用したミニプロジェクト

トグル機能を実際のアプリケーションでどのように活用するかを学ぶために、以下の演習問題に取り組んでみましょう。このプロジェクトでは、トグル機能を使って簡単なタスクリストアプリを作成します。

プロジェクトの概要

タスクリストアプリでは、次のような機能を実装します：

  1. ユーザーがタスクを追加できる。
  2. タスクの「完了」状態をトグルボタンで管理できる。
  3. 各タスクの完了状態が一覧で視覚的にわかる。
  4. タスクを削除できる。

完成形のUI例

  1. 各タスクに「完了/未完了」を切り替えるボタンが付いています。
  2. タスクが完了すると、その行が薄暗くなり、完了済みとわかる視覚効果があります。

実装例

以下に参考コードを示します。コードを基に自分で拡張してみてください。

import React, { useState } from "react";

function TaskApp() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, { text: newTask, isCompleted: false }]);
      setNewTask("");
    }
  };

  const toggleTask = (index) => {
    setTasks(
      tasks.map((task, i) =>
        i === index ? { ...task, isCompleted: !task.isCompleted } : task
      )
    );
  };

  const deleteTask = (index) => {
    setTasks(tasks.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h1>Task List</h1>
      <div>
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="Enter a new task"
        />
        <button onClick={addTask}>Add Task</button>
      </div>
      <ul>
        {tasks.map((task, index) => (
          <li
            key={index}
            style={{
              textDecoration: task.isCompleted ? "line-through" : "none",
              opacity: task.isCompleted ? 0.5 : 1,
            }}
          >
            {task.text}
            <button onClick={() => toggleTask(index)}>
              {task.isCompleted ? "Undo" : "Complete"}
            </button>
            <button onClick={() => deleteTask(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TaskApp;

コードの説明

  1. 状態管理：
  • tasks配列でタスクのリストを管理します。各タスクにはtextとisCompletedプロパティがあります。
  • newTaskは、新しいタスクの入力値を保持します。
  1. タスクの追加：
  • 入力フィールドでタスクを記述し、「Add Task」ボタンをクリックするとタスクがリストに追加されます。
  1. トグル機能：
  • 各タスクに完了/未完了を切り替えるトグルボタンを実装。タスクのisCompleted状態を反転させます。
  1. タスクの削除：
  • タスクをリストから削除する「Delete」ボタンを実装。
  1. スタイリング：
  • 完了済みのタスクには取り消し線と透明効果を加え、視覚的にわかりやすくしています。

拡張アイデア

以下の機能を追加して、アプリをさらに高度なものにしてみてください：

  1. タスクの優先度を設定できる。
  2. タスクをカテゴリー別に分けて管理する。
  3. タスクの完了状態をローカルストレージに保存する。
  4. タスクの追加時に期限や詳細説明を入力する。

次のステップ

このミニプロジェクトを完成させることで、トグル機能の実践的な応用方法が理解できます。次は、トグル機能実装時によく発生するエラーとそのトラブルシューティングについて解説します。

よくあるエラーとトラブルシューティング

トグル機能を実装する際に、状態管理やコンポーネントの挙動に関連するエラーが発生することがあります。ここでは、よくあるエラーの例とその原因、解決方法を解説します。

エラー1: 状態が切り替わらない

原因: setState関数を適切に使用していない。たとえば、以下のようなコード：

const handleToggle = () => {
  isOn = !isOn; // 直接状態を変更しようとしている
};

解決策: 状態を直接変更せず、setStateを利用します。

修正版：

const handleToggle = () => {
  setIsOn((prevState) => !prevState); // 正しく状態を更新
};

Reactでは状態を直接変更せず、常に状態変更関数を通じて更新する必要があります。

エラー2: ボタンをクリックしてもコンポーネントが再レンダリングされない

原因: 状態が変更されてもコンポーネントが再レンダリングされない場合、状態が正しく更新されていない可能性があります。たとえば、以下のようなコード：

const isOn = false; // 状態をuseStateではなく通常の変数として定義

解決策: 状態はuseStateで管理する必要があります。

修正版：

const [isOn, setIsOn] = useState(false); // useStateを使って状態を管理

useStateは、Reactが状態変更を検知し、コンポーネントの再レンダリングを引き起こす仕組みを提供します。

エラー3: 複数のトグルで同じ状態が共有される

原因: 複数のトグルボタンが同じ状態を参照している場合、すべてのボタンが同時に切り替わってしまう。たとえば、以下のようなコード：

const [isOn, setIsOn] = useState(false); // 同じ状態をすべてのボタンで共有

解決策: 各トグルごとに独立した状態を持たせるか、配列やオブジェクトで状態を管理します。

修正版（配列を使用）：

const [toggles, setToggles] = useState([false, false, false]);

const handleToggle = (index) => {
  setToggles((prev) =>
    prev.map((toggle, i) => (i === index ? !toggle : toggle))
  );
};

エラー4: 状態変更が反映されるまでに遅延がある

原因: 状態変更が非同期であることを理解していない場合に混乱が生じます。以下のようなコード：

const handleToggle = () => {
  setIsOn(!isOn); // 古い状態を基に更新している
  console.log(isOn); // ここではまだ状態が更新されていない
};

解決策: 状態変更後の値を利用する場合は、状態を直接参照するのではなく、useEffectを利用します。

修正版：

useEffect(() => {
  console.log("State updated:", isOn);
}, [isOn]); // 状態が変更されたときにログを出力

エラー5: トグル機能が多すぎてコードが複雑化する

原因: 同じロジックを複数回記述している場合、コードが冗長で保守性が低下します。

解決策: カスタムフックを使用してロジックを抽象化します（詳細は[a7]を参照）。

トラブルシューティングのベストプラクティス

  1. コンソールで状態を確認する：
    状態変更時にconsole.logを使い、状態の値を逐一確認します。
  2. React Developer Toolsを活用する：
    状態やPropsの流れを視覚的に確認できるツールを使用します。
  3. 状態を最小限にする：
    状態を必要最低限に抑えることで、エラーを防ぎやすくなります。
  4. 依存配列を正しく設定する：
    useEffectを使用する場合、依存配列が正確でないと意図しない副作用が発生します。

次のステップ

これらのトラブルシューティングを実践することで、トグル機能を含むReactアプリケーションの安定性を向上させることができます。最後に、これまで学んだ内容をまとめます。

まとめ

本記事では、Reactを使ったトグル機能の実装方法について、基本から応用例、さらには実際のプロジェクトへの応用までを解説しました。

  • 基本実装: useStateフックを使い、シンプルなトグルボタンを作成。
  • 応用例: 複数のトグルの管理や状態の共有を実現。
  • スタイリング: 状態を視覚的に明確化し、より魅力的なUIを構築。
  • 副作用の処理: useEffectを用いて、状態変更時のロジックを追加。
  • 再利用性の向上: カスタムフックでトグルロジックを抽象化。
  • トラブルシューティング: よくあるエラーの原因と解決方法を学習。

トグル機能の実装は、Reactの基本的な状態管理やUI構築の学習に最適です。今回の内容を基に、さらに複雑なUIや機能を実現し、実践的なスキルを磨いていきましょう。

React
React トグルボタン React Hooks

コメント

コメントする

目次