前端状態管理と非同期処理のアーキテクチャ比較

effector、mobx、redux、rxjs は、JavaScript アプリケーションの状態管理と非同期処理を扱うための代表的なライブラリですが、それぞれアプローチが異なります。redux は不変性と単一方向データフローを重視し、mobx は可変状態と自動反応を特徴とします。effector はイベント駆動の型安全な状態管理を提供し、rxjs はストリームベースの処理に特化しています。実務でこれらをどう使い分けるか、具体的なコードを通じて比較します。

🗂️ 状態の定義方法：ストア vs オブザーバブル

状態をどのように宣言するかは、ライブラリの哲学を如実に表しています。

redux は状態を単一のオブジェクト（ストア）で管理し、変更はレデューサーを通じて行います。

• 状態は不変（immutable）である必要があります。
• @reduxjs/toolkit の createSlice を使うのが現在の標準です。

// redux: スライスによる状態定義
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; }
  }
});
export const { increment } = counterSlice.actions;

mobx はクラスやオブジェクトをそのまま状態として扱います。

• 状態は可変（mutable）です。
• makeAutoObservable で自動的に反応性を付与します。

// mobx: クラスによる状態定義
import { makeAutoObservable } from 'mobx';

class Counter {
  value = 0;
  constructor() {
    makeAutoObservable(this);
  }
  increment() {
    this.value += 1;
  }
}

effector はストアとイベントを分離して定義します。

• 状態は createStore、更新は createEvent でトリガーします。
• 型推論が強く働きます。

// effector: ストアとイベントの定義
import { createStore, createEvent } from 'effector';

const increment = createEvent();
const $counter = createStore(0).on(increment, (count) => count + 1);

rxjs は状態を「時間の経過とともに変化する値のストリーム」として扱います。

• 状態そのものより、値の流れ（Observable）を定義します。
• BehaviorSubject を使うと現在の値を保持できます。

// rxjs: BehaviorSubject による状態定義
import { BehaviorSubject } from 'rxjs';

const counter$ = new BehaviorSubject(0);
// 値の更新は next() で行います
counter$.next(counter$.value + 1);

🔄 状態の更新：アクション vs 直接変更 vs イベント

状態を変更する際の書き方も大きく異なります。

redux はアクションをディスパッチすることで間接的に状態を変更します。

• 直接状態を書き換えることはできません。
• 意図した変更のみを記録として残せます。

// redux: アクションのディスパッチ
import { useDispatch } from 'react-redux';

function Counter() {
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(increment())}>+</button>;
}

mobx はメソッド内で直接状態を変更します。

• 特別なディスパッチ処理は不要です。
• アクション内で変更すれば自動的に通知されます。

// mobx: 直接の変更
import { observer } from 'mobx-react-lite';

function Counter({ store }) {
  return <button onClick={() => store.increment()}>+</button>;
}

effector はイベントをトリガー（呼ぶ）ことで状態を更新します。

• 関数を呼び出す感覚に近いです。
• 副作用と状態更新が明確に分離されます。

// effector: イベントのトリガー
import { useUnit } from 'effector-react';

function Counter() {
  const increment = useUnit(incrementEvent);
  return <button onClick={increment}>+</button>;
}

rxjs はストリームに新しい値を送り込みます。

• Subject や BehaviorSubject の next メソッドを使います。
• 購読者がその値を受け取って処理します。

// rxjs: ストリームへの値送信
const button = document.querySelector('button');
button.addEventListener('click', () => {
  counter$.next(counter$.value + 1);
});

⚡ 非同期処理：サンク vs 効果 vs オペレーター

API 通信などの非同期処理をどう扱うかも重要な選定基準です。

redux はミドルウェア（thunk）や createAsyncThunk を使います。

• 開始、成功、失敗の状態を明示的に管理します。
• 処理の流れが追いやすいです。

// redux: 非同期スライス
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

const fetchData = createAsyncThunk('data/fetch', async () => {
  const res = await fetch('/api');
  return res.json();
});

const slice = createSlice({
  name: 'data',
  initialState: { status: 'idle', data: null },
  extraReducers: (builder) => {
    builder.addCase(fetchData.fulfilled, (state, action) => {
      state.data = action.payload;
    });
  }
});

mobx は async/await をアクション内でそのまま使えます。

• 非同期処理中も状態の変更が可能です。
• 複雑なフローでは制御が難しくなることがあります。

// mobx: 非同期アクション
class Store {
  data = null;
  async fetchData() {
    const res = await fetch('/api');
    this.data = await res.json();
  }
}

effector は createEffect を使って副作用を管理します。

• 成功時（done）と失敗時（fail）のイベントが自動生成されます。
• 型安全に非同期処理を扱えます。

// effector: 効果（Effect）
import { createEffect } from 'effector';

const fetchData = createEffect(async () => {
  const res = await fetch('/api');
  return res.json();
});

// 結果をストアに繋ぐ
const $data = createStore(null).on(fetchData.doneData, (_, payload) => payload);

rxjs はオペレーター（switchMap, mergeMap など）で制御します。

• キャンセル処理やデバウンスが非常に強力です。
• 複雑なストリーム合成が可能ですが、学習コストが高いです。

// rxjs: オペレーターによる制御
import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

fromEvent(button, 'click').pipe(
  switchMap(() => fetch('/api'))
).subscribe(res => {
  // 処理結果
});

🎣 React との連携：フック vs オブザーバー

React コンポーネント内でどう状態を使うかも開発体験に影響します。

redux は useSelector と useDispatch が標準です。

• 必要な状態だけを選択して購読します。
• 再レンダリングの制御が容易です。

// redux: フックによる連携
import { useSelector } from 'react-redux';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  return <div>{count}</div>;
}

mobx は observer 高階コンポーネントまたはフックを使います。

• 使っている状態が自動的に追跡されます。
• 明示的な選択は不要ですが、最適化に注意が必要です。

// mobx: observer による連携
import { observer } from 'mobx-react-lite';

const Counter = observer(({ store }) => {
  return <div>{store.value}</div>;
});

effector は useUnit フックを使用します。

• ストアとイベントをまとめてバインディングできます。
• 不要な再レンダリングを防ぐ仕組みが内置されています。

// effector: useUnit による連携
import { useUnit } from 'effector-react';

function Counter() {
  const { count, inc } = useUnit({ count: $counter, inc: increment });
  return <div onClick={inc}>{count}</div>;
}

rxjs は専用のフック（useObservable 等）を自作またはライブラリから入れます。

• 標準の React 機能ではないため、設定が必要です。
• ストリームのライフサイクル管理を自分で責任を持つ必要があります。

// rxjs: カスタムフックによる連携（例）
import { useObservable } from 'react-rxjs'; // 第三者ライブラリ例

function Counter() {
  const [count] = useObservable(() => counter$, 0);
  return <div>{count}</div>;
}

🤝 共通点：状態と反応性

これら 4 つのライブラリは、異なるアプローチを取りながらも、いくつかの重要な共通点を持っています。

1. ⚛️ 反応性（Reactivity）のサポート

• 状態の変化を検知して、UI や他のロジックに通知する仕組みを全て持っています。
• 手動で DOM を操作する必要がなく、データ駆動で開発できます。

// 全てのライブラリに共通する概念：変化の通知
// redux: dispatch -> reducer -> store update
// mobx: action -> observable update -> reaction
// effector: event -> store update -> subscription
// rxjs: next() -> observable stream -> subscribe

2. 🛠️ 開発ツールの充実

• それぞれデバッグ用のツールや拡張機能を提供しています。
• 状態の変化を追跡したり、時間を巻き戻したりする機能があります。

// 例：Redux DevTools, MobX DevTools, Effector Inspector
// 各ライブラリはブラウザ拡張やロギング機能で状態変化を可視化します

3. 📦 拡張性とエコシステム

• 大規模なコミュニティとサードパーティライブラリが存在します。
• 永続化（persist）、ロギング、テストなどの機能は外部ライブラリで補えます。

// 例：redux-persist, mobx-persist-store, effector-storage
// 状態を localStorage などに保存する仕組みが各エコシステムに存在します

📊 比較サマリー

💡 結論と推奨

redux は、標準的で予測可能な状態管理を求める場合に最適です。特にチーム開発で規約を統一したい時や、デバッグ機能を重視する時に選ばれます。現在は Redux Toolkit を使うことで、以前より手軽に導入できます。

mobx は、少人数のチームや、オブジェクト指向的な設計を好むプロジェクトに向いています。ボイラープレートを減らして素早く開発したい場合に有効ですが、大規模化すると状態の変更箇所が追跡しにくくなるリスクがあります。

effector は、型安全性とパフォーマンスを両立したいモダンなプロジェクトに推奨されます。イベント駆動アーキテクチャを採用することで、複雑なロジックも整理しやすく、テストも容易です。

rxjs は、状態管理そのものというより、複雑な非同期フローやイベント処理を制御するためのツールとして捉えるべきです。フォームのバリデーション、リアルタイム通信、キャンセル処理など、ストリーム処理が本領を発揮する場面で選択します。

最終的なアドバイス：単純な状態管理なら redux か effector、複雑な非同期フロー制御なら rxjs、手軽さと可変状態の利便性なら mobx を検討してください。プロジェクトの要件とチームの習熟度に合わせて選定することが重要です。