3大JavaScriptフレームワークを比較。ーモナカプレス技術情報3大JavaScriptフレームワークを比較。Angular/React/Vueの特徴を徹底レビュー!3大JavaScriptフレームワークを比較。中津川篤司Twitter4Facebook22はてブPocket5LINEReactがVirtualDOMという概念を生み出して以来、Webアプリやハイブリッドアプリの開発トレンドが一気に変わってきました。それまでのHTML/JavaScript/CSSをMVCによって分割する方法から、「関心の分離」と言う考え方に変わりつつあります。Wikipediaによれば「プログラムを関心(何をしたいのか)毎に分離された構成要素で構築する」ことです。画面、コード、デザインという技術で分離させるのではなく、ログインする、商品を表示する、注文すると言った機能(関心)ごとにロジックを分離する考え方です。関連する考え方になります。Angular/React/Vueはいずれもこの関心の分離に基づいて作られています。各機能をミニマムにまとめ、それらを組み合わせて一つのシステムを構築します。各機能がコンポーネント単位に集約されるため、コードの可読性やメンテナンス性が高くなります。それでは各フレームワークの特徴を紹介します。AngularAngularはフルスタックなフレームワークと言えます。Angularが提供する機能をすべて使いこなすことができれば、他に覚えなければいけない技術はあまりありません。利用開始する際にも、まず専用のコマンドをインストールするところからはじめます。使えるようになります。helloworldこの時点ですでに6つのディレクトリ、28のファイルが生成されます(node_modulesを除く)。それぞれのディレクトリ、ファイルの目的を学ぶことでAngularの世界を知ることができます。filesAngularはTypeScriptを標準言語として採用しています。それによって、静的な型付けが可能になり、多人数での開発でも安心して利用できます。テストや多言語化の仕組みも組み込まれています。Webアプリケーションとしてはよくあるルーティング機能もデフォルトで搭載されています。ファイル構成Angularではコンポーネントという単位で機能を組み合わせます。ファイルが生成されます。外部データを取得するような処理ではサービスという機能を使います。これによって非同期処理を分離したり、再利用性を高められるようになります。Railsに似た雰囲気があります。ルーティングや変数の保持の方法など、実用的なWebアプリケーション開発を行う中で考えるべきことはたくさんありますが、Angularであれば公式機能だけでほとんどが事足りるでしょう。Loadによって必要な機能だけが読み込まれるようになります。最初に覚えるべきことは多いですが、それさえ乗り越えられれば生産性が上がることでしょう。AngularはHTMLやCSSファイルが分離しているので、デザイナーの方との協業もしやすいと思います。テンプレートなので機能を分離したり、組み合わせるために覚えることは多いですが、それでも素のHTMLがベースなのでエンジニアでない方にとっても編集しやすいでしょう。ReactReactはFacebookが中心となって開発しているフレームワークで、VirtualDOMの概念を生み出した存在です。Webアプリケーション開発で最も面倒だったDOMの状態を管理する必要がなくなったことが一番大きな利点であると言えます。Reactをはじめるにはいくつかの方法がありますが、オフィシャルなものは以下のコマンドになります。helloworldファイル構成は次のようになっています(node_modulesを除く)。Angularに比べると簡単で見通しが良いと思います。いった状態管理用ライブラリを利用します。この辺りのライブラリのトレンド変化が激しく、採用したものの人気が下火になってしまったり、ベストな組み合わせが変わったりするのがReactの難しさと言えます。いうReact独自の記法で書かれています。JavaScriptの中にHTMLに似た記法が混ざった形になっています。SVG画像やCSSファイルをインポートする書き方には慣れが必要となるでしょう。reload.</p></div>);}}Reactは関心による分離を行っているのでJavaScriptの中に表示(DOM)に関する情報が埋め込まれます。この書き方は企業においてエンジニアとデザイナーが協業する際には不便に感じるかも知れません。エコシステムReactはGoogleトレンドで見ても他のフレームワークより検索数が多く、人気も非常に高いです。それだけに周辺ライブラリやサポートツールなどのエコシステムが最も発展していると言えます。それらをいかに上手に組み合わせて開発を効率化するかが大事なポイントになります。検索が多いということは、それだけ仕組みが複雑であるとも言えそうです。Nativeも人気です。ReactはWebブラウザ向けの表示ライブラリとしてはじまりましたが、途中からDOMを切り離しました。DOMなど)各プラットフォーム向けにReactの書き方が使えるようになりました。NativeはiOS/AndroidのJavaScriptエンジンを使い、Reactで書かれた内容をネイティブコンポーネントして表示、利用できるようにします。ネイティブのコードに変換する訳ではなく、あくまでもJavaScriptです。類似の技術としてはTitaniumが知られています。anywhere(一度学べば、どの環境に対しても書ける)という考え方に則っています。Reactを学べば、ネイティブもWebに対してもReactの書き方が通用するのです。Vueここ最近、国内で人気が高まってきているのがVueです。Componentsの考え方を標準で取り入れており、一つのファイルの中にHTML/JavaScript/CSSを記述します。その結果、関心がまとまって管理されるのでシステム全体の見通しが良くなります。いうコマンドをインストールするのが一番早いでしょう。@vue/cliそしてプロジェクトを作成します。このコマンドではプロジェクトの設定を対話形式で決定します。この辺りの柔軟さもVueの良さかも知れません。hello-world生成されたファイル群です。いうファイルにまとまっていいるので、Reactよりもさらにファイル数が少ない印象です。files記述されているのは次のような内容です。インポートして使っています。60px;}</style>追加機能VueもReactと同じくデフォルトでルーティングは行いません。いうルーティング用のライブラリがありますが、別ライブラリとして提供されています。いうライブラリを使うのが一般的です。いった機能の多くはReactと似た形で実装されています。別ライブラリにはなっていますが、公式で提供されているので安心して利用できます。特徴VueはAngularほどHTMLとJavaScriptが分離している訳ではありませんが、Reactほど同化されてはいません。デザイナーはtemplateタグ以下だけをメンテナンスするといったルールを決めることで、スムーズに開発できることでしょう。開発元はAngularがGoogle、ReactがFacebook主体であるのに対して、Vueはコミュニティベースで開発が進められています。日本語ドキュメントも充実しており、日本の中でも好んで使う人がたくさんいます。学習要素が少なく、すぐに使い始めることができるのも好まれる要因と言えるでしょう。なるのではないでしょうか。Angularはフルスタックなフレームワークなので、学習すべき内容は多いですが、一旦覚えてしまえば生産性が高くなるでしょう。いった順になっており、エコシステムもReactが最も発展しているのではないかと思います。その代わりトレンドの変化が激しいのでSIer案件などでは追従が難しい可能性があります。Reactを採用するのであればトレンドに追従する意思が必要です。VueもReactほどではありませんが、周辺ツールが多数存在したり、アプリケーション規模による最適な組み合わせが出てくるので技術選定が必要になるでしょう。どの技術にも一長一短があるのは当たり前ですが、後はプロジェクトの特徴や自社の持つ技術に合わせて選定するのが良いでしょう。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。3大JavaScriptフレームワークを比較。