Redux vs MobX vs Vuex: 状態管理アーキテクチャの比較

redux、mobx、vuex はいずれもアプリケーションの状態を管理するためのツールですが、その仕組みと使い勝手は大きく異なります。実務で直面する課題に対して、それぞれがどうアプローチするかを比較します。

🔄 状態の更新方法：直接変更 vs 间接更新

redux は状態を直接変更できません。アクションを dispatch し、レデューサーが新しい状態を返します。

• 状態は不変（immutable）として扱われます。
• 変更履歴を追跡しやすい構造です。

// redux: Action dispatch
store.dispatch({ type: 'INCREMENT' });

// reducer
function counter(state = 0, action) {
  if (action.type === 'INCREMENT') return state + 1;
  return state;
}

mobx は状態を直接変更できます。観測可能なプロパティを書き換えると、自動で反応します。

• 状態は可変（mutable）です。
• 書き方が自然で、コード量が少なくなります。

// mobx: Direct mutation
import { makeObservable, action, observable } from "mobx";

class Store {
  count = 0;
  constructor() {
    makeObservable(this, { count: observable, increment: action });
  }
  increment() {
    this.count++;
  }
}
const store = new Store();
store.increment();

vuex はミューテーションを通じて状態を変更します。

• 直接変更は禁止されており、コミットを経由します。
• 変更箇所を明確に記録できます。

// vuex: Commit mutation
store.commit('INCREMENT');

const store = createStore({
  state: () => ({ count: 0 }),
  mutations: {
    INCREMENT(state) {
      state.count++;
    }
  }
});

📝 必要なコード量：定型文 vs 簡潔さ

redux は構造を守るために多くのコードが必要です。

• アクションタイプ、アクションクリエイター、レデューサーを定義します。
• 近年は Redux Toolkit を使うことで大幅に削減できます。

// redux (Traditional)
const ADD_TODO = 'ADD_TODO';
function addTodo(text) { return { type: ADD_TODO, text }; }
function todos(state = [], action) { /* ... */ }

mobx はクラスとデコレータ（または makeObservable）だけで済みます。

• 余計な設定ファイルは不要です。
• 状態とロジックを同じ場所にまとめられます。

// mobx
class TodoStore {
  todos = [];
  addTodo(text) {
    this.todos.push({ text });
  }
}

vuex はストアの定義に一定の構造を要求します。

• state、mutations、actions、getters を分けて書きます。
• 単一ファイルコンポーネント内にまとめることも可能です。

// vuex
export default createStore({
  state: { todos: [] },
  mutations: { add(state, text) { /*...*/ } },
  actions: { addTodo({ commit }, text) { commit('add', text); } }
});

🧩 フレームワークとの連携：汎用 vs 専用

redux はフレームワークを選びません。

• React、Vue、Angular などで使えます。
• React との相性が特に良く、エコシステムが充実しています。

// redux + React
import { useSelector } from 'react-redux';
function Counter() {
  const count = useSelector(state => state.count);
  return <div>{count}</div>;
}

mobx もフレームワークを選ばない汎用ライブラリです。

• React、Vue、Svelte などで利用可能です。
• 各フレームワーク用のバインディングパッケージがあります。

// mobx + React
import { observer } from 'mobx-react-lite';
const Counter = observer(() => {
  return <div>{store.count}</div>;
});

vuex は Vue.js 専用です。

• Vue 2 および Vue 3 と強く統合されています。
• 他のフレームワークでは使用できません。

// vuex + Vue
import { useStore } from 'vuex';
export default {
  setup() {
    const store = useStore();
    return { count: computed(() => store.state.count) };
  }
};

⚠️ 現在の維持状況と推奨事項

redux は現在も活発に開発されています。

• 素の redux パッケージよりも Redux Toolkit の使用が公式に推奨されています。
• 長期的なサポートが期待できます。

// Redux Toolkit (Modern Standard)
import { createSlice } from '@reduxjs/toolkit';
const slice = createSlice({ name: 'counter', initialState: 0, reducers: { increment: state => state + 1 } });

mobx も安定して維持されています。

• バージョン 6 以降はクラスベースの設計が主流です。
• 特定のフレームワークに依存しないため、継続利用に安心感があります。

// mobx v6+
import { makeAutoObservable } from "mobx";
class Store {
  constructor() { makeAutoObservable(this); }
}

vuex は Vue 3 において維持モードに入っています。

• 新規プロジェクトでは pinia の使用が公式に推奨されています。
• Vue 2 のレガシープロジェクト以外での採用は避けるべきです。

// Pinia (Recommended for Vue 3)
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }) });

🤝 共通点：状態管理ライブラリの役割

これら 3 つのライブラリは、異なるアプローチを取りながらも、共通の目的を持っています。

1. 🌍 グローバルな状態共有

• コンポーネント間のプロパティドリルを解消します。
• 任意の場所から状態にアクセスできます。

// 全て共通：グローバルストアへのアクセス
const state = store.state; // vuex
const state = store.getState(); // redux
const state = store.count; // mobx

2. 🔍 開発者ツールの対応

• 状態の変化をデバッグツールで可視化できます。
• 時間旅行デバッグ（redux）や反応の追跡（mobx）が可能です。

// 全て共通：DevTools 連携
// redux: Redux DevTools Extension
// mobx: MobX Developer Tools
// vuex: Vue Devtools

3. 🧪 予測可能性の向上

• 状態変更のルールを定めることで、バグを減らします。
• テストしやすい構造を提供します。

// 全て共通：テスト可能なロジック
// redux: reducer testing
// mobx: action testing
// vuex: mutation testing

📊 比較サマリー

💡 最終的な推奨

redux は、大規模で複雑な状態管理が必要な場合に最適です。特に React エコシステムでは事実上の標準であり、チーム規模が大きくなっても構造を維持できます。ただし、設定の手間を減らすために Redux Toolkit の使用を強く推奨します。

mobx は、開発速度とコードの簡潔さを優先する場合に適しています。状態変更の追跡が緩やかでも問題ないプロジェクトや、クラスベースの設計を好むチームに向いています。フレームワークを選ばない柔軟性も魅力です。

vuex は、Vue 2 の既存プロジェクトを維持する場合のみ選択してください。Vue 3 で新規開発を行う場合は、より簡潔で型サポートも強い pinia への移行を検討すべきです。状態管理ライブラリとしての役割は終わりに近づいています。

結論: 新規プロジェクトでは、React なら redux (Toolkit)、Vue なら pinia、フレームワークに縛られない柔軟性が必要なら mobx を選ぶのが賢明です。