BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Mobx リアクティブ状態管理ライブラリバージョン 6がリリースされた

Mobx リアクティブ状態管理ライブラリバージョン 6がリリースされた

原文(投稿日:2020/10/17)へのリンク

リアクティブ状態管理ライブラリMobXの作成者であるMichel Weststrate氏は、先頃MobX 6をリリースした。MobX 6はInternet ExplorerとReact Nativeをサポートし、新しいJavaScriptデコレータの提案を反映するようにデコレータベースのAPIを更新する (現在はステージ2) 。MobXエコシステムの重要な部分も更新され、最新バージョンのMobXをサポートしている (例: mobx-react-litemobx-reactmobx-utils) 。

MobX 6は、デコレータの現在の実装のサポートを削除し、代わりに新しいJavaScriptデコレータの提案をサポートする。新しい提案は、JavaScript TC39委員会が管理する標準化トラックのドラフト段階 (ステージ2) にある。TC39委員会は、JavaScriptプログラミング言語を進化させ、その仕様を作成する責任がある。ステージ2の提案は実験的なものと見なされる。委員会で提案が作成され、最終的に標準に含まれることを適正に期待する場合、提案はステージ1からステージ2に移動される。

新しいデコレータの提案は、標準化プロセスでそれ以上進まなかった以前の2つのデコレータの提案の後に来ている。これら2つの提案 — レガシー (Babel) および実験的 (TypeScript) デコレータの提案 - は、ステージ3にあるクラスフィールドの提案と互換性がない。

Weststrate氏は、変更のもう1つの理由として採用を挙げている:

デコレータの使用は、MobXの採用と提唱において常に高いハードルでした。 […] MobXファンが言うように:

[デコレータを削除する]この選択はおそらく良い呼びかけだったと思います。たぶん今はデコレータがなくても、Mobxの素晴らしさを人々に伝えることができるといいのですが、少なくともデコレータの言い訳はもう聞こえません。「@」記号がこれほど多くの人を怖がらせるのを見たことがありません。

MobX 6を使用する開発者には、したがって、2つのオプションがある。1つ目は、デコレータのないJavaScriptとMobX 6の新しいAPIを使用することである:

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

// Before:
class TodoStore {
    @observable
    todos: Todo[] = []

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

    @action
    addTodo(todo: Todo) {
        this.todos.push(todo)
    }
}

// After:
class TodoStore {
    todos: Todo[] = []

    constructor() {
        makeObservable(this, {
            todos: observable,
            unfinishedTodoCount: computed,
            addTodo: action
        })
    }

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

    addTodo(todo: Todo) {
        this.todos.push(todo)
    }
}

(出典: release note)

開発者は、改良されたバージョンのデコレータを新しいAPIと一緒に使用することもできる:

class TodoStore {
    @observable
    todos: Todo[] = []

    constructor() {
        makeObservable(this)
    }

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

    @action
    addTodo(todo: Todo) {
        this.todos.push(todo)
    }
}

(出典: release note)

新しいデコレータの提案が最終的に新しいJavaScript標準として採用された場合、開発者はデコレータを使用するときに makeObservable(this) 呼び出しを行う必要がなくなる。

開発者は、mobx-undecorate codemodによって、MobX 4およびMobX 5コードベースをMobX 6に移行できる。

MobX 6にはJavaScriptプロキシが必要であるが、これは一部のレガシーブラウザではサポートされていない機能であり、開発者はプロキシの使用をオプトアウトして古いエンジンをサポートする場合がある。

mobx-react (MobXのReactバインディング) 、mobx-react-lite (React 16.8に基づくLightweight ReactバインディングとReact hooks) およびmobx-utilsは、MobX 6を使用するように追加で更新されている。

開発者は、リリースに関する追加の詳細を含む完全なリリースノートを確認するように招かれている。

MobXは、スタンドアロンまたは任意のUIフレームワークで使用できる非オピニオン状態管理ライブラリである。MobX APIを使用すると、エンティティを定義して変更を監視し、それらの変更に対する反応 (依存する状態の更新や実行中の効果) を確認できる。MobXは、状態変化の追跡と伝播に関連するボイラープレートを排除するよう努めながら、ReduxおよびRecoilといくつかの類似点を共有している。

MobXは、MITライセンスの下で利用可能なオープンソースソフトウェアである。貢献とフィードバックは、MobX GitHubプロジェクトを介して奨励されている。

この記事に星をつける

おすすめ度
スタイル

BT