VueとReactで迷ったらどうする？

VueとReactで迷ったらどうする？

Web 開発のフロントエンドのフレームワークとしてよく利用される Vue と React ですが、どちらを学習すれば良いか迷うことも多いと思います。この記事では、迷った時にどうしたら良いのか、独断と偏見ですがガイドラインを書いてみました。

人によって考え方は色々だと思いますが、一人の意見として読んで頂ければと思います。

迷うと言うことは強制力はない

最初に言えることが、どちらか迷うと言う事はその選択に「強制力」はないと言う事です。「強制力」とは顧客の要求や、会社の方針でどちらを使うかが指定されていたりする場合を指します。この場合は、選択の余地は殆どないので、方針に従うと言うのが選択肢だといえます。

就職を目指す場合は、就職を目指す会社を調べてみると良いかと思います。会社の方針として、利用するフレームワークをある程度決めていることがわかった場合は当然その方針に合った方を学習した方が有利です。

案件によっては、両方使い分ける方針の場合は迷いますのでこの後を読んでみてください。！

統計的な数値は？

インターネットで検索をしてみると、世界的には React を利用するケースが多いようです。実際にシリコンバレーの求人をみてみると React ができる人を求める方が多いようです。

ただし、日本に注目すると、Vue と React は結構近い数字が出てきます。最近では、Vue の人気も高まっているように見えます。

フリーランスの場合は、仕事はある程度自分で選べますが、会社で働くことを考えると React の方が有利に見えます。

初心者が学習する場合

初心者が学習する場合はどうでしょうか？ 就職を目指す場合はやはり、目標とする就職先の方針を知ることが第一だと思います。しかし、学習コストは結構違います。

学習コストとは、どれくらい「習得が難しいか」の指標です。

これは、Vue の方が学びやすいと感じる人が多いといえます。 理由は、

＊　Vue は HTML ベース（React は基本的に JSX）

＊　共通のステート管理は、VUEX の方が React よりわかりやすくて使いやすい

＊　設定が簡単（Vue は GUI も使える）

が大きな違いです。

Vue は HTML ベース

Vue でページの構成を記述する場合は、React が採用している JSX よりオリジナルの HTML に近い分、HTML からの移行が楽に感じるケースが多いと思います。 もう一つは、React の場合、Javascript の中に JSX を書くという感じですが、Vue の場合、HTML 部分と Javascript が明確に別れているので HTML/CSS から入る場合でも違和感が少なくて済むと思います。逆に React の方が、ちょっと違う感じと思う場合が多いと思います。

共通のステート管理

React の場合、部品間で共通のステートを管理したい場合、「Redux」を利用することが多いです。この Redux は初心者にはわかりにくく React 学習の一つの壁のような存在です。一番面倒なのは、Redux で管理するステートは基本的に「イミュータブル（immutable）」なので扱いがちょっとだけ面倒です。

通常の数値や文字列の場合はあまり問題はないのですが、配列（array）やオブジェクトなどは、扱いに注意が必要です。

一方、Vue の場合は、Vuex という拡張機能（プラグイン）が用意されていて設定が簡単なのに加えて、ステートは「ミュータブル（mutable）」なので、殆ど普通の変数と同じように扱って問題はありません。

設定が簡単

ステート管理のところでも触れていますが、Vue の場合は拡張機能（プラグイン）が用意されていて、簡単に必要な機能を追加できます。拡張機能を追加する際に設定もやってくれるので、初心者でもあまり意識することなく、拡張機能を使うことが可能です。

一方で React の場合、モジュールを npm などでインストールした後、必要な設定を自分で行う必要があるのでちょっと面倒です。慣れてしまえば難しいことではないのですが、初心者には、複数のソースファイルを作成して記述する必要があるので最初は戸惑う場合が多くなります。

拡張機能の例では、上にあげたステート管理（VUEX v.s. React）やページ変更の機能のルータ（Vue Router v.s. React Router）なども Vue の場合は簡単に設定できます。Web アプリをデスクトップアプリにする場合に Electron を使う場合も多いと思いますが、これも拡張機能を入れれば基本的な設定が済んでしまう Vue に対して、React の場合はファイルの追加や設定の変更を全て自分でやらなければいけません。

また、Vue の場合、Vue CLI に GUI（Vue UI)が実装されていて、Web ブラウザを使った GUI でプロジェクトの設定やリリース用のイメージの生成を行うことができます。React の場合は基本は全てコマンドラインでスクリプトを動かす必要があります。

どちらを選ぶか？

初心者がフロントエンドのフレームワークを学習する際に迷ったら、基本的には Vue がおすすめです。基本的な記述方法はだいぶ違いますが、ステートの管理の概念や、ページ切り替え（ルーティング）などのコンセプトは Vue も React も似ています。

Vue を学習してコンセプトがわかっていれば、React を学習する際もスムーズに設定をしたり、理解も早いと思います。実際に、設定はプログラミングの本質ではないにもかかわらず、意外に躓くことも多い部分です。そこに時間を費やすよりは、「機能」や「実装」の部分に時間をかけた方が結果的に早く開発ができるエンジニアになることができます。

さらに、Vue は UI を使えば、コマンドラインで一々スクリプトを起動しなくても、基本的な操作は全てできます。

以上の理由から、Vue の方が、実際の開発・制作に入っていくまでの過程が簡素化できるので初心者が迷ったら Vue を選んだ方が、効率的に全体の仕組みが理解できるといえます。

両方同時にやるのは？

Vue と React を同時進行で学習することも勿論可能です。実際に両方を試してみて使いやすい方を選ぶというのは確かに一つの方法です。おそらく、ある程度経験がある方の場合この選択肢は良いと思いますが、初心者にはあまりお勧めできません。

理由は、「時間がもったいない」からです！２つ並行して学習すれば基本的に「倍」の時間がかかります。同じものを２回作るより、違うものを作る経験を増やした方が確実に「開発力」が身に付きます。初心者の学習で一番重要なのは、まずは色々開発ができるようになること（色々な物が作れるようになること）です。

Vue で一通りの物が作れるようになった時点で、React が必要なら勉強するで十分です。Vue を習得した後ならば、React は同時に勉強する場合の半分以下の時間があれば十分に同じレベルにいけるはずです。結局両方をマスターするトータルの時間は順番にやった方が短くて済む場合が多いと思います。

Vue の学習のコツ

Vue を学習する人の殆どは、Javascriipt の基本は既に勉強されている場合が殆どかと思います。従って、Vue の勉強は「勉強」というよりは、「実践」「制作」という感じで取り組むのがベストです！ 理由は、Vue の本質は Javascript を書くことではなくて、ページの表示に使う部品を作る事にあるからです。プログラム自体は、ページでの入力やクリックに対する反応が中心です。勿論、取り込んだデータを処理したりする部分も必要ですが、これは純粋に「データを処理するプログラム」であって、Vue で作ったページで取得したデータを処理しているに過ぎません。

従って、Javascript で新しいことを覚える必要は余りありません。 実際に何かを作る過程で学んでいくのが一番効率的な学習方法です。

まとめ

Vue と React どちらを学習するかで迷ったら、以下の２つのどちらかを選ぶのが独断と偏見によるお勧めです。

＊　会社や顧客の方針・要望があるときは、方針に従う

＊　初心者が勉強するのに迷ったら、まずは Vue をやってみる

プログラミングで一番大切なのは、「作れること」「使えること」です。 Vue か React で迷う方の殆どは、Javascript の基本は学習されている場合が多いと思いますので、その経験を生かして、「作りながら学ぶ」というのが一番効率的に Vue や React などのフロントエンドのフレームワークを使いこなすためのやり方です。

基本は、「今必要な物が優先」「選択できるならまずは簡単な方をやる」が選択の基本です。２つ同時には早そうに見えますが、やってみると思ったより時間がかかるもので、結果的に順番にやった方が早い場合が多いように思います。

独断と偏見ですが、参考になれば幸いです。