https://uga-box.hatenablog.com/entry/2025/02/17/000000

Mobxの observable.box() の使い所ついて調べた

mobx.js.org

observable.box はプリミティブな値をリアクティブに管理したいときに便利な API

通常の observable ではオブジェクトや配列をリアクティブにするのが一般的だが、observable.box を使うと、数値や文字列、ブーリアンのようなプリミティブな値を簡単にリアクティブにできる

`observable.box` の使い所

シンプルな状態管理: オブジェクトや配列を使うほどではない単純な値の管理に最適
関数コンポーネントでの利用: React の関数コンポーネント内で useState の代わりに使える
クラスストアのプロパティとして: makeAutoObservable を使用する際、プリミティブなプロパティを observable.box で管理可能
フォームの入力値管理: ユーザー入力のリアクティブな更新をシンプルに実装できる
設定値の管理: フラグや単純なカウンター、閾値などの状態をリアクティブに持つ場合に便利

`observable.box` の基本的な使い方

import { observable } from "mobx";

const count = observable.box(0);

console.log(count.get()); // 0
count.set(5);
console.log(count.get()); // 5

`get` と `set` の使い方

observable.box では値を取得するときに get()、更新するときに set(value) を使う

const message = observable.box("Hello");
console.log(message.get()); // "Hello"
message.set("MobX");
console.log(message.get()); // "MobX"

`autorun` との組み合わせ

observable.box は autorun と組み合わせることで、値の変更をリアクティブに検知できる

import { autorun } from "mobx";

const isActive = observable.box(false);

autorun(() => {
  console.log("isActive の値: ", isActive.get());
});

isActive.set(true); // → "isActive の値: true" と出力される
isActive.set(false); // → "isActive の値: false" と出力される

`computed` との組み合わせ

computed を使えば、observable.box の値を基に計算された値をリアクティブに取得できる

import { computed } from "mobx";

const price = observable.box(1000);
const taxRate = observable.box(0.1);
const totalPrice = computed(() => price.get() * (1 + taxRate.get()));

console.log(totalPrice.get()); // 1100
price.set(2000);
console.log(totalPrice.get()); // 2200