MobXのdevtoolsまとめ #React

React+Reduxで開発する場合には redux-devtools や redux-devtools-extension を使うことでdispatchされたアクションのログやstoreの変更履歴を見ることができて，デバッグに大変便利です。

React+ReduxではなくReact+MobXを使った場合にはどのようなdevtoolsが使えるのか調べました。

mobx-devtools

公式に提供されているChrome extensionです。storeを変更するactionを実行すると，変更内容とそれに伴うreactionの実行の様子が表示されます。以下のスクショはボタンを押すとカウントが増えるサンプルアプリでボタンを押した時の表示です。actionに名前を付けていなかったのでunnamed actionになっています…

mobx-state-tree を使った場合にはstoreの状態をより詳細に見ることができ，タイムトラベルも使えるようです。

（画像引用元 https://github.com/mobxjs/mobx-devtools#mobx-state-tree）

Componentsタブではstoreをobserveしているコンポーネントの一覧を見ることができます。Performanceタブではstoreを変更するactionが実行されてからDOMが実際に変更されるまでの時間を表示する機能を有効にすることができます。

まとめとしては，actionの履歴をたどることができる機能はかなり便利そうですが，storeの履歴をたどることができる機能はmobx-state-treeを使った場合しか使えないのが悲しいところです。

mobx-react-devtools

mobx-devtoolsはChrome extensionでしたが，こちらはReact Componentとして提供されています。以下のようなコードを書くと，デバッグ用の機能を有効にするためのコンポーネントがブラウザの右上に設置されます。

import DevTools from 'mobx-react-devtools';

const stores = createStores();
ReactDOM.render(
    <React.Fragment>
      <Provider {...stores}>
        <App />
      </Provider>
      <DevTools />
    </React.Fragment>,
    document.querySelector('#react-root')
  );

↓ ブラウザ右上に浮かぶ，デバッグ機能を有効にするためのコンポーネント

左の時計マークのボタンは，storeを変更するactionが実行されてからDOMが実際に変更されるまでの時間を表示する機能を有効にするボタンで，mobx-devtoolsのPerformanceタブと同じ働きをします。

↓「+1」ボタンを押してから3msでDOMに変更が適用されています。

中央のツリー構造のボタンを押してからReactコンポーネントをクリックすると，そのコンポーネントが依存しているstoreの値が表示されます。↓の図では doubleCount は count の値を2倍にするcomputed propertyだったため，依存関係が入れ子になっています。

右の吹き出しマークのボタンは，actionの履歴を表示する機能を有効にするボタンです。このボタンを押して，ブラウザでJavaScriptのコンソールを開いてからactionを実行すると，mobx-devtoolsで表示されたようなactionの履歴が表示されます。

まとめとしては，mobx-devtoolsと比較すると，コンポーネントが依存しているstoreの値を表示する機能は便利だと感じました。一方で，actionの履歴を表示する機能はmobx-devtoolsのほうが見やすいような気がしています。

mobx-remotedev

redux-devtools-extension と同じ作者が作ったライブラリです。このライブラリが提供している remotedev という関数でstoreを囲むと，storeの変更がredux-devtoolsに表示されるようになります。

問題点としては，開発が停滞していることが挙げられます。一部のアクションはredux-devtoolsに表示されるのに，なぜか他のアクションは表示されないなど，怪しい挙動が見受けられるためライブラリの修正が必要かもしれません。