3大フロントエンドフレームワーク(React・Angular・Vue.js)について

はじめに

前回の記事ではフロントエンドフレームワークとは何なのかについて解説しました。
今回はそのフロントエンドフレームワークの3強とも言える、React・Angular・Vue.jsについて解説したいと思います。
ちなみにりんごくのこれらフレームワークの使用実績としては、Angularは3年間、Vue.jsは半年の実務経験がありますが、ReactはチュートリアルをこなしてTodoアプリを作ってみた程度のものです。

3強フロントエンドフレームワーク

以下のサイトを御覧ください。
JavaScript Rising Stars
このサイトはGitHub のスター数を比較して定量的にJavaScript関連で使われたプロジェクトを評価しているサイトです。
GitHubのスター数が全てではないですが、ひとつの指標にはなると思います。
このサイトによりますと、フロントエンドフレームワークは、2016～2018年に関して以下のようになっています。

2016

2017

2018

どうでしょうか？
2016～2018年の3年間、4位以下は変動すれど、上位3フレームワークは不動の地位を保っています。
これらのフレームワークを扱えることがシングルページアプリケーション開発において、非常に重要な要素であることがわかると思います。
それではそれぞれのフレームワークを個別に見ていきましょう。

React

ReactはFacebookが中心となって開発しているフレームワークです。
Reactの特徴としては以下のとおりです

Viewに関する機能のみを提供する

そもそもReactはFacebook公式の見解ではフレームワークではなく、ライブラリであるとのことです。
そういった考えもあってか、前回の記事で解説した、フロントエンドフレームワークが提供する機能である、
・コンポーネント化
・画面遷移などのルーティング
・Ajax関係のユーティリティ
・データバインディング
のうち、単体ではデータバインディング機能しか提供していません。
AjaxによるHTTP通信やルーティング、状態管理は他のライブラリと組み合わせて実現する必要があります。
これはメリットであり、同時にデメリットでもあります。
メリットとしては、自分が使いたいライブラリを自由に選んで組み合わせることができる点にあります。
Ajax通信はあのライブラリを使って、ルーティングはあれを使って…と自由に選定することができます。
デメリットとしてはこのメリットの裏返しで、各機能ごとに使用するライブラリを選定しないといけない点にあります。Webは周辺技術や必要な機能も多く、それら各々に関して技術選定を行うのは大変なこともあります
また、別々のライブラリを同時に使用した場合の相性問題なども懸念のひとつになります。

JSX記法を採用している

例えば、Reactは以下のようなコードを書きます。

 1class ShoppingList extends React.Component {
 2  render() {
 3    return (
 4      <div className="shopping-list">
 5        <h1>Shopping List for {this.props.name}</h1>
 6        <ul>
 7          <li>Instagram</li>
 8          <li>WhatsApp</li>
 9          <li>Oculus</li>
10        </ul>
11      </div>
12    );
13  }
14}

まるでJavaScriptの中にHTMLを書いているかのようですよね。
これがJSXと呼ばれる記法です。
ReactではこのJSXを使って、各UIの各属性の値(状態)をJavaScript側の変数などのデータと紐づけます。(例えば、10行目の この記法はフロントエンドエンジニアの中でも好みの差が出るところで、この記法が気持ち悪いからReactを使わないという人も知り合いにいます(笑)
また、HTMLとJavaScriptが密接になっていることから、デザイナーとプログラマーの分業がやりづらいというデメリットもあるようです。

Virtual DOMという仕組みを導入している

Virtual DOMというのは実際のDOMと対になる、仮想的なDOMを指します。
DOMの直接の操作がコストの高い処理であることは前回の記事でも触れましたが、このVirtual DOMは通常のDOM操作よりも高速に軽量に操作ができるように構築されています。

Reactにおいて、プログラマーがUIの状態を変えるとき、アクセスするのはこのVirtual DOMになります。そしてその後、ReactはこのVirtual DOMと実際のDOMを比較し、その差異を洗い出し、最短最適な操作で差分を実際のDOMに反映します。

つまりプログラマーは高速軽量なVirtual DOMへの操作のみ考えればよく、実際のDOM操作はReactによって最適な方法で行われるため、全体として高速で最適化されたUIの変更が可能になるということです。

Angular

AngularはGoogleが開発しているフロントエンドフレームワークです。 Angularの特徴としては以下のとおりです。

フルスタックフレームワークであること

Angularはフルスタックフレームワークと言われます。
これは、Webアプリケーションの構築に必要な要素（ルーティング、データバインディング、HTTP通信、状態管理、入力チェック、テンプレート、コンポーネント志向…etc）の大部分をAngularの導入ひとつで実現できるという意味です。
この点こそが、ReactとAngularが決定的に異なる部分です。
よってメリット・デメリットもReactと対照的になります。
メリットとしては、Angularの導入でほぼすべてのフロントエンドにおいて必要な機能を揃えられるので、技術選定や各ライブラリの相性問題に悩まされることがない点があげられます。
一方でデメリットは、一部の機能のみを他のライブラリで賄うということが難しく、柔軟性に欠けてしまうという点にあります。
またAngularに限ったことでもないのですが、独自的な記法も多く、いわゆるAngular式のようなものを身につける必要があります。

TypeScriptによる開発を前提にしている

AngularはTypeScriptを使用することを推進しており、公式のドキュメントやAPIもTypeScriptで開発することを念頭に置いたものがほとんどです。

TypeScriptというのは、AltJSと呼ばれるJavaScriptの代替言語のひとつです。
AltJSは開発中はJavaScriptを拡張した便利な機能を利用でき、コンパイルすることでブラウザが読み込める素のJavaScriptに変換される言語のことを指します。
TypeScriptは動的型付け言語であるJavaScriptに静的な型の機能を追加するAltJSです。
これによって本来のJavaScript開発では実行するまで検出できなかった、オブジェクトに存在しないプロパティを参照したことに起因するエラーをあらかじめコンパイルエラーとして検出できるようになったり、IDEによる補完機能を利用することができるなど、大きなメリットがあります。

双方向データバインディング

双方向データバインディングとは、UIの状態の変化はそれにバインディングされたJavaScript側のデータを変更させるし、JavaScript側のデータを変更はUIの状態を変化させるようなまさに双方向のバインディングのことを指します。

例をあげてみてみましょう。
テキストボックスの入力値をJavaScriptのデータと双方向データバインディングします。
画面にはボタンがあり、それを押すと、JavaScript側のデータが変更されるとします。
わかりやすいように画面にはJavaScript側のデータを直接表示しておきましょう。
実際にAngularで書いてみると以下のようになります。 Angularでは通常、HTMLとCSSとTypeScriptはファイルを分けて記述します。 (規模の小さいコンポーネントであれば共存して書くこともあります)

template(app.component.html)

1<section>
2 {{test}} <!-- 画面に直接JavaScript側のデータを表示している -->
3 <input type="text" [(ngModel)]="test" /><!-- ngModelの部分で双方向データバインディングを設定している -->
4 <button (click)="updateValue()">update!</button>
5</section>

TypeScript(app.component.ts)

 1import { Component } from '@angular/core';
 2
 3@Component({
 4  selector: 'app-main-page',
 5  templateUrl: './app.component.html',
 6  styleUrls: ['./app.component.scss']
 7})
 8export class AppComponent implements {
 9  test: string;
10  updateValue(): void {
11    this.test = 'updated!';
12  }
13}

このアプリケーションで、入力ボックスに文字列を入力するとデータバインディングによって、JavaScript側のデータ(=test)が更新されます。
それによって画面に表示している文字列も更新されていくことでしょう
一方でボタンを押下すると、JavaScript側のデータが’updated!‘に更新され、画面の表示文字列が更新されるのは当然として、さらにデータバインディングによってテキストボックスの入力値も更新されるのです。
つまりテキストボックスの入力によって、JavaScript側のデータが変更され、一方でJavaScript側のデータが変更されるとテキストボックスの入力も変更されるということで、この仕組みを双方向データバインディングと呼んでいるのです。

Vue.js

Vue.jsはGoogleでAngularJSを使用した開発にも携わっていたEvan You氏によって開発されたフレームワークです。
以下のような特徴があります。

ReactとAngularのいいとこどりをしている

Vue.jsは今回紹介している3大フレームワークの中では一番後発のフレームワークです。
Virtual DOMを取り入れた上で、双方向データバインディングも取り入れており、その上でHTTP通信やルーティングなどは別ライブラリと組み合わせて実現するという方式を採用しています。
これによって両フレームワークのそれぞれのメリットを両方とも享受することができる贅沢なフレームワークとなっています。

HTML、JavaScript、CSSを全てひとつのファイルに書く

Vue.jsはHTML、JavaScript、CSSを全てひとつのファイルに書き、それをコンポーネントとして組み合わせることでアプリケーションを構築します。
例えば以下のようにコンポーネントを記述します。

 1<template>
 2  <div id="app">
 3    <img alt="Vue logo" src="./assets/logo.png">
 4    <HelloWorld msg="Welcome to Your Vue.js App"/>
 5  </div>
 6</template>
 7
 8<script>
 9import HelloWorld from './components/HelloWorld.vue'
10
11export default {
12  name: 'app',
13  components: {
14    HelloWorld
15  }
16}
17</script>
18
19<style>
20#app {
21  font-family: 'Avenir', Helvetica, Arial, sans-serif;
22  -webkit-font-smoothing: antialiased;
23  -moz-osx-font-smoothing: grayscale;
24  text-align: center;
25  color: #2c3e50;
26  margin-top: 60px;
27}
28</style>

これによってHTML、JavaScript、CSSというコンポーネント単位での関心を1ファイルにまとめることができるので、システム全体として見通しがよくなります。
ReactのJSXほどHTMLとJavaScriptが密接ではありませんが、Angularほど分離しているわけでもないというまさに中間地点的な立ち位置ですね。
またReactのJSXやAngularのTypeScriptと異なり、純粋なJavaScriptで記述できます。

ドキュメントが読みやすい

これは私自身の主観も含まれると思いますが、3大フレームワークの中でも公式のドキュメントが一番読みやすいのがVue.jsです。
他のフロントエンドフレームワークに対して、Vue.jsがどういった点で優れているのかということを解説したページもあったりします。
日本語のドキュメントも完備されていますし、純粋なJavaScriptで記述できる点も相まって、学習コストも低く抑えることができます。
この辺りが人気に火がついた理由でしょうか。

おわりに

今回はフロントエンドフレームワークの3大フレームワークについて解説しました。
こう比較してみると、Vue.jsの人気に火がついたのもうなづけますね。
ただReactはReact Nativeの存在もあったりと、Webアプリケーション分野の比較では計れないメリットもあったりするので、この比較が全てではないです。
また、私自身Angular以外は長い実務経験があるわけではありませんし、実際に使ってみて感じるメリットやデメリットもあるでしょう。
いざとなったらどれもちゃんと使えるレベルの習熟はしておきたいところですね。
それでは今回はこのへんで。ここまで読んでいただきありがとうございました！

感想やご意見・質問等ございましたら、私のTwitterまでお気軽にどうぞ。