主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。
色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。
結論
JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。
何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。
- Reactは利用者が「開発者」であることを想定/期待します。
- What, Whyを重視する
- 利用者を厳しめに教育する
- Vueは利用者が「ユーザー」であることを想定します。(もちろん開発者向けの機能、ドキュメント等も提供してます)
- Howを重視する
- 利用者を甘やかす
それぞれのメリット
共通
- コミュニティが非常に大きい
- 仮想DOMによりパフォーマンスは良い
- ドキュメントが充実している
- 各種コンポーネントが豊富
- boilerplate(プロジェクトの雛形)が豊富
- Webpack, Parcel, Babel, Typescript, Electron, etc...
ReactはJavaScriptの力を「どこでも最大限に」発揮できることがメリットです。それでいて一定の秩序をもたらします。
- React Native, React VRなどでモバイル開発、VR開発もできる。
- 主にクラスベースで実装するため、Java経験者等には分かりやすい。
- JavaScriptとJSXで記述するため、コードとテンプレートの両方に対してLint、補完、フォーマッタ等を適用可能。
- JSX周りのエラー解析が、他のテンプレート構文よりも容易。
- TypeScriptによりLint、補完をさらに強化できる。(Flowでも可)。
- エコシステムに一定の秩序をもたらしてくれる。(ES2015+Babelによりもたらされる秩序)
- Facebookの一流開発者の開発手法、考え方に触れられる機会が多い。
**Vueはとにかく冗長な記述なしに、Webアプリを「HTMLやCSSを中心に」書けるのがメリットです。**そのために必要な機能は大体揃っています。
- VueテンプレートでWebアプリを簡単かつ簡潔に記述できる。
- SFC(Single File Component)を使うと、HTML/JavaScript/CSSが区別して管理できる。
- Pug、Sassなどを選択できる/しやすい。
- Vue CLIによるboilerplate作成がとても簡単かつ柔軟。
- ReactのようなJavaScript、JSX中心の開発スタイルも提供している。(ただしVueテンプレート等の恩恵が無くなる)
雑感
八方美人で曖昧なスタンスのVue
Vueのドキュメントはとにかくすぐに書いてもらってVueの素晴らしさを実感してもらってVue利用者になってもらうことに重きを置いています。初心者や開発力が無いターゲットが逃げないように一つのHTMLファイルで書くことを重視し、JavaScript等は極力見せないようにしています。dataとかcomputedとかv-forとかテンプレート構文っぽいものを書くだけで、Reactの半分くらいのコード量で記述してみせることで優位性をアピールします。実際に素敵です。
しかしまともな開発をする場合に必須になるであろうVueクラスコンポーネント、SFC(Single File Component)等は中〜後半に別トピックで紹介しています。確かに序盤に「VueはES2015とかWebpackとかいらないよ。HTMLだけで書けるよ。」とライト層にアピールした後、次にいきなり「あ、でも実際にはSFCで作るのが普通だけどね。その場合はReactみたいにES2015とかWebpackとか色々と必要だけどね。」と書くのは確かに気まずいかもしれません。しかしプログレッシブフレームワークを謳うのであれば、王道であろうSFC等の開発スタイルに導くようにガイドを進めるべきだと思います。プログレッシブなのにどこに進歩していいかがよく分かりません。
VueのドキュメントはEasyに重きを置くあまり、本来Vueが持っているはずの「あるべき開発スタイル」を省略しているような気がします。Vueは「Reactの原理主義的な考え方」に対する不満を解消するために登場したフレームワークでもあるため、明確なスタンスを取ることを避けようとしているように見えます。「HTMLだけでこんなに簡単に書けるよ」とか「SFCでも書けるよ」とか「クラスっぽくも書けるよ」とか「あ、Vueテンプレートが不満ならJSXでも書けるよ」とか、とにかく節操がなさすぎます。
このようにVueはフレームワークでありながら、その王道となるべき開発スタンスを明確にすることを避けています。このような寛容さがあるからこそあらゆるユーザーを取り込めているのかもしれませんが、このようなスタンスの曖昧なVueを使っても開発者のスキルや考え方を中長期的にレベルアップさせるのは難しいと思います。また後述するVueコンポーネントのカオスさにも寄与してしまっているように感じます。
原理主義的で明確なスタンスのReact
一方でReactのドキュメントは明らかに開発者を意識しています。JavaScriptを知らない層には「JavaScriptを知らないと難しいから、このチュートリアルで30分〜1時間くらい勉強してね」と言い放ちます。最初からクラスやReactとDOMのレンダリングの関係について触れます。コーディングの仕方も「セミコロン周りのバグを回避するために、JSXは丸括弧で囲むといいよ」とか豆知識を散りばめてます。設計の考え方や思想についても「テンプレート構文は関心を分離してない。ただテクノロジを分離してるだけ。」とか物議を醸しそうなトピックにも平気で踏み込んできます。
Reactのドキュメントは、Vueのように非実用的な書き方(HTML + <script>タグのみ)で簡単なサンプルを書かせて、すぐになんちゃって開発者になれる気分を味わせるためのドキュメントではありません。ちゃんとしたReact開発者としての開発するために必要な重要なトピックは初めから積極的に触れますし、それを使うべきだと思想を推奨したり押し付けたりもします。例えば初心者が好みそうな「色々な状態や処理を放り込んだコンポーネント」に対しては分割しろとか、状態を持つなとか口出ししてきます。まるでチームで開発をする時にレビューで拡張性や保守性の無さについて指摘をしてくるかのようです。
このようなReactの厳格なスタイルを嫌うのは構わないと思います。時間がない時はまずは全部入りのコンポーネントで作るのも正解の一つです。しかし開発をしているときに「厳格さ」と「いい加減さ」のトレードオフを理解した上でどちらを選択しているかを意識する必要があります。そのためには厳格なスタンスというものがどういうものかを知る必要があります。「厳格さ」から厳格さを削れば「いい加減さ」になるかもしれませんが、「いい加減さ」からいい加減さを削っても「厳格さ」にはなりません。
NOTE: Vueのやっかいなところは、知らず知らず「いい加減さ」を優先したコーディングをしてもVueがいい感じに厳格なものに仕上げてくれるフレームワークとしての完成度の高さです。利用者の悪いところを気付かせない、指摘しないため、中長期的に見るとその開発者の成長やレベルアップの面ではマイナスになります。初心者であるほど使いやすいフレームワークであるのに、その成長する機会を奪ってしまうフレームワークでもあるという諸刃の剣です。
Facebookの一流開発者はこのようなことを常に意識して開発を行ったり、Reactのようなライブラリを作っています。そしてドキュメントでもそのエッセンスを真剣に利用者に伝えようとしています。
VueコンポーネントはReactコンポーネントの秩序を捨てた？
Vueの曖昧なスタンスの影響なのか、VueコミュニティのVueコンポーネント界隈はかなりカオスという印象です。
Reactであれば基本的にReactコンポーネントのクラスをimportすれば使えます(ES2015+JSXを前提としているため)。Vueの場合はVueコンポーネントをimportしただけではそのまま使えない(あるいは簡単に使えない)ケースがあります。
NOTE: この部分については私の知識不足なだけかもしれません。例えば下の箇条書きに挙げているチャート関連のVueコンポーネントで遭遇した問題を解消できる方法やノウハウなどがあれば、Vueコンポーネントに対する評価は一変しそうです。
- HTMLの
<script>タグで読み込むことのみを想定したVueコンポーネント。(ex. hchs-vue-charts) - importして利用できるVueコンポーネントでも「そのままは利用できず、Vue.extend等で継承して実Vueコンポーネントを定義してから使用する」必要があるコンポーネント。(ex. vue-chartjs)。
- Vue v1.xでしか利用できないコンポーネント。
Vue公式サイトのドキュメントをざっと読んでVueの簡潔さや使いやすさには感心しましたが、いざサードパーティのVueコンポーネントを利用し始めると上記のようなVueコンポーネントに遭遇し、その使いづらさに失望しました。いくら自分自身のWebアプリを簡単かつ簡潔に記述できても、サードパーティのコンポーネントを利用する時にこのような苦労が伴うのでは意味がありません。(それともレアケースを運悪く連続で踏んだだけでしょうか？)
NOTE(2018/06/17): 上記の箇条書きに含まれる例(ex箇所)で挙げているチャート関連のVueコンポーネントは、Vue公式が管理しているvuejs/awesome-vueレポジトリで紹介されているものです。つまりVueコミュニティのチェックおよび評価をある程度受けた上で推奨されているVueコンポーネントです。また「1年間メンテされていないものを使うのが悪い」とどこかでコメントがありましたが、Vue公式が管理しているawesomeレポジトリにそのようなものを載せたままなのもどうかと思います。
Vueが売りにしているプログレッシブフレームワークは一部のユーザーには魅力的なものかもしれません。しかしプログレッシブさや自由度の高さ故に、ユーザベースが悪い意味で多様化というか分断している気がします。一方はHTML+少々のJavaScriptの世界に住み、もう一方はES2015以降の世界に住んでいるような感じです。
仮に今後Vueが前述したような曖昧なスタンスを排除したとしても、ここまで拡大したカオスなVueのエコシステムを改善することは難しいのではないでしょうか。もしかしたらVueはReactの秩序を欠点とみなして、逆にカオスというか多様性を積極的にエコシステムに導入したのかもしれません。そうであればそもそも改善するという選択肢はありません。いずれせよ再利用できることがメリットであるVueコンポーネントが、利用者の開発スタイル(ex. HTML中心、ES2015中心)によって使い勝手が大きく異なるというのは大きなデメリットです。