MobX API リファレンス

{🚀}マークの付いた関数は高度な関数と見なされ、通常は必要ありません。重要なAPIを1ページにまとめた便利なチートシートをダウンロードすることを検討してください。

コアAPI

これらは最も重要なMobX APIです。

observable、computed、reaction、およびactionを理解すれば、アプリケーションでMobXを習得して使用することができます！

オブザーバブルの作成

ものをオブザーバブルにする。

`makeObservable`

使用方法: makeObservable(target, annotations?, options?) (詳細情報)

プロパティ、オブジェクト全体、配列、マップ、セットをすべてオブザーバブルにすることができます。

`makeAutoObservable`

使用方法: makeAutoObservable(target, overrides?, options?) (詳細情報)

プロパティ、オブジェクト、配列、マップ、セットを自動的にオブザーバブルにします。

`extendObservable`

{🚀} 使用方法: extendObservable(target, properties, overrides?, options?)

targetオブジェクトに新しいプロパティを導入し、それらをすぐにオブザーバブルにするために使用できます。基本的にObject.assign(target, properties); makeAutoObservable(target, overrides, options);の略記です。ただし、targetの既存のプロパティは変更されません。

古風なコンストラクタ関数は、extendObservableをうまく活用できます。

function Person(firstName, lastName) {
    extendObservable(this, { firstName, lastName })
}

const person = new Person("Michel", "Weststrate")

インスタンス化後にextendObservableを使用して既存のオブジェクトにオブザーバブルフィールドを追加することはできますが、このようにオブザーバブルプロパティを追加すること自体がオブザーブ可能な事実ではないことに注意してください。

`observable`

使用方法: observable(source, overrides?, options?)、observable _(アノテーション)_ または @observable accessor _(フィールドデコレーター)_。 (詳細情報)

オブジェクトを複製してオブザーバブルにします。ソースはプレーンオブジェクト、配列、マップ、セットにすることができます。デフォルトでは、observableは再帰的に適用されます。出会った値のいずれかがオブジェクトまたは配列の場合、その値もobservableに渡されます。

`observable.object`

{🚀} 使用方法: observable.object(source, overrides?, options?) (詳細情報)

observable(source, overrides?, options?)のエイリアスです。提供されたオブジェクトのクローンを作成し、そのすべてのプロパティをオブザーバブルにします。

`observable.array`

{🚀} 使用方法: observable.array(initialValues?, options?)

提供されたinitialValuesに基づいて新しいオブザーバブル配列を作成します。オブザーバブル配列をプレーン配列に戻すには、.slice()メソッドを使用するか、toJSを参照して再帰的に変換します。すべての言語組み込み配列関数に加えて、オブザーバブル配列でも次の便利な機能が使用できます。

clear()は、配列から現在すべてのエントリを削除します。
replace(newItems)は、配列内の既存のエントリをすべて新しいエントリに置き換えます。
remove(value)は、配列から値で単一のアイテムを削除し、アイテムが見つかって削除された場合はtrueを返します。

配列内の値を自動的にオブザーバブルにしない場合は、{ deep: false }オプションを使用して、配列を浅くオブザーバブルにします。

`observable.map`

{🚀} 使用方法: observable.map(initialMap?, options?)

提供されたinitialMapに基づいて、新しいオブザーバブルES6 Mapを作成します。特定のエントリの変更だけでなく、エントリの追加と削除にも反応したくない場合に非常に役立ちます。プロキシが有効になっている場合を除き、動的にキー付けされたコレクションを作成するための推奨アプローチは、オブザーバブルマップを作成することです。

すべての言語組み込みマップ関数に加えて、オブザーバブルマップでも次の便利な機能が使用できます。

toJSON()は、このマップの浅いプレーンオブジェクト表現を返します（ディープコピーにはtoJSを使用します）。
merge(values)は、提供されたvalues（プレーンオブジェクト、エントリの配列、または文字列キー付きES6マップ）からこのマップにすべてのエントリをコピーします。
replace(values)は、このマップのコンテンツ全体を、提供されたvaluesで置き換えます。

マップ内の値を自動的にオブザーバブルにしない場合は、{ deep: false }オプションを使用して、マップを浅くオブザーバブルにします。

`observable.set`

{🚀} 使用法: observable.set(initialSet?, options?)

指定されたinitialSetに基づいて、新しいオブザーバブルなES6 Setを作成します。値の追加と削除を監視する必要がある動的なSetを作成したい場合に、コレクション全体で値が一度しか出現しないようにする場合に使用します。

Set内の値を自動的にオブザーバブルに変換しない場合は、{ deep: false }オプションを使用して、Setをシャローオブザーバブルにします。

Mapのキーとは異なり、Setの値は個別に追跡されません。

`observable.ref`

使用方法: observable.ref (アノテーション) (詳細情報)

observableアノテーションと似ていますが、再代入のみが追跡されます。代入された値自体は、自動的にオブザーバブルになりません。例えば、不変のデータをオブザーバブルなフィールドに格納する場合に使用します。

`observable.shallow`

使用方法: observable.shallow (アノテーション) (詳細情報)

observable.refアノテーションと似ていますが、コレクション用です。代入されたコレクションはオブザーバブルになりますが、コレクションの内容自体はオブザーバブルになりません。

`observable.struct`

{🚀} 使用法: observable.struct (アノテーション) (詳細情報)

observableアノテーションと似ていますが、現在の値と構造的に等しい値が代入された場合は無視されます。

`observable.deep`

{🚀} 使用法: observable.deep (アノテーション) (詳細情報)

observableアノテーションの別名です。

`observable.box`

{🚀} 使用法: observable.box(value, options?)

JavaScriptのすべてのプリミティブ値は不変であり、定義上オブザーバブルではありません。通常は問題ありません。MobXは値を含む *プロパティ* をオブザーバブルにすることができます。まれに、オブジェクトによって所有されていないオブザーバブルな *プリミティブ* を持つ方が便利な場合があります。そのような場合、そのような *プリミティブ* を管理するオブザーバブルな *ボックス* を作成できます。

observable.box(value) は任意の値を受け入れ、ボックス内に格納します。現在の値は .get() でアクセスでき、.set(newValue) を使用して更新できます。

import { observable, autorun } from "mobx"

const cityName = observable.box("Vienna")

autorun(() => {
    console.log(cityName.get())
})
// Prints: 'Vienna'

cityName.set("Amsterdam")
// Prints: 'Amsterdam'

ボックス内の値を自動的にオブザーバブルに変換しない場合は、{ deep: false } オプションを使用して、ボックスをシャローオブザーバブルにします。

アクション

アクションとは、状態を変更するコードのことです。

`action`

使用方法: action(fn)、action (アノテーション)、または@action (メソッド/フィールドデコレータ) (詳細情報)

状態を変更する関数の使用。

`runInAction`

{🚀} 使用法: runInAction(fn) (詳細情報)

すぐに呼び出される、一度限りのアクションを作成します。

`flow`

使用方法: flow(fn)、flow (アノテーション)、または@flow (ジェネレータメソッドデコレータ) (詳細情報)

キャンセルをサポートする、async/awaitのMobXフレンドリーな代替手段です。

`flowResult`

使用方法: flowResult(flowFunctionResult) (詳細情報)

TypeScriptユーザーのみ。ジェネレーターの出力をPromiseにキャストするユーティリティです。これは、flowによって行われたPromiseラッピングの型に関する修正に過ぎません。実行時には、入力された値を直接返します。

コンピュート

コンピュート値は、他のオブザーバブルから情報を導き出すために使用できます。

`computed`

使用方法: computed(fn, options?)、computed(options?) (アノテーション)、または@computed (ゲッターデコレータ) (詳細情報)

他のオブザーバブルから導出されるオブザーバブルな値を作成しますが、基礎となるオブザーバブルのいずれかが変更されない限り、再計算されません。

React統合

mobx-react / mobx-react-liteパッケージから。

`observer`

使用方法: observer(component) (詳細情報)

オブザーバブルの変更時に、関数型コンポーネントまたはクラスベースのReactコンポーネントを再レンダリングするために使用できる高階コンポーネントです。

`Observer`

使用方法: <Observer>{() => rendering}</Observer> (詳細情報)

指定されたレンダリング関数をレンダリングし、レンダリング関数で使用されているオブザーバブルのいずれかが変更されると自動的に再レンダリングします。

`useLocalObservable`

使用方法: useLocalObservable(() => source, annotations?) (詳細情報)

makeObservableを使用して新しいオブザーバブルオブジェクトを作成し、コンポーネントのライフサイクル全体を通してコンポーネント内に保持します。

リアクション

リアクションの目的は、自動的に発生する副作用をモデル化することです。

`autorun`

使用方法: autorun(() => effect, options?) (詳細情報)

監視しているものが変更されるたびに、関数を再実行します。

`reaction`

使用方法: reaction(() => data, data => effect, options?) (詳細情報)

選択されたデータが変更されると、副作用を再実行します。

`when`

使用方法: when(() => condition, () => effect, options?) または await when(() => condition, options?) (詳細情報)

オブザーバブルな条件がtrueになったときに、副作用を一度実行します。

ユーティリティ

オブザーバブルオブジェクトや計算済み値の操作をより便利にするユーティリティです。より複雑なユーティリティは、mobx-utilsパッケージにもあります。

`onReactionError`

{🚀} 使用方法: onReactionError(handler: (error: any, derivation) => void)

グローバルエラーリスナーをアタッチします。これは、リアクションからスローされるすべてのエラーに対して呼び出されます。監視またはテストの目的で使用できます。

`intercept`

{🚀} 使用方法: intercept(propertyName|array|object|Set|Map, listener) (詳細情報)

オブザーバブルAPIに適用される前に、変更をインターセプトします。インターセプトを停止するディスポーザー関数を返します。

`observe`

{🚀} 使用方法: observe(propertyName|array|object|Set|Map, listener) (詳細情報)

単一のオブザーバブル値を監視するために使用できる低レベルAPIです。インターセプトを停止するディスポーザー関数を返します。

`onBecomeObserved`

{🚀} 使用方法: onBecomeObserved(observable, property?, listener: () => void) (詳細情報)

何かが観測されるようになったときのフック。

`onBecomeUnobserved`

{🚀} 使用方法: onBecomeUnobserved(observable, property?, listener: () => void) (詳細情報)

何かが観測されなくなったときのフック。

`toJS`

使用方法: toJS(value) (詳細情報)

オブザーバブルオブジェクトをJavaScriptのオブジェクトに再帰的に変換します。オブザーバブル配列、オブジェクト、マップ、プリミティブをサポートします。

非オブザーバブルには再帰しません。オブザーバブルが含まれていても、そのまま残されます。計算済みプロパティやその他の非列挙可能なプロパティは完全に無視され、返されません。

より複雑な（逆）シリアライゼーションシナリオの場合は、クラスに（計算済み）toJSONメソッドを与えるか、serializrなどのシリアライゼーションライブラリを使用することをお勧めします。

const obj = mobx.observable({
    x: 1
})

const clone = mobx.toJS(obj)

console.log(mobx.isObservableObject(obj)) // true
console.log(mobx.isObservableObject(clone)) // false

設定

MobXインスタンスの微調整。

`configure`

使用方法: アクティブな MobX インスタンスのグローバル動作設定を設定します。(詳細情報) MobX全体の動作を変更するために使用します。

コレクションユーティリティ {🚀}

これらは、オブザーバブルな配列、オブジェクト、マップを同じ汎用APIで操作できるようにします。Proxyをサポートしていない環境で役立つことがありますが、それ以外の場合は通常必要ありません。

`values`

{🚀} 使用方法: values(array|object|Set|Map) (詳細情報)

コレクション内のすべての値を配列として返します。

`keys`

{🚀} 使用方法: keys(array|object|Set|Map) (詳細情報)

コレクション内のすべてのキー/インデックスを配列として返します。

`entries`

{🚀} 使用方法: entries(array|object|Set|Map) (詳細情報)

コレクションの各エントリの[key, value]ペアを配列として返します。

`set`

{🚀} 使用方法: set(array|object|Map, key, value) (詳細情報)

コレクションを更新します。

`remove`

{🚀} 使用方法: remove(array|object|Map, key) (詳細情報)

コレクションからアイテムを削除します。

`has`

{🚀} 使用方法: has(array|object|Map, key) (詳細情報)

コレクションへのメンバーシップを確認します。

`get`

{🚀} 使用方法: get(array|object|Map, key) (詳細情報)

キーを使用してコレクションから値を取得します。

インスペクションユーティリティ {🚀}

MobXの内部状態を検査したい場合、またはMobXの上に優れたツールを作成したい場合に役立つユーティリティです。

`isObservable`

{🚀} 使用方法: isObservable(array|object|Set|Map)

オブジェクト/コレクションはMobXによってオブザーバブルになっていますか？

`isObservableProp`

{🚀} 使用方法: isObservableProp(object, propertyName)

プロパティはオブザーバブルですか？

`isObservableArray`

{🚀} 使用方法: isObservableArray(array)

値はオブザーバブルな配列ですか？

`isObservableObject`

{🚀} 使用方法: isObservableObject(object)

値はオブザーバブルなオブジェクトですか？

`isObservableSet`

{🚀} 使用方法: isObservableSet(set)

値はオブザーバブルなSetですか？

`isObservableMap`

{🚀} 使用方法: isObservableMap(map)

値はオブザーバブルなMapですか？

`isBoxedObservable`

{🚀} 使用方法: isBoxedObservable(value)

この値は、observable.box を使用して作成されたオブザーバブルボックスですか？

`isAction`

{🚀} 使用法: isAction(func)

この関数は、action としてマークされていますか？

`isComputed`

{🚀} 使用法: isComputed(boxedComputed)

これは、computed(() => expr) を使用して作成されたボックス化された計算値ですか？

`isComputedProp`

{🚀} 使用法: isComputedProp(object, propertyName)

これは計算プロパティですか？

`trace`

{🚀} 使用法: trace()、trace(true) *(デバッガーに入る)* または trace(object, propertyName, enterDebugger?) (詳細情報)

オブザーバー、リアクション、または計算値内で使用する必要があります。値が無効になったときにログを記録するか、`true` で呼び出された場合にデバッガーのブレークポイントを設定します。

`spy`

{🚀} 使用法: spy(eventListener) (詳細情報)

MobXで発生するすべてのイベントをリッスンするグローバルスパイリスナーを登録します。

`getDebugName`

{🚀} 使用法: getDebugName(reaction|array|Set|Map) または getDebugName(object|Map, propertyName) (詳細情報)

オブザーバブルまたはリアクションの（生成された）フレンドリーなデバッグ名を返します。

`getDependencyTree`

{🚀} 使用法: getDependencyTree(object, computedPropertyName) (詳細情報)

指定されたリアクション/計算が現在依存しているすべてのオブザーバブルを含むツリー構造を返します。

`getObserverTree`

{🚀} 使用法: getObserverTree(array|Set|Map) または getObserverTree(object|Map, propertyName) (詳細情報)

指定されたオブザーバブルを観察しているすべてのリアクション/計算を含むツリー構造を返します。

MobXの拡張 {🚀}

まれにMobX自体を拡張したい場合。

`createAtom`

{🚀} 使用法: createAtom(name, onBecomeObserved?, onBecomeUnobserved?) (詳細情報)

独自のオブザーバブルデータ構造を作成し、MobXに接続します。すべてのオブザーバブルデータ型で内部的に使用されます。Atomは、いつという情報をMobXに通知するための2つのレポートメソッドを公開します。

reportObserved(): アトムが観測されるようになり、現在のデリベーションの依存関係ツリーの一部とみなされるべきです。
reportChanged(): アトムが変更され、それに依存するすべてのデリベーションが無効化されるべきです。

`getAtom`

{🚀} 使用法: getAtom(thing, property?) (詳細情報)

バッキングアトムを返します。

`transaction`

{🚀} 使用法: transaction(worker: () => any)

トランザクションは低レベルAPIです。actionまたはrunInActionを使用することをお勧めします。

トランザクションの終わりまでリアクションを実行せずに、一連の更新を一括処理するために使用します。untrackedと同様に、actionによって自動的に適用されるため、通常はtransactionを直接使用するよりもアクションを使用する方が理にかなっています。

引数としてパラメーターなしの単一のworker関数を取得し、その関数が返した値を返します。transactionは完全に同期的に実行され、ネストできます。最も外側のtransactionが完了した後にのみ、保留中のリアクションが実行されます。

import { observable, transaction, autorun } from "mobx"

const numbers = observable([])

autorun(() => console.log(numbers.length, "numbers!"))
// Prints: '0 numbers!'

transaction(() => {
    transaction(() => {
        numbers.push(1)
        numbers.push(2)
    })
    numbers.push(3)
})
// Prints: '3 numbers!'

`untracked`

{🚀} 使用法: untracked(worker: () => any)

Untrackedは低レベルAPIです。reaction、action、またはrunInActionを使用することをお勧めします。

オブザーバーを確立せずにコードを実行します。transactionと同様に、untrackedはactionによって自動的に適用されるため、通常はuntrackedを直接使用するよりもアクションを使用する方が理にかなっています。

const person = observable({
    firstName: "Michel",
    lastName: "Weststrate"
})

autorun(() => {
    console.log(
        person.lastName,
        ",",
        // This untracked block will return the person's
        // firstName without establishing a dependency.
        untracked(() => person.firstName)
    )
})
// Prints: 'Weststrate, Michel'

person.firstName = "G.K."
// Doesn't print!

person.lastName = "Chesterton"
// Prints: 'Chesterton, G.K.'