編集

インストール

MobXはブラウザやNodeJSを含む、あらゆるES5環境で動作します。

Reactバインディングには2つのタイプがあります。mobx-react-liteは関数コンポーネントのみをサポートし、mobx-reactはクラスベースのコンポーネントもサポートします。以下のYarnまたはNPMコマンドに、ユースケースに応じた適切なバインディングを追加してください。

Yarn: yarn add mobx

NPM: npm install --save mobx

CDN: https://cdnjs.com/libraries/mobx / https://unpkg.com/mobx/dist/mobx.umd.production.min.js

トランスパイル設定

MobXとデコレーター

MobXは、好みによってデコレーターを使用しても、使用しなくても利用できます。レガシー実装と標準化されたTC-39版のデコレーターの両方が現在サポートされています。有効化方法の詳細については、enabling-decoratorsを参照してください。標準版を優先するため、レガシーデコレーターのサポートはMobX 7で削除されます。

クラスプロパティに対して仕様に準拠したトランスパイルを使用する

TypeScriptまたはBabelでMobXを使用し、クラスを使用する予定の場合は、クラスフィールドに対してTC-39仕様に準拠したトランスパイルを使用するように設定を更新してください。これは常にデフォルトではないためです。これがないと、クラスフィールドは初期化される前にobservableにすることができません。

  • TypeScript: コンパイラオプション"useDefineForClassFields": trueを設定します。
  • Babel: 少なくともバージョン7.12を使用し、次の構成を使用するようにしてください。
    {
    // Babel < 7.13.0
    "plugins": [["@babel/plugin-proposal-class-properties", { "loose": false }]],

    // Babel >= 7.13.0 (https://babel.dokyumento.jp/docs/en/assumptions)
    "plugins": [["@babel/plugin-proposal-class-properties"]],
    "assumptions": {
        "setPublicClassFields": false
    }
}

検証のため、ソースの先頭（例：index.js）に次のコードを挿入してください。

if (!new class { x }().hasOwnProperty('x')) throw new Error('Transpiler is not configured correctly');

Next.jsの場合は、プロジェクトがTypeScriptを使用するように設定されている場合でも、TypeScriptではなくBabelをカスタマイズする必要があることに注意してください。

古いJavaScript環境でのMobX

デフォルトでは、MobXは最適なパフォーマンスと互換性のためにプロキシを使用します。ただし、古いJavaScriptエンジンではProxyは利用できません（プロキシサポートを参照してください）。このような例としては、Internet Explorer（Edge以前）、Node.js < 6、iOS < 10、RN 0.59以前のAndroid、またはiOS上のAndroidなどがあります。

このような場合、MobXはES5互換の実装にフォールバックできます。この実装はほぼ同じように動作しますが、プロキシサポートがない場合の制限がいくつかあります。フォールバック実装を明示的に有効にするには、useProxiesを設定する必要があります。

import { configure } from "mobx"

configure({ useProxies: "never" }) // Or "ifavailable".

このオプションはMobX 7で削除されます。

他のフレームワーク/プラットフォームでのMobX

← このドキュメントについてMobXの要点 →