MobXではじめるReactiveアーキテクチャ

2017/06/21 Frontend de KANPAI!

はじめまして

Yuji Sugiura / @leader22
フロントエンド・エンジニア at PixelGrid Inc.
- そういえばDeNAで働いてた頃もありました
最近はWebでリアルタイムな動画とかWebRTCとかやってます
ブログにもいろいろ書いてます -> console.lealog();

leader22

[PR] 技術メディアやってます（有料）

CodeGrid

CodeGrid - フロントエンドに関わる人々のガイド

本日のテーマ

mobx

MobX

お品書き

MobXとは
- どんなライブラリなのか
- どんな感じのコードになるか
- どういう考え方で使うと良さそうか
MobXを使ったReactiveなアーキテクチャの例
- 作者直々のサンプルコードより

いちおうContributorもやってるので、なにか質問等あれば、この後の懇親会でもTwitterとかでもお気軽に！

これからのフロントエンドに求められ(略

なのかと言われると・・
世に星の数ほどあるただのライブラリの紹介です
- 既に知ってたら聞き流してください

必要なものを自分で見て「選択」する力を試すということで・・(˘ω˘ )

MobXとは

Webアプリケーションにおける状態（state）を管理するためのライブラリ
https://github.com/mobxjs/mobx
- 現在の最新バージョンは3.1.16
- GitHubのスターは9.6k↑
- TypeScript製（Flowの型定義も一応あるよ）
- 0 Dependencies！
作者は@mweststrate氏

Reactと相性がよいのであわせて使われることが多いけど、別に依存関係はないです。

MobXよもやま

各ライブラリのの公式ページでも言及されてたり
- Context - React
- 他のフレームワークとの比較 - Vue.js
reactjs/reduxとの比較
- Dan Abramovさんのツイート
- React Amsterdam Conference 2017 - YouTube
ついにヨーロッパ最大のReactカンファレンスでも
- ReactEurope 2017 Day 2 AM - YouTube

海外では既にそれなりに、日本でも少しずつ認知されてきた感がある今日このごろ。

MobXの基本

3つの概念

idea

Actions: Stateを変更すること
State: 状態それ自体
Reactions: 状態を使って何かすること全般
- Views: 状態を使って、画面を表示する

ActionsによりStateを変更する。 Stateが変更されると、自動的にReactionsが発火する。（= Viewsも更新される。view = f(state)）

APIでみると

idea

Actions: mobx.action
State: mobx.observable, mobx.computed
Reactions: mobx.reaction, mobx.autorun
- Views: mobx-react.observer

他にもAPIは色々ありますが、最低限これだけ覚えれば十分です。

最低限のコード例

const { autorun, observable } = require('mobx');

// State
const state = observable({
  count: 1,
});

// Reaction(Views)
autorun(() => {
  console.log(`Count is ${state.count}!`); // Count is 1!
});

// Actions
function increment() { state.count++; }
function decrement() { state.count--; }

increment(); // Count is 2!
increment(); // Count is 3!
decrement(); // Count is 2!

Stateを定義して、使用して、変更するだけ。これが全て。

自動的 = Reactive

Stateが変更されると自動的に
- その値を使用している関数が呼ばれる
- その値を使用しているプロパティが更新される
  - その値を表示しているViewsがre-renderされる
宣言的に記述できる
- 書き漏らしとかない
- コードの見通しもよくなる

ただのオブジェクトで管理するよりも圧倒的にわかりやすいです。

もう少し長いコード例 w/ React

const { action, computed, observable } = require('mobx');

// ObservableなStateと、Stateを変更するAction
// Decoratorsは必須ではなくOptionalな選択肢
class Store {
  @observable count = 1;

  // ObservableなStateに更新があった時"だけ"、自動的に更新されるプロパティ
  @computed get isOdd() {
    return !!(this.count % 2);
  }

  @action increment() {
    this.count++;
  }
  @action decrement() {
    this.count--;
  }
}

// ViewからStoreのActionを呼ぶための・View以外の用途にStoreを使う層
// 別にViewから直接Storeを叩いてもいいけど
function createEvent(store) {
  return {
    increment() {
      store.increment();
    },
    decrement() {
      store.decrement();
    }
  };
}

const React, { Component } = require('react');
const { observer } = require('mobx-react');

// ObservableなStateに更新があった時"だけ"、自動的にrenderされるコンポーネント
@observer
class View extends Component {
  render() {
    const { store, event } = this.props;
    return (
      <div>
        <div>{store.count}</div>
        <button onClick={event.increment}>+</button>
        <button onClick={event.decrement}>-</button>
      </div>
    );
  }
}

const ReactDOM = require('react-dom');
const { useStrict, reaction } = require('mobx');

// @acitonからしかStateが変更できないように
useStrict(true);

const store = new Store();

// Stateの用途1
// ObservableなStateに更新があった時"だけ"、自動的に呼ばれる関数
reaction(
  () => store.isOdd,
  isOdd => {
    console.log(isOdd ? 'odd' : 'even');
  }
);

// Stateの用途2
ReactDOM.render(
  <View store={store} event={createEvent(store)} />,
  document.getElementById('app')
);

MobX自身はアーキテクチャは規定しないので、Fluxぽくするもよし、MVCぽくするもよし、MVVMぽくするもよし。

MobXを使うとどうなるか

ObservableなStateをどう定義するかが最大の関心事になる
そしてそのStateを用途に応じてリンクさせていく
あとはStateを更新すれば、「変更が必要なものだけ」が自動的にアップデートされる
- AしたらB、BしたらCするみたいな手続き的コードは消える
- shouldComponentUpdate的なチューニングも不要になる

とにかく、Stateを中心に考えてコードを書く！全て自動的に（= Reactiveに）処理されるように！