編集

デコレーター

デコレーターの有効化

長年の変更を経て、ESデコレーターはついにTC39プロセスでStage 3に到達しました。これは、それらが非常に安定しており、以前のデコレーター提案のように破壊的な変更を受けることがないことを意味します。MobXは、この新しい「2022.3/Stage 3」デコレーター構文のサポートを実装しました。最新のデコレーターを使用すると、makeObservable / makeAutoObservableを呼び出す必要がなくなります。

2022.3デコレーターは以下でサポートされています。

// tsconfig.json
{
    "compilerOptions": {
        "experimentalDecorators": false /* or just remove the flag */
    }
}

// babel.config.json (or equivalent)
{
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "version": "2023-05"
            }
        ]
    ]
}

デコレーターの使用

import { observable, computed, action } from "mobx"

class Todo {
    id = Math.random()
    @observable accessor title = ""
    @observable accessor finished = false

    @action
    toggle() {
        this.finished = !this.finished
    }
}

class TodoList {
    @observable accessor todos = []

    @computed
    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length
    }
}

@observableを使用する際の新しいaccessorキーワードの使用に注意してください。これは2022.3仕様の一部であり、最新のデコレーターを使用する場合に必要です。

レガシーデコレーターの使用

TypeScript/Babelのレガシーデコレーターは、言語の公式の一部になることは決してないため、コードベースでそれらを使用することはお勧めしませんが、それでも使用できます。トランスパイルには特定の設定が必要です。

MobXバージョン6以前では、レガシーデコレーターの使用と、observable、computed、actionとしてマークすることを推奨していました。MobX 6では、これらのデコレーターの使用は推奨されず（代わりに最新のデコレーターまたはmakeObservable / makeAutoObservableを使用する）、現在のメジャーバージョンではまだ可能です。レガシーデコレーターのサポートはMobX 7で削除されます。

import { makeObservable, observable, computed, action } from "mobx"

class Todo {
    id = Math.random()
    @observable title = ""
    @observable finished = false

    constructor() {
        makeObservable(this)
    }

    @action
    toggle() {
        this.finished = !this.finished
    }
}

class TodoList {
    @observable todos = []

    @computed
    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length
    }

    constructor() {
        makeObservable(this)
    }
}

レガシーデコレーターからの移行

レガシーデコレーターから最新のデコレーターに移行するには、次の手順を実行します。

  1. TypeScriptの設定（またはBabelの同等物）からexperimentalDecoratorsフラグを無効化/削除します。
  2. デコレーターを使用するクラスコンストラクターからすべてのmakeObservable(this)呼び出しを削除します。
  3. すべての@observable（およびバリエーション）のインスタンスを@observable accessorに置き換えます。

デコレーターの変更/注意点

MobXの2022.3デコレーターはMobX 5デコレーターと非常によく似ているため、使用方法はほとんど同じですが、いくつかの注意点があります。

  • @observable accessorデコレーターは、列挙可能ではありません。accessorには過去には直接的な対応物がありませんでした。これは言語における新しい概念です。ES言語の精神とaccessorの意味によりよく従うために、それらを非列挙可能な非独自の属性にすることを選択しました。列挙可能性の主なケースは、シリアル化と残りのデストラクチャリングにあるようです。
    • シリアル化に関しては、すべてのプロパティを暗黙的にシリアル化することは、OOPの世界では理想的ではないため、これは大きな問題ではないようです（toJSONを実装するか、serializrを使用することを代替案として検討してください）。
    • 残りのデストラクチャリングに関しては、それはMobXではアンチパターンです。そうすると、すべてのオブザーバブルに（おそらく意図せず）アクセスし、オブザーバーが過度に反応的になります。
  • @action some_field = () => {}は、過去も現在も有効な使用方法です。ただし、レガシーデコレーターと最新のデコレーターの間で継承が異なります。
    • レガシーデコレーターでは、スーパークラスに@actionでデコレートされたフィールドがあり、サブクラスが同じフィールドをオーバーライドしようとすると、TypeError: Cannot redefine propertyがスローされます。
    • 最新のデコレーターでは、スーパークラスに@actionでデコレートされたフィールドがあり、サブクラスが同じフィールドをオーバーライドしようとすると、フィールドをオーバーライドできます。ただし、サブクラスのフィールドは、サブクラスの宣言で@actionでデコレートされていない限り、アクションではありません。

observerをデコレーターとして使用

mobx-reactのobserver関数は、関数とデコレーターの両方であり、クラスコンポーネントで使用できます。

@observer
class Timer extends React.Component {
    /* ... */
}
← 設定 {🚀}MobX 4/5からの移行 {🚀} →