logo

MobX

シンプルでスケーラブルな状態管理。

MobXは、以下のスポンサーの皆様と、その他多くの個人スポンサーのご厚意により実現しています。スポンサーシップは、このプロジェクトの寿命に直接影響を与えます。

🥇🥇 プラチナスポンサー（総額5000ドル以上のご寄付）：🥇🥇

🥇 ゴールドスポンサー（総額2500ドル以上のご寄付）

🥈 シルバースポンサー（総額500ドル以上のご寄付）

はじめに

アプリケーションの状態から派生できるものはすべて、自動的に派生されるべきです。

MobXは、関数型リアクティブプログラミングを透過的に適用することで、状態管理をシンプルかつスケーラブルにする、シグナルベースの、実戦でテストされたライブラリです。MobXの背後にある哲学はシンプルです。

😙

簡単

あなたの意図を捉えた、最小限の、ボイラープレートのないコードを書きます。レコードフィールドを更新しようとしていますか？通常のJavaScript代入を使用するだけで、リアクティビティシステムがすべての変更を検出し、使用されている場所に伝播します。非同期プロセスでデータを更新する際に特別なツールは必要ありません。

🚅

最適なレンダリングを簡単に実現

データのすべての変更と使用は実行時に追跡され、状態と出力の間のすべての関係を捉える依存関係ツリーが構築されます。これにより、Reactコンポーネントなど、状態に依存する計算が、本当に必要な場合にのみ実行されることが保証されます。メモ化やセレクターのような、エラーを起こしやすく、最適とは言えない手法でコンポーネントを手動で最適化する必要はありません。

🤹🏻‍♂️

アーキテクチャの自由度

MobXは、いかなるUIフレームワークの外部でもアプリケーションの状態を管理できる、自由度の高いものです。これにより、コードの分離性、移植性、そして何よりもテストの容易さが向上します。

簡単な例

では、MobXを使ったコードはどのようなものでしょうか？

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react-lite"

// Model the application state.
function createTimer() {
    return makeAutoObservable({
        secondsPassed: 0,
        increase() {
            this.secondsPassed += 1
        },
        reset() {
            this.secondsPassed = 0
        }
    })
}

const myTimer = createTimer()

// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

ReactDOM.render(<TimerView timer={myTimer} />, document.body)

// Update the 'Seconds passed: X' text every second.
setInterval(() => {
    myTimer.increase()
}, 1000)

TimerView Reactコンポーネントを囲むobserverラッパーは、レンダリングがtimer.secondsPassedオブザーバブルに依存していることを自動的に検出します。リアクティビティシステムは、将来*このフィールドが*更新されたときに、コンポーネントを再レンダリングします。この関係が明示的に定義されていなくてもです。

すべてのイベント（onClick / setInterval）は、*オブザーバブル状態*（myTimer.secondsPassed）を更新する*アクション*（myTimer.increase / myTimer.reset）を呼び出します。オブザーバブル状態の変更は、行われた変更に依存するすべての*計算*と*副作用*（TimerView）に正確に伝播されます。

MobX unidirectional flow

この概念図は、上記の例、またはMobXを使用する他のアプリケーションに適用できます。

はじめに

より大きな例を使用してMobXのコアコンセプトについて学ぶには、**MobXの要点**ページをご覧いただくか、**MobXとReactの10分間のインタラクティブな入門**を受講してください。

MobXによってもたらされるメンタルモデルの哲学と利点については、ブログ記事のUI as an afterthoughtとHow to decouple state and UI (a.k.a. you don’t need componentWillMount)にも詳しく説明されています。

その他のリソース

MobXチートシート（5ポンド）は、便利であると同時に、プロジェクトのスポンサーにもなります。
MobXとReactの10分間のインタラクティブな入門
Egghead.ioコース、MobX 3に基づく
MobX awesome list - MobXのリソースとサンプルプロジェクトの長大なリスト

MobXブック

MobXクイックスタートガイド（24.99ドル）は、Pavan PodilaとMichel Weststrate著、電子書籍、ペーパーバック、O'Reillyプラットフォーム（プレビューを参照）で入手できます。

ビデオ

2020年のMobXとReact入門 Leigh Halliday著、*17分*。
ReactNext 2016: 実際のMobX Michel Weststrate著、*40分*、スライド。
CityJS 2020: MobX、可変から不変、そして観測可能なデータへ Michel Weststrate著、*30分*。
OpenSourceNorth: MobXを使った実践的なReact (ES5) Matt Ruby著、*42分*。
HolyJS 2019: MobXと予測可能性とスピードのユニークな共生 Michel Weststrate著、*59分*。
React Amsterdam 2016: 状態管理は簡単 Michel Weststrate著、*20分*、スライド。
{🚀} React Live 2019: MobXの再発明 Max Gallo著、*27分*。

クレジット

MobXは、例えばスプレッドシートで使用されているリアクティブプログラミングの原則に触発されています。また、MeteorJSのTracker、Knockout、Vue.jsなどのモデル-ビュー-ビューモデルフレームワークにも触発されていますが、MobXは*透過的関数型リアクティブプログラミング*（TFRP、この概念についてはMobXブックで詳しく説明されています）を次のレベルに引き上げ、スタンドアロン実装を提供しています。MobXは、グリッチのない、同期的な、予測可能で効率的な方法でTFRPを実装しています。

MobXのメンテナンスと、MobXの哲学を現実の、複雑な、パフォーマンス重視のアプリケーションで証明する機会を提供してくれたMendixには、多大なる感謝を捧げます。