今回はReactとVue.jsのどちらを選定するかについて状態管理という観点で書いていこうと考えてます。
結論
いきなり結論ですがReactは関数型視点でコンポーネントを設計していく。Vue.jsはオブジェクト指向視点でコンポーネントを設計していく。
以上終わり。
と、さすがにこれだけだと何のこっちゃという話なので整理していきたいと思います。
そもそもJavaScritptとは
JavaScriptは言語の中でもかなり特殊な言語です。具体的に言うと関数型っぽくも書けるしオブジェクト指向っぽくも書ける言語です。結果的にプログラミングスタイルが定まっていないため一部混乱をきたしています。そういうある意味カオスなところがこの言語の持ち味です。ただ、その影響もあってライブラリの設計思想にも影響が出ています。
ReactとVuejsのコンポーネントの設計方針
Reactはコンポーネントに状態を持たせないステートレスなコンポーネントの設計を推奨しています。つまり、stateを使わずにpropsを使え。コンポーネントにライフサイクルを持たすなと推奨しています。stateやライフサイクルはコンポーネントに副作用をもたらすためです。
Vuejsはコンポーネントにステートレスな状態を持たせることが推奨していません。別に否定もしてませんが。ただ、現実問題としてVue.jsのコンポーネントにステートレス状態にさせることにそこまでメリットをやはり感じません。
コンポーネントの状態について
結局、コンポーネントにおいては状態をどう扱うかが肝になってきます。逆に状態を持たないアプリケーションであれば無理してコンポーネント化しなくてもいいのではないかと個人的に考えてます。
そのため、ReduxやVuexのなどの状態を管理するライブラリを使用することとセットで考える必要があります。
ReduxとVuex
ReduxはReactのstateの状態を持たせないステートレスなコンポーネントを強制することができます。ReduxはElmという関数型言語から影響を受けているためこのような作りになっています。つまりReduxの冗長な書き方は関数型から影響を受けていると考えればある意味納得できます。私も初めて触った時は処理が分散していてなんとも見通しが悪いなと感じました。しかし、処理が固まっていて欲しいと考えるのはオブジェクト指向のカプセル化の考えが染み付いているためだと後になって気づきました。 その反面、Vuexについてはスッと学習コストもなく覚えることが出来ました。同期処理ならここ、非同期処理ならここというようにVuejsの延長線上で考えれます。恐らくオブジェクト指向のままで考えると便利なライブラリです。
ReactとVuejsの選定基準
1. 関数型とオブジェクト指向での基準
開発者がオブジェクト指向型言語出身のメンバーであればVue.jsを使った方がすんなり開発できます。例えば、Ruby on Railsをよく使用しているエンジニアが参加するのであればこちらをオススメします。特に開発メンバーのJavaScriptのスキルがそこまで高くないのであればこちらの方がリスクが低いです。 逆に中心的なフロントエンドエンジニアがプロジェクトに存在するのであればReactがいいでしょう。
2. 大規模サービスかどうか
Vue.jsは状態を持ってしまうので、Reactと比較すれば大規模なサービスでが苦しくなってきます。ちゃんと設計すれば問題ないという指摘もありますが、バックエンドに比べて変更が多いフロントではアーキテクチャで固めた方が保守しやすいです。
3. 設計の難易度
Reduxのフレームワークは非同期処理以外はどこにロジックを記述すればいいか明確です。デメリットとしてはよく言われているようにボイラーテンプレートが多くなります。
反対にVuexは処理をどこに持たすのか自由なため設計次第ということになります。そのため、初期の学習コストは低めですが保守コストはVue.jsの方が高いです。
私はどちらを使うことにしたのか
私はサーバサイドを関数型のElixirを使っているのでReactを使うことにしました。スタートダッシュではVue.jsの方がメリットが高いので迷ったのですが思想は共通していた方が後々良いと判断しました。後は、別の仕事でも使用していたので学習コストはゼロだったのも理由です。
