はじめに：Reactのstateはめんどくさい
stateには良いことが何一つない。
私はそう思っています。
stateは、
- コンポーネントの作りが複雑であることを示している
- テストがだるい
- コンポーネント外からの参照がしづらい
と軽く挙げるだけでもデメリットがホイホイ出て来ます。
唯一かつ最大のメリットと思っているのは、
機能をコンポーネントで完結させられることだと思います。
これは配布や再利用にとても有効で、とにかく使いやすいと感じます。
Statelessなコンポーネントに変えよう
まずは簡単なStatefulなコンポーネント、
MyTextを用意しました。
See the Pen 9683c6b277428eccb652_1 by tsuuuuu_san (@tsuuuuu_san) on CodePen.
適当に入力してみてください。
コードを読めばティンときますが、
必須チェックと数値チェックが機能に入っています。
Statelessにしてみます。
See the Pen 9683c6b277428eccb652_2 by tsuuuuu_san (@tsuuuuu_san) on CodePen.
ロジックをMyStore classに移しただけじゃねーか！
ですって？
ちょっとそれは後にしてください。
先にこれを質問させてください。
MyTextのコードを見て！・・・使いやすそうですか？
多分大半の人は、使いづらそうと思っているのではないでしょうか。
本気だからこそ、Stateless Component
お気付きの方もいると思いますが
上記の一見使いづらそうなコンポーネントは、
自由度が飛躍的に向上 しています！
サンプルのerrorsに注目して見ましょう。
errorsはValidationの結果に応じて、メッセージが格納されます。
Statefulな場合、次の特徴があります。
- 入力すると勝手に必須と数値チェックが走る
- チェックの内容はerrorsに格納される
- 初回Renderで必須エラーが出てしまう
- つまり、これ単体で使いやすい
Statelessの場合、次の特徴があります。
- 適切なpropsを設定しないと入力チェックは走らない
- つまりこれ単体をポンと置いても望んだ動作は得られない
- ただし、好きなValidationが入れられる
- さらに好きなタイミングでValidationをかけられるように調整できる
- つまり、自由度が高い
- 自由度が高いので、急な仕様変更にも対応しやすい
- HOCしてしまえば、Statefulな特徴を持ったコンポーネントも作れる
現場にもよりけりでしょうが、
Stateless化にメリットを感じる方も少なくはないのではないでしょうか。
Stateless化を推し進めると出てくる問題
結局のところ、データやロジックをどこかに寄せる問題が出てきます。
さらにStoreを取り入れていない場合、propsの伝搬を考えるのに一苦労です。
Mobxをご存知でしょうか
一言でいいますと、Storeです。
Reduxの複雑な手順を全て取っ払って、Storeだけにしたような感じです。
Mobxはその自由度がゆえに、ぶっちゃけ使いづらいです。
PJや要件などに合わせ、適切にStoreを設計しなければ、
破綻すること間違いなしです！
しかし・・
コンポーネントを操作しやすいように、
それに対応したStoreを用意するくらいなら、別に設計なんて必要ありません。
既存のStore設計の邪魔もしないでしょう。
MobxでコンポーネントにPropsStoreを与える
MobxStoreはどこからでも参照できます。
さらに、使い方は単純です。
- Storeを作る
- Storeをどこからでも呼べるようにRootコンポーネントにProviderを仕込む
- 使いたいStoreをinjectして、Storeを参照する
だけです。
Stateless化を推し進めると出てくる問題 が解消されるでしょう。
import {observable, computed, action} from 'mobx';
export default class MyTextStore {
/* MyTextのprops.valueにセットする */
@observable
value = '';
/* MyTextのprops.onChangeにセットする */
@action
changeValue = value => {
this.value = value;
}
/* MyTextのprops.errorsにセットする */
@computed
get errors() {
const { value } = this;
const errors = [];
if (value === '') errors.push('必須だよ');
if (isNaN(value)) errors.push('数字でお願い');
this.setState({ value, errors });
return errors;
}
}
/*
※ Mobxよくわからない人向けの説明
@observableが付いていると、値に変更があった時にreRenderが走ります。
@actionが付いているものは、@observableな値を明示的に更新する関数です。
@computedは、@observableの変更に伴い、自動で計算されるものです。
*/
こんなStoreを作成して、コンポーネントにセットします。
(
面白いのは、セット方法もこれまた自由なのがMobxクォリティ。
すでにMobxStoreを用いているなら、そのStoreから参照できるようにしても良いですし、
そのままinjectして、classプロパティをセットしてもいいでしょう。
props用のObjectを作成する関数をStoreに用意しても良いですし、
HOCを使うのもありかもしれません。
)
Stateless化 + MobxStoreのコンボは、Statelessコンポーネントのメリットを加速させます！
- MobxStoreを用いることで、Stateを持っているかのような動作が可能になる
- MobxStoreはどこからでも参照できます
- Submitボタン押下で再Validation!なんかもできちゃう
外伝：MobxStoreは、どこまでも進化する！？
上記でMyTextに特化したMobxStoreの例を紹介しましたが、
これはあくまで一例にすぎません。
例えば、オブジェクト指向を併用すれば、
値やValidationはオブジェクトにロジックを寄せられるかもしれません。
コンポーネント単位でStoreを用意することが大変なら、
AtomicDesignの大きい単位で用意するのもありかもしれません。
なんてめんどくさい！Mobx！
しかし、より良いStoreの使い方を見つけた時のあなたの脳汁はきっとダバダバです。
最後に
Mobxを使おう！的な記事になったような気もしますが、そんなつもりはありません・・。
とにかくいいたかったのは、
極力Statelessコンポーネントを作ろう！
Mobx使うとStatelessコンポーネントも使いやすくなるよ！
ということです。
是非お試しあれ。