ReactがVirtualDOMという概念を生み出して以来、Webアプリやハイブリッドアプリの開発トレンドが一気に変わってきました。それまでのHTML/JavaScript/CSSをMVCによって分割する方法から、「関心の分離」と言う考え方に変わりつつあります。関心の分離とは Wikipediaによれば「プログラムを関心（何をしたいのか）毎に分離された構成要素で構築する」ことです。画面、コード、デザインという技術で分離させるのではなく、ログインする、商品を表示する、注文すると言った機能（関心）ごとにロジックを分離する考え方です。これは Web Components にも関連する考え方になります。
Angular/React/Vueはいずれもこの関心の分離に基づいて作られています。各機能をミニマムにまとめ、それらを組み合わせて一つのシステムを構築します。各機能がコンポーネント単位に集約されるため、コードの可読性やメンテナンス性が高くなります。
それでは各フレームワークの特徴を紹介します。
Angular
Angularはフルスタックなフレームワークと言えます。Angularが提供する機能をすべて使いこなすことができれば、他に覚えなければいけない技術はあまりありません。利用開始する際にも、まず専用のコマンドをインストールするところからはじめます。
|
1 2 |
npm install -g @angular/cli |
インストールすると専用のコマンド ng が使えるようになります。
|
1 2 |
ng new helloworld |
この時点ですでに6つのディレクトリ、28のファイルが生成されます（node_modulesを除く）。それぞれのディレクトリ、ファイルの目的を学ぶことでAngularの世界を知ることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$ tree . . ├── README.md ├── angular.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ ├── browserslist │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── karma.conf.js │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json ├── tsconfig.json └── tslint.json 6 directories, 28 files |
AngularはTypeScriptを標準言語として採用しています。それによって、静的な型付けが可能になり、多人数での開発でも安心して利用できます。テストや多言語化の仕組みも組み込まれています。
Webアプリケーションとしてはよくあるルーティング機能もデフォルトで搭載されています。
ファイル構成
Angularではコンポーネントという単位で機能を組み合わせます。ディレクトリごとに HTML/CSS/TypeScript/モジュール/テスト のファイルが生成されます。さらに外部データを取得するような処理ではサービスという機能を使います。これによって非同期処理を分離したり、再利用性を高められるようになります。
特徴
個人的な感想ですが、AngularはRuby on Railsに似た雰囲気があります。
ルーティングや変数の保持の方法など、実用的なWebアプリケーション開発を行う中で考えるべきことはたくさんありますが、Angularであれば公式機能だけでほとんどが事足りるでしょう。他のフレームワークに比べて多機能である分、肥大化が懸念されますが、Lazy Loadによって必要な機能だけが読み込まれるようになります。最初に覚えるべきことは多いですが、それさえ乗り越えられれば生産性が上がることでしょう。
AngularはHTMLやCSSファイルが分離しているので、デザイナーの方との協業もしやすいと思います。テンプレートなので機能を分離したり、組み合わせるために覚えることは多いですが、それでも素のHTMLがベースなのでエンジニアでない方にとっても編集しやすいでしょう。
React
ReactはFacebookが中心となって開発しているフレームワークで、VirtualDOMの概念を生み出した存在です。Webアプリケーション開発で最も面倒だったDOMの状態を管理する必要がなくなったことが一番大きな利点であると言えます。
Reactをはじめるにはいくつかの方法がありますが、オフィシャルなものは以下のコマンドになります。
|
1 2 |
npx create-react-app helloworld |
ファイル構成は次のようになっています（node_modulesを除く）。Angularに比べると簡単で見通しが良いと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$ tree . . ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js └── yarn.lock 2 directories, 13 files |
ただし、この状態ではルーティングが行えないので React Router というライブラリを入れたり、より規模が大きくなってくると Redux や MobX といった状態管理用ライブラリを利用します。この辺りのライブラリのトレンド変化が激しく、採用したものの人気が下火になってしまったり、ベストな組み合わせが変わったりするのがReactの難しさと言えます。
生成されるJavaScript（src/App.js）は拡張子こそjsですが、実際には JSX というReact独自の記法で書かれています。JavaScriptの中にHTMLに似た記法が混ざった形になっています。SVG画像やCSSファイルをインポートする書き方には慣れが必要となるでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } |
Reactは関心による分離を行っているのでJavaScriptの中に表示（DOM）に関する情報が埋め込まれます。この書き方は企業においてエンジニアとデザイナーが協業する際には不便に感じるかも知れません。
エコシステム
ReactはGoogleトレンドで見ても他のフレームワークより検索数が多く、人気も非常に高いです。それだけに周辺ライブラリやサポートツールなどのエコシステムが最も発展していると言えます。それらをいかに上手に組み合わせて開発を効率化するかが大事なポイントになります。ただし検索が多いということは、それだけ仕組みが複雑であるとも言えそうです。
React Nativeの存在
Reactと言えば、ネイティブアプリ開発言語であるReact Nativeも人気です。ReactはWebブラウザ向けの表示ライブラリとしてはじまりましたが、途中からDOMを切り離しました。その結果として、React Nativeのように（さらにそれをDOMでも使えるようにするReact Native DOMなど）各プラットフォーム向けにReactの書き方が使えるようになりました。
React NativeはiOS/AndroidのJavaScriptエンジンを使い、Reactで書かれた内容をネイティブコンポーネントして表示、利用できるようにします。ネイティブのコードに変換する訳ではなく、あくまでもJavaScriptです。類似の技術としてはTitaniumが知られています。Titaniumが一つのコードでiOS/Androidを両方サポートしようとしていたのに対して、ReactはあくまでもLearn once, write anywhere（一度学べば、どの環境に対しても書ける）という考え方に則っています。Reactを学べば、ネイティブもWebに対してもReactの書き方が通用するのです。
Vue
ここ最近、国内で人気が高まってきているのがVueです。Web Componentsの考え方を標準で取り入れており、一つのファイルの中にHTML/JavaScript/CSSを記述します。その結果、関心がまとまって管理されるのでシステム全体の見通しが良くなります。
始め方は vue-cli というコマンドをインストールするのが一番早いでしょう。
|
1 2 |
npm install -g @vue/cli |
そしてプロジェクトを作成します。なお、このコマンドではプロジェクトの設定を対話形式で決定します。この辺りの柔軟さもVueの良さかも知れません。
|
1 2 |
vue create hello-world |
生成されたファイル群です。HTML/JavaScript/CSSが結合して *.vue というファイルにまとまっていいるので、Reactよりもさらにファイル数が少ない印象です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$ tree . . ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue └── main.js 4 directories, 9 files |
記述されているのは次のような内容です。<template> がHTML、<script> がJavaScript、<style> です。 別コンポーネントの HelloWorld をインポートして使っています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> |
追加機能
VueもReactと同じくデフォルトでルーティングは行いません。公式で Vue Router というルーティング用のライブラリがありますが、別ライブラリとして提供されています。大規模アプリ開発の状態管理には Vuex というライブラリを使うのが一般的です。こういった機能の多くはReactと似た形で実装されています。別ライブラリにはなっていますが、公式で提供されているので安心して利用できます。
特徴
VueはAngularほどHTMLとJavaScriptが分離している訳ではありませんが、Reactほど同化されてはいません。デザイナーはtemplateタグ以下だけをメンテナンスするといったルールを決めることで、スムーズに開発できることでしょう。
開発元はAngularがGoogle、ReactがFacebook主体であるのに対して、Vueはコミュニティベースで開発が進められています。しかし日本語ドキュメントも充実しており、日本の中でも好んで使う人がたくさんいます。学習要素が少なく、すぐに使い始めることができるのも好まれる要因と言えるでしょう。
まとめ
企業内でデザイナーとエンジニアが協業しながら作業するのであれば、Angular > Vue > React になるのではないでしょうか。Angularはフルスタックなフレームワークなので、学習すべき内容は多いですが、一旦覚えてしまえば生産性が高くなるでしょう。
エコシステムの大きさで言えば React > Angular > Vue といった順になっており、エコシステムもReactが最も発展しているのではないかと思います。その代わりトレンドの変化が激しいのでSIer案件などでは追従が難しい可能性があります。Reactを採用するのであればトレンドに追従する意思が必要です。VueもReactほどではありませんが、周辺ツールが多数存在したり、アプリケーション規模による最適な組み合わせが出てくるので技術選定が必要になるでしょう。
どの技術にも一長一短があるのは当たり前ですが、後はプロジェクトの特徴や自社の持つ技術に合わせて選定するのが良いでしょう。皆さんのフロントエンド、ハイブリッドアプリ開発がより良くなりますように！