frontend-state-management

フロントエンドの状態管理

目次

• 概要
• 使用する場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

最新のパターンやライブラリを使用して、アプリケーションの状態、副作用、コンポーネント間のデータフローを管理できる、拡張性の高い状態管理ソリューションを実装します。

使用する場面

• 複雑なアプリケーションの状態
• 複数のコンポーネント間で状態を共有する場合
• 予測可能な状態の変更
• タイムトラベルデバッグが必要な場合
• サーバー状態の同期

クイックスタート

最小限の動作例：

// store/userSlice.ts
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';

interface User {
  id: number;
  name: string;
  email: string;
}

interface UserState {
  items: User[];
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  items: [],
  loading: false,
  error: null
};

export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async (_, { rejectWithValue }) => {
    try {
// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装については、references/ ディレクトリを参照してください。

ガイド	内容
Redux with Redux Toolkit (React)	Redux with Redux Toolkit (React)
Zustand (Lightweight State Management)	Zustand (軽量な状態管理)
Context API + useReducer	Context API + useReducer
MobX (Observable State)	MobX (監視可能な状態)

ベストプラクティス

✅ 推奨事項

• 確立されたパターンと規約に従います
• クリーンで保守しやすいコードを書きます
• 適切なドキュメントを追加します
• デプロイ前に十分にテストします

❌ 避けるべきこと

• テストや検証を省略する
• エラーハンドリングを無視する
• 設定値をハードコードする