Angular、React、Vue.jsを一通り使ってみた個人的な感想

Webフロンドエンドのフレームワーク（またはライブラリ）であるAngular、React、Vue.jsを一通り使ってみたので、その感想になります。あくまで個人開発で手を出してみたレベルで、同じものを作って比較したわけではないので、その辺はご了承願います。

Googleが開発しているフレームワーク。

AngularJS（バージョン1系）から一転、TypeScriptベースとなったフレームワークのAngular（バージョン2以降）。半年単位でのメジャーバージョンアップが行われるようになったので、最近、Angular”6”がリリースされていました。1年以上前に私が使ったのがAngular2（または4）だったので、かなり早いアップデート間隔です。

特徴としてはTypeScriptベースのフルスタックフレームワークとなっています。

TypeScriptを前提としたフレームワークとなっているため、分からないことを調べた時にちゃんとTypeScriptのコードが出てくるので、コードの流れさえ分かれば、そのままコピペ（またはちょっと修正）で使えるのが最大の強みだと思います。

ただ、サイトの一部にSPAに対応したページをAngularで用意するといった使い方には向かない気がします。小規模なサイトで利用する際には、そもそもTypeScriptは必要ないということがあるので、どちらかといえば中・大規模向けのフレームワーク。

Visual Studio 2017でASP.NETプロジェクトを作成した際にAngularテンプレートが用意されているので、Visual Studioを使う場合は、環境構築で頭を悩ませる必要がない点も嬉しいところ。

仮想DOMという仕組みを利用しているReactやVue.jsの方が処理速度が速いという話でしたが、今ではそこまでの違いはないようです。

Facebookが開発しているJavaScriptライブラリ。

AngularはTypeScript前提のフレームワークでしたが、ReactはJavaScriptとTypeScriptのどちらでも作成が可能なライブラリです。

Facebookという大企業が開発しており、仮想DOMという仕組みを利用しているので処理が速かったため、広く利用されるようになったようですが、HTMLの記述がJSXだったり、変更した内容はsetState()で反映してやらないと画面に描画されなかったりと、独特な書き方が目立つため、学習コストが比較的に高く、好き嫌いが分かれるライブラリとなっています。

さらにReactとの親和性が高いと言われるReduxを用いた場合、一段と学習コストが高くなりますが、やってみた感じでは慣れれば問題ありません。ただ、時間がない中でReduxに手を出すと痛い目を見そうです。

ライセンス関係でごたついていた時期があったようですが、今は収まったようで、現在はMITライセンスとなっています。

Angular同様にVisual Studio 2017でASP.NETプロジェクトのテンプレートとして、TypeScriptベースのReactまたはReact+Reduxを選択できるようになっています。

ReactではHTMLはJSXでの記述でしたが、Vue.jsは素のHTMLを記述できるので、JSXの微妙にHTMLと異なる記述が受け入れられない人にはありがたいフレームワークとなっています。

Angular、React、Vue.jsの中では日本語の公式ドキュメントが一番充実していたのがこのVue.jsでした。

英語が苦手な私はAngularやReactでは説明よりも先にコードを見て理解しようとしていましたが、Vue.jsの場合はちゃんと全体の説明を見てからコードを確認していましたし、機械的な翻訳ではなく、この辺で詰まるだろうというポイントでドキュメントが用意されているので学習にはうってつけです。

AnguarJSやAngularでSPAサイトを作成していた時、いつもページ遷移時のスクロールバーのリセットや戻った際の復帰でどうしようか頭を悩ましてしましたが、このVue.jsというフレームワークでは、その時に必要なコードがちゃんと公式のドキュメントに掲載されていたので非常に助かった思い出があります。（探し方が悪い？ Reactについては不明）

ただ、TypeScirptの対応という点では上記２つのフレームワーク・ライブラリに劣る、という印象です。もちろん自分で環境を構築すればTypeScriptでの開発も可能ですが、私は面倒くさがりなのでTypeScriptベースのプロジェクトテンプレートを探しましたが、使えそうなテンプレートが見つかりませんでした。Visual Studio 2017のプロジェクトテンプレートにもAngularとReactはありますが、Vue.jsは今のところありません。

あくまで個人的な感想ですが、JavaScriptで小規模サイトの開発または最初にこの手のフレームワークに手を出すなら日本語のドキュメントが充実している「Vue.js」を使い、中規模以上のサイトでTypeScriptを利用するなら「Angular」を使うのが開発工数的には短くなりそうで、対応ブラウザを考慮する必要はあるとして、それ以外は好みで選んでも良さそうです。

私の場合、すでに作ってしまっているものに関しては置き換えるのが面倒なのでReactのままにしておきますが、JSXの記法があまり好きではないので、今後はVue.jsかAngularのどちらかを使っていきたいと思います。

なお、今後の各フレームワークの展開や開発によって新たに得られた知見によっては、心変わりする可能性が十分にあります。

各フレームワークの比較については、Vue.jsの公式サイトにも記事（他のフレームワークとの比較 — Vue.js）があるので、一度、目を通しておくといいと思います。