MENU
  1. ホーム
  2. React
  3. ReactとReduxで学ぶ！ウィザード形式のステップ管理完全ガイド

ReactとReduxで学ぶ！ウィザード形式のステップ管理完全ガイド

React

ReactとReduxを使えば、複雑なUIでも効率的に状態を管理しながら構築できます。本記事では、ユーザーが順序立てて操作できる「ウィザード形式」のUIを例に、Reduxを活用したステップごとの状態管理方法を詳しく解説します。ウィザード形式のUIは、アンケートや設定画面など、ユーザーが段階的に情報を入力する場面でよく使用されます。この記事を通じて、Reduxの基礎から具体的なウィザード作成までを学び、実践的なスキルを身につけましょう。

目次
  1. ウィザード形式の概要
    1. ウィザード形式のメリット
    2. 活用例
  2. Reduxを使う利点
    1. グローバルな状態管理
    2. 予測可能な動作
    3. コンポーネント間の依存性削減
    4. ミドルウェアでの拡張性
  3. 必要な準備と環境設定
    1. 1. プロジェクトの作成
    2. 2. 必要なライブラリのインストール
    3. 3. プロジェクト構造の準備
    4. 4. Reduxストアの作成
    5. 5. Reduxプロバイダーの設定
    6. 6. 動作確認
  4. Reduxの基本構造とセットアップ
    1. 1. Reduxの基本構造
    2. 2. Redux Toolkitの活用
    3. 3. Redux DevToolsの導入
    4. 4. 基本的な動作確認
  5. ステップ管理用のリデューサー作成
    1. 1. ステップ管理の要件
    2. 2. リデューサーの構築
    3. 3. アクションの動作確認
    4. 4. フィーチャーフォルダの管理
    5. 5. 次のステップ
  6. コンポーネントの作成と接続
    1. 1. コンポーネントの構成
    2. 2. WizardContainerの作成
    3. 3. StepComponentの作成
    4. 4. Reduxとの接続
    5. 5. 動作確認
    6. 6. 拡張可能な設計
  7. ステップナビゲーションの実装
    1. 1. ナビゲーションボタンの機能
    2. 2. ナビゲーションロジックの実装
    3. 3. 実装のポイント
    4. 4. コードの解説
    5. 5. 動作確認
    6. 6. 応用のアイデア
  8. 状態の保存と活用
    1. 1. 状態管理の要件
    2. 2. 状態管理の拡張
    3. 3. 入力データの保存
    4. 4. 入力データの活用
    5. 5. Reduxとの統合
    6. 6. 動作確認
  9. 応用例: 動的ウィザードの構築
    1. 1. 動的ウィザードの要件
    2. 2. 動的ステップリストの管理
    3. 3. 動的ステップの追加
    4. 4. 動的データ取得
    5. 5. 動的ウィザードのレンダリング
    6. 6. 応用例
    7. 7. 動作確認
  10. まとめ

ウィザード形式の概要


ウィザード形式とは、ユーザーが複数のステップに分けて操作を進めるUIの一種です。各ステップはシンプルな操作に集中できるように設計され、全体の進捗を可視化することで、ユーザーに安心感を与えます。

ウィザード形式のメリット


ウィザード形式を採用することで得られる利点には以下があります：

  • 操作の分割：情報を小さな単位に分割することで、ユーザーが負担を感じにくくなります。
  • 進捗の把握：現在の位置と残りのステップを確認できるため、ユーザーがゴールを意識しやすくなります。
  • エラーの軽減：ステップごとに入力内容を確認するため、入力ミスや漏れが減少します。

活用例


ウィザード形式は、以下のような場面でよく利用されます：

  • オンライン登録フォーム（名前、連絡先、支払い情報の入力）
  • セットアップウィザード（ソフトウェアやデバイスの初期設定）
  • アンケートフォーム（段階的に質問に答える形式）

こうした特性により、ウィザード形式は複雑なタスクを分かりやすく整理し、ユーザーの体験を向上させる重要なUIパターンです。

Reduxを使う利点

Reduxは、Reactアプリケーションの状態管理を効率化するための強力なツールです。ウィザード形式のUIにおいても、その利点を最大限に活かすことができます。

グローバルな状態管理


ウィザード形式では、複数のステップにわたって入力データや進捗状態を共有する必要があります。Reduxを使うことで、以下のようにグローバルな状態管理が可能になります：

  • 全体のステップ進行状況の一元管理
  • 各ステップで入力されたデータの即時アクセス
  • 再利用可能な状態の構築

予測可能な動作


Reduxの状態管理は、「アクション」「リデューサー」「ストア」の3つの基本構造に基づいています。この仕組みは状態の変更が明確で、バグの発見や修正が容易です。例えば：

  • 現在のステップを進めるアクションが明示的に定義される
  • 状態の変更履歴が追跡可能

コンポーネント間の依存性削減


Reduxを利用することで、ウィザードの各ステップが直接状態を共有する必要がなくなります。その結果：

  • 親子コンポーネント間のプロップス受け渡しが簡素化
  • 独立したコンポーネント設計が可能になり、再利用性が向上

ミドルウェアでの拡張性


Reduxミドルウェア（例：Redux ThunkやSaga）を使用することで、非同期操作やデータ保存機能も統合できます。これにより：

  • ステップごとの入力内容をAPIに保存
  • 特定の条件で次のステップへ進むロジックを柔軟に構築

Reduxを採用することで、ウィザードのステップ管理がよりスムーズで堅牢になります。次節では、プロジェクトのセットアップ手順を解説します。

必要な準備と環境設定

ReactとReduxを使ってウィザード形式のUIを構築するためには、まず適切な開発環境を整える必要があります。このセクションでは、基本的なセットアップ手順を解説します。

1. プロジェクトの作成


新しいReactプロジェクトを作成します。以下のコマンドを使用してください：

npx create-react-app redux-wizard
cd redux-wizard

このコマンドで、Reactアプリの基本構造が生成されます。

2. 必要なライブラリのインストール


Reduxを使用するために必要なパッケージをインストールします。以下のコマンドを実行してください：

npm install redux react-redux @reduxjs/toolkit
  • redux: 状態管理の中核となるライブラリ
  • react-redux: ReduxをReactと統合するためのライブラリ
  • @reduxjs/toolkit: Reduxの公式ツールキットで、設定を簡素化します

3. プロジェクト構造の準備


ウィザード形式の実装に適した構造を整えます。以下のようなディレクトリ構造を推奨します：

src/
├── components/    // UIコンポーネントを格納
├── features/      // Reduxのスライスやリデューサーを格納
├── store/         // Reduxストアを格納
└── App.js         // メインアプリケーション

4. Reduxストアの作成


まず、src/store/store.jsを作成し、以下のようにストアを初期化します：

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    // 各スライスをここに追加
  },
});

export default store;

5. Reduxプロバイダーの設定


src/index.jsで、ReduxのプロバイダーをReactアプリケーションに設定します：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

6. 動作確認


以上の手順を終えたら、npm startを実行してReactアプリが正しく動作することを確認します。

これで、ウィザード形式の構築に必要な開発環境が整いました。次のセクションでは、Reduxの基本構造について学びます。

Reduxの基本構造とセットアップ

Reduxは、Reactアプリケーションの状態管理をシンプルかつ強力にするためのツールです。このセクションでは、Reduxの基本構造とセットアップ方法を解説します。

1. Reduxの基本構造


Reduxは主に以下の3つの要素で構成されています：

アクション (Action)


状態を変更するための「指示書」の役割を果たします。アクションはtypeプロパティを持つオブジェクトであり、状態の変化を説明します。例えば：

const nextStep = { type: 'NEXT_STEP' };

リデューサー (Reducer)


アクションに基づいて状態を更新する純粋関数です。現在の状態とアクションを引数として受け取り、新しい状態を返します。例：

const initialState = { step: 1 };

function wizardReducer(state = initialState, action) {
  switch (action.type) {
    case 'NEXT_STEP':
      return { ...state, step: state.step + 1 };
    case 'PREV_STEP':
      return { ...state, step: state.step - 1 };
    default:
      return state;
  }
}

ストア (Store)


状態とアクションを管理する中心的な場所です。createStore関数を使用して作成します。例：

import { createStore } from 'redux';

const store = createStore(wizardReducer);

2. Redux Toolkitの活用


Redux Toolkitを使用することで、Reduxの設定が簡単になります。このツールキットでは、configureStoreやcreateSliceを活用します。

スライスの作成


Redux ToolkitのcreateSliceを使用して、アクションとリデューサーを簡単に定義できます。以下の例はウィザードのステップ管理用スライスです：

import { createSlice } from '@reduxjs/toolkit';

const wizardSlice = createSlice({
  name: 'wizard',
  initialState: { step: 1 },
  reducers: {
    nextStep: (state) => { state.step += 1; },
    prevStep: (state) => { state.step -= 1; },
    resetStep: (state) => { state.step = 1; },
  },
});

export const { nextStep, prevStep, resetStep } = wizardSlice.actions;
export default wizardSlice.reducer;

ストアの設定


スライスをストアに統合します：

import { configureStore } from '@reduxjs/toolkit';
import wizardReducer from '../features/wizardSlice';

const store = configureStore({
  reducer: {
    wizard: wizardReducer,
  },
});

export default store;

3. Redux DevToolsの導入


Redux DevToolsを使用すると、状態の変更履歴や現在の状態を確認できます。Redux Toolkitでは標準でサポートされています。

4. 基本的な動作確認


コンポーネントを作成し、現在のステップを表示することで動作を確認します：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { nextStep, prevStep } from '../features/wizardSlice';

const Wizard = () => {
  const step = useSelector((state) => state.wizard.step);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Current Step: {step}</h1>
      <button onClick={() => dispatch(prevStep())}>Previous</button>
      <button onClick={() => dispatch(nextStep())}>Next</button>
    </div>
  );
};

export default Wizard;

以上で、Reduxの基本構造とセットアップが完了です。次のセクションでは、ウィザードのステップ管理用リデューサーを詳しく構築していきます。

ステップ管理用のリデューサー作成

Reduxを使用してウィザード形式のステップを管理するためには、リデューサーを設計することが重要です。このセクションでは、ウィザードのステップを管理するためのリデューサーを作成します。

1. ステップ管理の要件


ウィザード形式では、以下の機能をリデューサーで実現する必要があります：

  • 次のステップに進む: 現在のステップ番号を増加させる。
  • 前のステップに戻る: 現在のステップ番号を減少させる。
  • 特定のステップにジャンプする: 任意のステップ番号に直接移動する。
  • 状態のリセット: ステップ番号を初期値に戻す。

2. リデューサーの構築


Redux ToolkitのcreateSliceを使用して、リデューサーを簡単に作成します。以下の例では、上記の機能を含むステップ管理用リデューサーを作成します。

import { createSlice } from '@reduxjs/toolkit';

const wizardSlice = createSlice({
  name: 'wizard',
  initialState: {
    step: 1,       // 現在のステップ番号
    totalSteps: 5, // ウィザードの総ステップ数
  },
  reducers: {
    nextStep: (state) => {
      if (state.step < state.totalSteps) {
        state.step += 1;
      }
    },
    prevStep: (state) => {
      if (state.step > 1) {
        state.step -= 1;
      }
    },
    jumpToStep: (state, action) => {
      const targetStep = action.payload;
      if (targetStep >= 1 && targetStep <= state.totalSteps) {
        state.step = targetStep;
      }
    },
    resetStep: (state) => {
      state.step = 1;
    },
  },
});

export const { nextStep, prevStep, jumpToStep, resetStep } = wizardSlice.actions;
export default wizardSlice.reducer;

3. アクションの動作確認


リデューサーをストアに統合し、アクションの動作を確認します：

import { configureStore } from '@reduxjs/toolkit';
import wizardReducer from './features/wizardSlice';

const store = configureStore({
  reducer: {
    wizard: wizardReducer,
  },
});

export default store;

動作確認のテストコード（オプション）：

store.dispatch(nextStep());
console.log(store.getState().wizard.step); // 2

store.dispatch(prevStep());
console.log(store.getState().wizard.step); // 1

store.dispatch(jumpToStep(3));
console.log(store.getState().wizard.step); // 3

store.dispatch(resetStep());
console.log(store.getState().wizard.step); // 1

4. フィーチャーフォルダの管理


リデューサーとアクションを含むファイルを、features/wizardSlice.jsに配置します。これにより、プロジェクト全体の構造が整理され、保守性が向上します。

5. 次のステップ


このリデューサーは、ウィザードのステップ管理の基盤となります。次に、これをReactコンポーネントと連携させ、ステップごとのUIを実装していきます。

次のステップでのウィザード管理がさらに具体的になるように準備完了です。修正点や詳細説明が必要な場合はお知らせください。

コンポーネントの作成と接続

Reduxのリデューサーを活用するために、Reactコンポーネントを作成してウィザードの各ステップを表示し、ステップ管理機能を実現します。このセクションでは、ReduxストアとReactコンポーネントを接続する方法を説明します。

1. コンポーネントの構成


ウィザード形式では、以下のコンポーネントを作成します：

  • WizardContainer: ウィザード全体のラッパーコンポーネント
  • StepComponent: 各ステップを描画する個別のコンポーネント

2. WizardContainerの作成


ウィザード全体の構造とステップ管理を行うWizardContainerコンポーネントを作成します。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { nextStep, prevStep } from '../features/wizardSlice';
import StepComponent from './StepComponent';

const WizardContainer = () => {
  const step = useSelector((state) => state.wizard.step); // 現在のステップ番号
  const totalSteps = useSelector((state) => state.wizard.totalSteps); // 総ステップ数
  const dispatch = useDispatch();

  return (
    <div>
      <h1>ウィザードのステップ管理</h1>
      <StepComponent step={step} />
      <div>
        <button
          onClick={() => dispatch(prevStep())}
          disabled={step === 1}
        >
          戻る
        </button>
        <button
          onClick={() => dispatch(nextStep())}
          disabled={step === totalSteps}
        >
          次へ
        </button>
      </div>
      <p>現在のステップ: {step} / {totalSteps}</p>
    </div>
  );
};

export default WizardContainer;

3. StepComponentの作成


StepComponentは、現在のステップに応じて動的にコンテンツを表示します。

import React from 'react';

const StepComponent = ({ step }) => {
  switch (step) {
    case 1:
      return <div>ステップ1: 基本情報を入力してください。</div>;
    case 2:
      return <div>ステップ2: 詳細情報を入力してください。</div>;
    case 3:
      return <div>ステップ3: 確認画面です。</div>;
    case 4:
      return <div>ステップ4: 完了！お疲れ様でした。</div>;
    default:
      return <div>無効なステップです。</div>;
  }
};

export default StepComponent;

4. Reduxとの接続


これらのコンポーネントをApp.jsでレンダリングし、Reduxストアと連携させます。

import React from 'react';
import WizardContainer from './components/WizardContainer';

const App = () => {
  return (
    <div>
      <WizardContainer />
    </div>
  );
};

export default App;

5. 動作確認


npm startを実行し、以下を確認します：

  • 「次へ」「戻る」ボタンでステップが正しく遷移すること。
  • 現在のステップが画面に表示され、各ステップのコンテンツが切り替わること。

6. 拡張可能な設計

  • 動的ステップ追加: Reduxの状態を変更することで、ステップ数を動的に増減できます。
  • 入力内容の管理: 各ステップでのユーザー入力をReduxで保持するように拡張します。

これで、ウィザードの各ステップを表示し、状態管理をReactコンポーネントと連携させる方法が完成しました。次に、ステップ間のナビゲーション機能を実装します。

ステップナビゲーションの実装

ウィザード形式のUIでは、「次へ」や「戻る」ボタンを使ってユーザーが直感的にステップを移動できるナビゲーション機能が必要です。このセクションでは、ReduxとReactを組み合わせてステップナビゲーションを実装します。

1. ナビゲーションボタンの機能


ウィザードには次の機能を持つナビゲーションボタンを実装します：

  • 次へ: 現在のステップを1つ進める（最終ステップでは無効）。
  • 戻る: 現在のステップを1つ戻す（最初のステップでは無効）。
  • ジャンプ: 特定のステップへ直接移動する。

2. ナビゲーションロジックの実装


WizardContainerコンポーネントを修正して、ナビゲーションロジックを追加します。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { nextStep, prevStep, jumpToStep } from '../features/wizardSlice';
import StepComponent from './StepComponent';

const WizardContainer = () => {
  const step = useSelector((state) => state.wizard.step); // 現在のステップ
  const totalSteps = useSelector((state) => state.wizard.totalSteps); // 総ステップ数
  const dispatch = useDispatch();

  const handleJump = (targetStep) => {
    dispatch(jumpToStep(targetStep));
  };

  return (
    <div>
      <h1>ウィザード形式のナビゲーション</h1>
      <StepComponent step={step} />
      <div>
        <button
          onClick={() => dispatch(prevStep())}
          disabled={step === 1}
        >
          戻る
        </button>
        <button
          onClick={() => dispatch(nextStep())}
          disabled={step === totalSteps}
        >
          次へ
        </button>
      </div>
      <div>
        <h3>ステップを選択</h3>
        {[...Array(totalSteps).keys()].map((index) => {
          const stepNumber = index + 1;
          return (
            <button
              key={stepNumber}
              onClick={() => handleJump(stepNumber)}
              disabled={step === stepNumber}
            >
              ステップ {stepNumber}
            </button>
          );
        })}
      </div>
      <p>現在のステップ: {step} / {totalSteps}</p>
    </div>
  );
};

export default WizardContainer;

3. 実装のポイント

  • 戻るボタンの無効化: 現在のステップが1の場合、「戻る」ボタンを無効化。
  • 次へボタンの無効化: 現在のステップが最終ステップの場合、「次へ」ボタンを無効化。
  • ジャンプボタン: ユーザーが任意のステップを直接選択できるボタンを用意。

4. コードの解説

  • dispatch(prevStep())とdispatch(nextStep())で、ステップの進行と後退を実現。
  • handleJump関数で、jumpToStepアクションを使用して特定のステップに直接移動。
  • ボタンのdisabledプロパティで、無効な操作を防止。

5. 動作確認


npm startでアプリケーションを起動し、以下を確認します：

  • 「次へ」「戻る」ボタンで正常にステップを移動できること。
  • 任意のステップボタンで直接移動できること。
  • 不正な操作（例：最初のステップで「戻る」をクリック）が防止されていること。

6. 応用のアイデア

  • 条件付きステップ移動: 特定のステップに進む前にバリデーションを追加。
  • ステップ進行の履歴表示: 過去に訪問したステップを強調表示。

これで、ウィザード形式のステップナビゲーションが完成しました。次は、ステップごとの入力状態をReduxで保存し、活用する方法を解説します。

状態の保存と活用

ウィザード形式では、各ステップでユーザーが入力した情報を一時的に保存し、次のステップで利用したり、最終確認画面でまとめて表示する必要があります。このセクションでは、Reduxを使って入力データを状態として保存し、それを活用する方法を解説します。

1. 状態管理の要件


状態管理のために、以下の機能を実装します：

  • 入力内容の保存: 各ステップでユーザーが入力したデータをReduxストアに保存。
  • 状態の取得: ステップ間で共有するため、保存されたデータを取得して活用。
  • 入力データのリセット: ウィザードを最初からやり直す際に状態をクリア。

2. 状態管理の拡張


wizardSliceを修正し、入力データを保存するための状態とアクションを追加します。

import { createSlice } from '@reduxjs/toolkit';

const wizardSlice = createSlice({
  name: 'wizard',
  initialState: {
    step: 1,       // 現在のステップ番号
    totalSteps: 5, // ウィザードの総ステップ数
    formData: {},  // 各ステップの入力データを保存するオブジェクト
  },
  reducers: {
    nextStep: (state) => {
      if (state.step < state.totalSteps) {
        state.step += 1;
      }
    },
    prevStep: (state) => {
      if (state.step > 1) {
        state.step -= 1;
      }
    },
    updateFormData: (state, action) => {
      const { step, data } = action.payload;
      state.formData[step] = { ...state.formData[step], ...data };
    },
    resetWizard: (state) => {
      state.step = 1;
      state.formData = {};
    },
  },
});

export const { nextStep, prevStep, updateFormData, resetWizard } = wizardSlice.actions;
export default wizardSlice.reducer;

3. 入力データの保存


各ステップでの入力データを保存するためのフォームコンポーネントを作成します。

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { updateFormData } from '../features/wizardSlice';

const StepForm = ({ step }) => {
  const [input, setInput] = useState('');
  const dispatch = useDispatch();

  const handleSave = () => {
    dispatch(updateFormData({ step, data: { input } }));
  };

  return (
    <div>
      <h2>ステップ {step} の入力</h2>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="データを入力してください"
      />
      <button onClick={handleSave}>保存</button>
    </div>
  );
};

export default StepForm;

4. 入力データの活用


保存されたデータを他のステップや確認画面で利用します。

import React from 'react';
import { useSelector } from 'react-redux';

const Summary = () => {
  const formData = useSelector((state) => state.wizard.formData);

  return (
    <div>
      <h2>入力内容の確認</h2>
      {Object.keys(formData).map((step) => (
        <div key={step}>
          <h3>ステップ {step}</h3>
          <p>{formData[step].input}</p>
        </div>
      ))}
    </div>
  );
};

export default Summary;

5. Reduxとの統合


WizardContainer内でStepFormとSummaryコンポーネントを組み合わせて使用します。

import React from 'react';
import { useSelector } from 'react-redux';
import StepForm from './StepForm';
import Summary from './Summary';

const WizardContainer = () => {
  const step = useSelector((state) => state.wizard.step);
  const totalSteps = useSelector((state) => state.wizard.totalSteps);

  return (
    <div>
      {step <= totalSteps ? <StepForm step={step} /> : <Summary />}
    </div>
  );
};

export default WizardContainer;

6. 動作確認


アプリを起動して以下を確認します：

  • 各ステップで入力したデータが保存される。
  • 確認画面にすべてのデータが正しく表示される。
  • ウィザードをリセットすると入力データがクリアされる。

これで、ウィザードの各ステップの入力状態をReduxで管理し、活用する方法が完成しました。次は、動的なウィザード構築について解説します。

応用例: 動的ウィザードの構築

ウィザード形式のUIをさらに柔軟にするには、動的に生成されるステップをサポートする設計が有効です。このセクションでは、条件に応じてステップを動的に追加・変更する方法を解説します。

1. 動的ウィザードの要件


動的なウィザード構築では、以下の機能が必要です：

  • 条件に応じたステップの追加: ユーザーの入力や選択に基づき、ステップを動的に変更。
  • ステップの内容をAPIから取得: ステップのデータをサーバーから動的に取得して表示。

2. 動的ステップリストの管理


Reduxストアにステップリストを追加し、動的に管理します。

import { createSlice } from '@reduxjs/toolkit';

const wizardSlice = createSlice({
  name: 'wizard',
  initialState: {
    step: 1,
    steps: [
      { id: 1, content: '基本情報の入力' },
      { id: 2, content: '詳細情報の入力' },
    ],
    formData: {},
  },
  reducers: {
    nextStep: (state) => {
      if (state.step < state.steps.length) {
        state.step += 1;
      }
    },
    prevStep: (state) => {
      if (state.step > 1) {
        state.step -= 1;
      }
    },
    addStep: (state, action) => {
      state.steps.push(action.payload);
    },
    updateFormData: (state, action) => {
      const { step, data } = action.payload;
      state.formData[step] = { ...state.formData[step], ...data };
    },
    resetWizard: (state) => {
      state.step = 1;
      state.steps = [
        { id: 1, content: '基本情報の入力' },
        { id: 2, content: '詳細情報の入力' },
      ];
      state.formData = {};
    },
  },
});

export const { nextStep, prevStep, addStep, updateFormData, resetWizard } = wizardSlice.actions;
export default wizardSlice.reducer;

3. 動的ステップの追加


特定の条件を満たした場合に、新しいステップを追加します。

import React from 'react';
import { useDispatch } from 'react-redux';
import { addStep } from '../features/wizardSlice';

const DynamicStepButton = () => {
  const dispatch = useDispatch();

  const handleAddStep = () => {
    dispatch(addStep({ id: 3, content: '動的に追加されたステップ' }));
  };

  return (
    <button onClick={handleAddStep}>ステップを追加</button>
  );
};

export default DynamicStepButton;

4. 動的データ取得


ステップのデータをサーバーから取得し、ウィザードに反映します。

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { addStep } from '../features/wizardSlice';

const FetchSteps = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const fetchSteps = async () => {
      const response = await fetch('/api/steps');
      const data = await response.json();
      data.forEach((step) => {
        dispatch(addStep(step));
      });
    };

    fetchSteps();
  }, [dispatch]);

  return null;
};

export default FetchSteps;

5. 動的ウィザードのレンダリング


現在のステップを動的に表示するようにWizardContainerを修正します。

import React from 'react';
import { useSelector } from 'react-redux';

const WizardContainer = () => {
  const step = useSelector((state) => state.wizard.step);
  const steps = useSelector((state) => state.wizard.steps);

  return (
    <div>
      <h1>{steps[step - 1]?.content || '無効なステップ'}</h1>
    </div>
  );
};

export default WizardContainer;

6. 応用例

  • 条件付きウィザード: 質問の回答に基づき、必要なステップだけを表示。
  • 非同期ウィザード: 各ステップをAPIで取得し、リアルタイムにレンダリング。

7. 動作確認

  • ステップが動的に追加され、正常にナビゲートできること。
  • サーバーから取得したデータが反映されること。

これで動的ウィザードが完成しました。柔軟で拡張性の高いUIを実現できるようになります。

次のセクションでは、この記事のまとめを簡潔に行い、構築した内容を振り返ります。修正や追加のご希望があればお知らせください！

まとめ

本記事では、ReactとReduxを使用してウィザード形式のステップ管理UIを構築する方法を解説しました。Reduxによる状態管理を活用し、基本的なステップ遷移から入力データの保存、動的なステップの生成までを実装しました。これにより、ウィザード形式のUIを柔軟かつ効率的に構築する手法を学ぶことができました。

ポイントを振り返ると以下の通りです：

  • Reduxの基礎: ステップ管理用のリデューサーとアクションの設計。
  • 状態の活用: 各ステップの入力データの保存と再利用。
  • 動的な構築: 条件に応じたステップ追加や外部データ取得の実装。

これらの知識を活用することで、複雑なUIもシンプルでメンテナンス性の高いコードで実現できます。次のプロジェクトでぜひ試してみてください！

React
React 状態管理 Redux ウィザード

コメント

コメントする

目次
  1. ウィザード形式の概要
    1. ウィザード形式のメリット
    2. 活用例
  2. Reduxを使う利点
    1. グローバルな状態管理
    2. 予測可能な動作
    3. コンポーネント間の依存性削減
    4. ミドルウェアでの拡張性
  3. 必要な準備と環境設定
    1. 1. プロジェクトの作成
    2. 2. 必要なライブラリのインストール
    3. 3. プロジェクト構造の準備
    4. 4. Reduxストアの作成
    5. 5. Reduxプロバイダーの設定
    6. 6. 動作確認
  4. Reduxの基本構造とセットアップ
    1. 1. Reduxの基本構造
    2. 2. Redux Toolkitの活用
    3. 3. Redux DevToolsの導入
    4. 4. 基本的な動作確認
  5. ステップ管理用のリデューサー作成
    1. 1. ステップ管理の要件
    2. 2. リデューサーの構築
    3. 3. アクションの動作確認
    4. 4. フィーチャーフォルダの管理
    5. 5. 次のステップ
  6. コンポーネントの作成と接続
    1. 1. コンポーネントの構成
    2. 2. WizardContainerの作成
    3. 3. StepComponentの作成
    4. 4. Reduxとの接続
    5. 5. 動作確認
    6. 6. 拡張可能な設計
  7. ステップナビゲーションの実装
    1. 1. ナビゲーションボタンの機能
    2. 2. ナビゲーションロジックの実装
    3. 3. 実装のポイント
    4. 4. コードの解説
    5. 5. 動作確認
    6. 6. 応用のアイデア
  8. 状態の保存と活用
    1. 1. 状態管理の要件
    2. 2. 状態管理の拡張
    3. 3. 入力データの保存
    4. 4. 入力データの活用
    5. 5. Reduxとの統合
    6. 6. 動作確認
  9. 応用例: 動的ウィザードの構築
    1. 1. 動的ウィザードの要件
    2. 2. 動的ステップリストの管理
    3. 3. 動的ステップの追加
    4. 4. 動的データ取得
    5. 5. 動的ウィザードのレンダリング
    6. 6. 応用例
    7. 7. 動作確認
  10. まとめ