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