https://uga-box.hatenablog.com/entry/2024/11/08/000000

MobXのcustom observablesおよびAtomについて調べた

mobx.js.org

`Atom`とは？

MobXの低レベルAPIの一つで、リアクティブシステムの中核を成す概念
自作のリアクティブデータソースを作成するために使われ、MobXがリアクティブに状態を追跡・更新できるようにする
通常の使用では必要ないが、カスタムのobservableを作成したいときや、MobXの内部動作を理解するために重要である

`Atom`の基本的な役割

リアクティブなデータの依存関係を管理する
データが読み取られるときにMobXにその依存関係を通知
データが変更されたときにMobXに通知し、関連する計算（computed）や副作用（reactionやautorun）を再実行させる

基本構文

以下はAtomを使ったリアクティブデータのカスタム実装の例。

import { createAtom } from 'mobx';

class MyObservable {
  constructor(initialValue) {
    this._value = initialValue;
    this.atom = createAtom(
      'MyObservable',  // 任意のデバッグ用名前
      () => this.onBecomeObserved(), // 観察され始めたときに呼ばれる
      () => this.onBecomeUnobserved() // 観察されなくなったときに呼ばれる
    );
  }

  get value() {
    // リアクティブな依存関係を追跡
    this.atom.reportObserved();
    return this._value;
  }

  set value(newValue) {
    if (newValue !== this._value) {
      this._value = newValue;
      // 変更を通知
      this.atom.reportChanged();
    }
  }

  onBecomeObserved() {
    console.log('Observable is now being observed.');
  }

  onBecomeUnobserved() {
    console.log('Observable is no longer observed.');
  }
}

const observable = new MyObservable(10);
const disposer = autorun(() => {
  console.log(`Value is: ${observable.value}`);
});

observable.value = 20; // "Value is: 20" がログに出力
disposer();
observable.value = 30; // 何もログに出力されない（観察されていない）

reportObserved()
- getメソッド内で呼び出して、そのデータが観察されていることをMobXに通知
- これにより、autorunやreactionなどがそのデータに依存していることをMobXが認識する
reportChanged()
- データが変更されたときに呼び出して、変更をMobXに通知
- これにより、依存している計算や副作用が再実行される
onBecomeObserved / onBecomeUnobserved
- それぞれ、データが観察され始めたときと観察されなくなったときに呼ばれるフック
- 外部リソースの管理（例: WebSocket接続、タイマーなど）に便利

`Atom`のユースケース

カスタムのリアクティブデータを作成
- MobXのデフォルトAPI（observableやcomputedなど）ではカバーできない特殊なデータをリアクティブにする
外部リソースの管理
- 非同期データ（例えばWebSocketやローカルストレージ）をMobXで管理する際に、リアクティブ性を持たせるためにAtomを使用
パフォーマンス最適化
- 必要最小限のデータだけをリアクティブにするため、手動でAtomを管理して細かい制御を行う

通常のMobXの使用と`Atom`の違い

特徴	通常のMobX（observable, computed）	Atom
対象ユーザー	高レベルの状態管理を簡単に実現したい人	より細かくカスタム制御をしたい人
使いやすさ	簡単	低レベルAPIで手動管理が必要
用途	一般的な状態管理	カスタムリアクティブデータ、外部リソース
フック（ライフサイクル）	自動管理	観察状態のフックが提供される