Redux ToolkitのextraReducersで非同期アクションを効率的に処理する方法

Redux ToolkitのextraReducersを活用した非同期アクション処理は、モダンなReactアプリケーション開発において非常に重要なスキルです。非同期処理はデータのフェッチやバックエンドとの通信に欠かせない要素ですが、従来のReduxでは手間がかかり、複雑なコードを書く必要がありました。Redux Toolkitを使用することで、このプロセスを簡潔かつ効率的に管理できます。本記事では、createAsyncThunkとextraReducersを中心に、非同期アクションの処理方法を具体的なコード例を交えてわかりやすく解説します。

Redux ToolkitとextraReducersの基礎知識

Redux Toolkitは、Reduxを効率的に使用するための公式ツールセットで、コード量を減らしながら、シンプルで強力なステート管理を可能にします。その中でもextraReducersは、非同期アクションの処理や外部のスライスからのアクションをリッスンするための機能を提供します。

Redux Toolkitとは

Redux Toolkitは、Reduxの設定や一般的なパターンを簡素化するためのライブラリです。標準的なツールとして以下の機能を提供します：

createSliceによる簡潔なスライス定義
createAsyncThunkを用いた非同期アクションの定義
デフォルトで組み込まれたミドルウェアと簡単な設定

extraReducersの役割

extraReducersは、スライスの中で定義される特殊なプロパティで、以下のような用途に使用されます：

createAsyncThunkによって生成されたアクションを処理する
他のスライスや外部ライブラリからのアクションをリッスンする

extraReducersを活用することで、スライスの分離と再利用性が向上し、コードベースが整然としたものになります。次章では、非同期アクションの概念を深掘りしていきます。

非同期アクションの基本概念

非同期アクションは、バックエンドからのデータ取得や外部APIとの通信など、処理に時間がかかる操作をReduxで管理するための仕組みです。非同期アクションは、状態を管理するだけでなく、通信の成功・失敗や進行状況を適切に反映させるための工夫が必要です。

非同期処理とRedux

Reduxは通常、同期的な状態遷移を管理する設計になっています。しかし、非同期処理を扱う場合、以下の課題が発生します：

リクエストの開始・成功・失敗をトラッキングする必要がある
状態遷移が複雑になり、コードが読みにくくなる
非同期処理が完了するまでのUIの更新タイミングを適切に管理する必要がある

非同期アクションのライフサイクル

非同期アクションのライフサイクルは以下の3つに分かれます：

リクエスト開始（pending）: 非同期処理が開始され、ローディング状態になる。
リクエスト成功（fulfilled）: 非同期処理が正常に完了し、結果が返ってくる。
リクエスト失敗（rejected）: 非同期処理が失敗し、エラーが発生する。

Redux Toolkitの非同期処理における解決策

Redux Toolkitでは、createAsyncThunkを使用することで、非同期アクションの定義と処理を簡潔に行うことができます。このツールにより、上記のライフサイクルが自動的に管理され、余分なコードを書く手間が省けます。

次章では、createAsyncThunkを使用した非同期アクションの具体的な活用方法について説明します。

createAsyncThunkの活用方法

createAsyncThunkは、Redux Toolkitが提供する非同期アクション生成のためのユーティリティで、複雑な非同期処理を簡単に管理できるようにします。このツールを使用すると、非同期アクションのライフサイクル（pending、fulfilled、rejected）が自動的に扱われ、コードが整理されます。

createAsyncThunkの基本構文

createAsyncThunkは以下の構文で使用します：

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

export const fetchData = createAsyncThunk(
  'data/fetchData', // アクションタイプ
  async (arg, thunkAPI) => {
    try {
      const response = await fetch('/api/data');
      if (!response.ok) {
        throw new Error('データの取得に失敗しました');
      }
      return await response.json(); // 成功時のデータ
    } catch (error) {
      return thunkAPI.rejectWithValue(error.message); // エラー時の処理
    }
  }
);

パラメータの解説

アクションタイプ（'data/fetchData'）
アクションの種類を識別するための文字列を指定します。
ペイロード作成関数（async (arg, thunkAPI)）
非同期処理のロジックを記述します。この関数は引数を受け取り、成功時にはデータを返し、エラー時にはrejectWithValueを使ってエラーメッセージを返します。

非同期処理の状態管理

createAsyncThunkで生成されたアクションは、自動的に以下の3つの状態を持ちます：

pending: 非同期処理の開始。ローディング状態の表示に利用します。
fulfilled: 非同期処理の成功。取得したデータをストアに格納します。
rejected: 非同期処理の失敗。エラーメッセージを表示したり、リトライのロジックを実装します。

使用例

上記で作成したfetchDataをextraReducersで利用する方法を次章で具体的に解説します。以下はその概要例です：

import { createSlice } from '@reduxjs/toolkit';
import { fetchData } from './asyncActions';

const dataSlice = createSlice({
  name: 'data',
  initialState: { loading: false, data: null, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  },
});

次章では、extraReducersを使用した非同期アクションの詳細なステート管理について深掘りしていきます。

extraReducersを使ったステート管理の実例

extraReducersは、createAsyncThunkで生成された非同期アクションをスライス内で管理する際に使用します。このセクションでは、具体的なコード例を通して、extraReducersを活用したステート管理の方法を詳しく解説します。

初期状態の定義

非同期アクションの管理には、リクエストの進行状況（loading）、取得したデータ（data）、エラーメッセージ（error）を扱う状態を定義することが一般的です。

const initialState = {
  loading: false,
  data: null,
  error: null,
};

非同期アクションの設定

前章で作成したfetchDataアクションを利用して、状態管理を実装します。

import { createSlice } from '@reduxjs/toolkit';
import { fetchData } from './asyncActions';

const dataSlice = createSlice({
  name: 'data',
  initialState,
  reducers: {}, // 同期アクションはここに定義
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.loading = true; // リクエストが開始されたことを示す
        state.error = null;  // エラー状態をリセット
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.loading = false;  // リクエスト完了
        state.data = action.payload; // データを保存
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.loading = false;  // リクエスト失敗
        state.error = action.payload; // エラー内容を保存
      });
  },
});

export default dataSlice.reducer;

ステート管理の流れ

リクエスト開始時（pending）
ローディング状態をtrueに設定し、UIでローディングスピナーなどを表示します。
リクエスト成功時（fulfilled）
サーバーから取得したデータをstate.dataに格納し、ローディングを終了します。
リクエスト失敗時（rejected）
エラーメッセージをstate.errorに格納し、適切なエラーメッセージをUIに表示します。

Reactコンポーネントでの使用例

このステート管理をReactコンポーネントで活用する方法を以下に示します。

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchData } from './asyncActions';

const DataComponent = () => {
  const dispatch = useDispatch();
  const { loading, data, error } = useSelector((state) => state.data);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default DataComponent;

extraReducersの利点

明確な状態管理: 非同期アクションの各フェーズを分けて記述できるため、状態管理が直感的になります。
モジュール化: 非同期処理をスライス内に閉じ込めることで、コードの再利用性と保守性が向上します。

次章では、非同期アクション処理とUI更新のベストプラクティスについて解説します。

状態遷移とUI更新のベストプラクティス

非同期処理を効果的に管理するためには、状態遷移とUIの連携をスムーズに行うことが重要です。非同期処理の進行状況を明示的に示し、ユーザーに適切なフィードバックを提供することで、アプリケーションのユーザーエクスペリエンスを向上させることができます。ここでは、そのベストプラクティスを解説します。

ローディング状態の管理

非同期処理の開始から終了までのローディング状態をUIで明確に表示することで、ユーザーに処理中であることを伝えます。

const LoadingSpinner = () => <div className="spinner">Loading...</div>;

const DataComponent = () => {
  const { loading } = useSelector((state) => state.data);

  return (
    <div>
      {loading && <LoadingSpinner />}
      {/* データ表示コンポーネント */}
    </div>
  );
};

ポイント

ローディング中に操作を無効化し、誤操作を防ぐ。
視覚的にわかりやすいローディングアイコンやスケルトンUIを使用する。

成功時の状態更新とUIの同期

非同期処理が成功した場合、取得したデータを即座に反映することが重要です。extraReducersを用いて、fulfilled状態でデータをストアに格納し、UIコンポーネントで適切にレンダリングします。

const DataComponent = () => {
  const { data } = useSelector((state) => state.data);

  return (
    <div>
      <h1>Fetched Data</h1>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>No data available</p>}
    </div>
  );
};

エラー状態の表示

非同期処理が失敗した場合、エラーメッセージをユーザーに通知します。ユーザーが次のアクションを選択できるように、再試行ボタンやエラーログを提供するのが効果的です。

const DataComponent = () => {
  const { error } = useSelector((state) => state.data);
  const dispatch = useDispatch();

  return (
    <div>
      {error && (
        <div>
          <p>Error: {error}</p>
          <button onClick={() => dispatch(fetchData())}>Retry</button>
        </div>
      )}
    </div>
  );
};

ポイント

エラー内容を簡潔に説明し、技術的な詳細は避ける。
再試行やサポートリンクを提供してユーザーをサポートする。

状態とUI更新を分離する

状態管理ロジックをReduxスライスに集中させ、UIコンポーネントはその状態を読み取るだけにすることで、コードの保守性が向上します。

例：状態管理とUIの分離

状態管理（Reduxスライス）: 非同期処理の状態を管理し、アクションに応じて状態を更新します。
UIコンポーネント: 状態を読み取り、適切な表示を行います。

ベストプラクティスの要約

明確なローディング状態を表示してユーザーの混乱を防ぐ。
成功時には迅速にデータを反映し、エラー時には有用な情報を提供する。
状態管理とUIロジックを分離し、コードを簡潔に保つ。

次章では、非同期アクション処理で特に重要なエラーハンドリングとデバッグ方法について詳しく解説します。

エラーハンドリングとデバッグ方法

非同期アクションの処理では、エラーが発生することは避けられません。エラーハンドリングとデバッグを適切に実装することで、問題解決をスムーズに進め、ユーザー体験を向上させることができます。このセクションでは、エラーハンドリングの設計方法とデバッグの実践的なアプローチを解説します。

エラーハンドリングの基本設計

createAsyncThunkでのエラーハンドリング

createAsyncThunkには、エラーが発生した際にエラーメッセージを返すthunkAPI.rejectWithValueが用意されています。これを使用することで、エラー内容を詳細に管理できます。

export const fetchData = createAsyncThunk(
  'data/fetchData',
  async (_, thunkAPI) => {
    try {
      const response = await fetch('/api/data');
      if (!response.ok) {
        throw new Error('データ取得に失敗しました');
      }
      return await response.json();
    } catch (error) {
      return thunkAPI.rejectWithValue(error.message);
    }
  }
);

extraReducersでのエラーハンドリング

エラー状態をReduxストアに保存し、UIで簡潔にエラーを表示します。

const dataSlice = createSlice({
  name: 'data',
  initialState: { loading: false, data: null, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload || '不明なエラーが発生しました';
      });
  },
});

UIコンポーネントでのエラー表示

エラー発生時に適切なフィードバックをユーザーに表示します。

const ErrorDisplay = ({ error, retry }) => (
  <div>
    <p>Error: {error}</p>
    <button onClick={retry}>Retry</button>
  </div>
);

const DataComponent = () => {
  const { error } = useSelector((state) => state.data);
  const dispatch = useDispatch();

  if (error) {
    return <ErrorDisplay error={error} retry={() => dispatch(fetchData())} />;
  }

  return <div>データを表示中...</div>;
};

デバッグのアプローチ

Redux DevToolsの活用

Redux DevToolsを使えば、アクションのトリガーや状態の変化を可視化できます。特に非同期アクションのpending→fulfilled→rejectedの遷移を確認するのに有効です。

ロギング

非同期処理の途中でデータやエラーをログに記録することで、問題箇所を特定しやすくなります。

export const fetchData = createAsyncThunk(
  'data/fetchData',
  async (_, thunkAPI) => {
    try {
      const response = await fetch('/api/data');
      console.log('API Response:', response); // ログ
      if (!response.ok) {
        throw new Error('データ取得に失敗しました');
      }
      return await response.json();
    } catch (error) {
      console.error('Fetch Error:', error); // エラーのログ
      return thunkAPI.rejectWithValue(error.message);
    }
  }
);

エラー原因の切り分け

通信エラー: ネットワーク接続が不安定な場合。response.okのチェックで検出。
データフォーマットエラー: APIレスポンスが想定外の形式である場合。response.json()で例外が発生。
ロジックエラー: 間違った状態遷移やアクションのディスパッチの欠落。

ベストプラクティス

予測可能なエラー処理: サーバーエラーやネットワークエラーを明確に分離する。
ユーザーへの明確なフィードバック: エラーメッセージを簡潔かつ有用に伝える。
ロギングの徹底: デバッグ情報を詳細に記録する。
ツールの活用: Redux DevToolsやブラウザのデバッガを活用して状態変化を追跡する。

次章では、具体的な応用例として、extraReducersを使用したデータフェッチングと更新処理の実装例を紹介します。

応用例：データフェッチングと更新処理

extraReducersを活用することで、非同期アクションを効率的に管理できます。このセクションでは、データのフェッチと更新を組み合わせた実践的な例を通して、その応用方法を解説します。

シナリオ設定

以下のシナリオを考えます：

ユーザーリストをバックエンドから取得する。
ユーザー情報を更新し、その結果をバックエンドに送信する。

コード例

非同期アクションの定義

2つのcreateAsyncThunkアクションを定義します。

ユーザーリストの取得。
ユーザー情報の更新。

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

// ユーザーリスト取得
export const fetchUsers = createAsyncThunk('users/fetchUsers', async (_, thunkAPI) => {
  try {
    const response = await fetch('/api/users');
    if (!response.ok) throw new Error('ユーザーリストの取得に失敗しました');
    return await response.json();
  } catch (error) {
    return thunkAPI.rejectWithValue(error.message);
  }
});

// ユーザー情報更新
export const updateUser = createAsyncThunk('users/updateUser', async (user, thunkAPI) => {
  try {
    const response = await fetch(`/api/users/${user.id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user),
    });
    if (!response.ok) throw new Error('ユーザー情報の更新に失敗しました');
    return await response.json();
  } catch (error) {
    return thunkAPI.rejectWithValue(error.message);
  }
});

スライスの作成

スライスを作成して、extraReducersを用いて非同期アクションを処理します。

import { createSlice } from '@reduxjs/toolkit';
import { fetchUsers, updateUser } from './userActions';

const userSlice = createSlice({
  name: 'users',
  initialState: { loading: false, users: [], error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false;
        state.users = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      })
      .addCase(updateUser.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(updateUser.fulfilled, (state, action) => {
        state.loading = false;
        const updatedUser = action.payload;
        state.users = state.users.map((user) =>
          user.id === updatedUser.id ? updatedUser : user
        );
      })
      .addCase(updateUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  },
});

export default userSlice.reducer;

Reactコンポーネントでの活用

ユーザーリストの表示と更新

非同期アクションをディスパッチしてデータを取得し、更新を反映します。

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUsers, updateUser } from './userActions';

const UserList = () => {
  const dispatch = useDispatch();
  const { loading, users, error } = useSelector((state) => state.users);
  const [selectedUser, setSelectedUser] = useState(null);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  const handleUpdate = (user) => {
    const updatedUser = { ...user, name: 'Updated Name' };
    dispatch(updateUser(updatedUser));
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name}
            <button onClick={() => handleUpdate(user)}>Update</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

ポイント

非同期処理の分離: 非同期ロジックはスライスに集中させ、コンポーネントは状態を使用するだけにする。
エラーの対処: エラーが発生した場合に明確なフィードバックを提供する。
データ更新の効率化: ローカル状態の更新を優先し、必要に応じて再取得を行う。

次章では、演習として、extraReducersを使用した非同期アクション実装に取り組む練習問題を提示します。

演習：extraReducersを使った非同期アクション実装

ここでは、extraReducersを使用して非同期アクションを実装する練習問題を提供します。この演習を通じて、非同期アクションの定義と状態管理の流れを実践的に理解できます。

練習問題の概要

以下のシナリオを実装してください：

シナリオ:

タスク管理アプリでタスクをサーバーから取得する。
新しいタスクを追加する機能を実装する。

要件

サーバーからタスクをフェッチするfetchTasks非同期アクションを定義する。
サーバーにタスクを追加するaddTask非同期アクションを定義する。
取得したタスクをリスト表示し、新しいタスクを追加できるUIを作成する。

1. 非同期アクションの定義

以下の関数を作成してください：

fetchTasks: /api/tasksからタスクリストを取得。
addTask: 新しいタスクをPOSTリクエストでサーバーに送信。

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

// タスクをフェッチ
export const fetchTasks = createAsyncThunk('tasks/fetchTasks', async (_, thunkAPI) => {
  try {
    const response = await fetch('/api/tasks');
    if (!response.ok) throw new Error('タスクの取得に失敗しました');
    return await response.json();
  } catch (error) {
    return thunkAPI.rejectWithValue(error.message);
  }
});

// タスクを追加
export const addTask = createAsyncThunk('tasks/addTask', async (task, thunkAPI) => {
  try {
    const response = await fetch('/api/tasks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(task),
    });
    if (!response.ok) throw new Error('タスクの追加に失敗しました');
    return await response.json();
  } catch (error) {
    return thunkAPI.rejectWithValue(error.message);
  }
});

2. スライスの作成

以下の構成でtaskSliceを作成してください：

初期状態: loading, tasks, errorを含む。
extraReducers: fetchTasksとaddTaskを処理。

import { createSlice } from '@reduxjs/toolkit';
import { fetchTasks, addTask } from './taskActions';

const taskSlice = createSlice({
  name: 'tasks',
  initialState: { loading: false, tasks: [], error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchTasks.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchTasks.fulfilled, (state, action) => {
        state.loading = false;
        state.tasks = action.payload;
      })
      .addCase(fetchTasks.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      })
      .addCase(addTask.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(addTask.fulfilled, (state, action) => {
        state.loading = false;
        state.tasks.push(action.payload);
      })
      .addCase(addTask.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  },
});

export default taskSlice.reducer;

3. Reactコンポーネントの実装

以下の機能を持つコンポーネントを作成してください：

タスクをリスト表示。
新しいタスクを追加するフォームを提供。

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchTasks, addTask } from './taskActions';

const TaskManager = () => {
  const dispatch = useDispatch();
  const { loading, tasks, error } = useSelector((state) => state.tasks);
  const [newTask, setNewTask] = useState('');

  useEffect(() => {
    dispatch(fetchTasks());
  }, [dispatch]);

  const handleAddTask = () => {
    if (newTask.trim()) {
      dispatch(addTask({ title: newTask }));
      setNewTask('');
    }
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Task Manager</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="New Task"
      />
      <button onClick={handleAddTask}>Add Task</button>
    </div>
  );
};

export default TaskManager;

課題

エラーハンドリングを改善して、より詳細なメッセージをUIに表示する。
フォームにバリデーションを追加して、空入力や重複を防ぐ。
削除アクションdeleteTaskを追加してみる。

次章では、この演習のポイントを総括し、非同期アクション処理の全体像をまとめます。

まとめ

本記事では、Redux ToolkitのextraReducersを利用した非同期アクション処理の基本から応用までを解説しました。createAsyncThunkを活用することで、非同期処理のライフサイクル（pending、fulfilled、rejected）を自動的に管理でき、複雑なロジックを簡潔に実装できます。

さらに、具体的な応用例としてデータフェッチや更新処理を紹介し、演習問題を通じて実践的な理解を深められる内容を提供しました。非同期アクションに伴うエラー処理やデバッグ方法も重要なポイントであり、これらを適切に実装することで、堅牢で使いやすいアプリケーションを構築できます。

extraReducersを使用した非同期アクション管理は、React+Reduxの開発における強力なツールです。これらの知識を応用し、実際のプロジェクトで効率的かつスケーラブルな状態管理を実現してください。

Redux ToolkitのextraReducersで非同期アクションを効率的に処理する方法

Redux ToolkitとextraReducersの基礎知識

Redux Toolkitとは

extraReducersの役割

非同期アクションの基本概念

非同期処理とRedux

非同期アクションのライフサイクル

Redux Toolkitの非同期処理における解決策

createAsyncThunkの活用方法

createAsyncThunkの基本構文

パラメータの解説

非同期処理の状態管理

使用例

extraReducersを使ったステート管理の実例

初期状態の定義

非同期アクションの設定

ステート管理の流れ

Reactコンポーネントでの使用例

extraReducersの利点

状態遷移とUI更新のベストプラクティス

ローディング状態の管理

ポイント

成功時の状態更新とUIの同期

エラー状態の表示

ポイント

状態とUI更新を分離する

例：状態管理とUIの分離

ベストプラクティスの要約

エラーハンドリングとデバッグ方法

エラーハンドリングの基本設計

createAsyncThunkでのエラーハンドリング

extraReducersでのエラーハンドリング

UIコンポーネントでのエラー表示

デバッグのアプローチ

Redux DevToolsの活用

ロギング

エラー原因の切り分け

ベストプラクティス

応用例：データフェッチングと更新処理

シナリオ設定

コード例

非同期アクションの定義

スライスの作成

Reactコンポーネントでの活用

ユーザーリストの表示と更新

ポイント

演習：extraReducersを使った非同期アクション実装

練習問題の概要

要件

1. 非同期アクションの定義

2. スライスの作成

3. Reactコンポーネントの実装

課題

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル