ReactとAngular、使うならどっち? JavaScriptギークが6つの視点で徹底比較

Reactか、Angularか。どちらを選ぶか悩ましいものですが、エキスパート2人がそれぞれのポイントを徹底解説します。

ReactとAngular、使うならどっち? JavaScriptギークが6つの視点で徹底比較

ReactとAngular、どちらを選ぶべきか?

使用するJavaScriptフレームワークを選ぶ際、この2つはよく比較対象に挙がります。しかし、両者の特徴をよく理解していなければ、選定は困難でしょう。

今回は、両フレームワークが具体的にどんな強みを持っているのかを、Reactの専門家 小林徹さんとAngularの専門家 稲富駿さんに解説してもらいました。両フレームワークの設計思想から使用において考慮すべき点、今後実装される予定の機能まで、利用者が気になるポイントを網羅しています。

JavaScriptギークである2人のノウハウ、ぜひ選定の参考にしてください!

小林徹(こばやし・とおる) 1@koba04 (写真・右)
受託開発やゲーム開発を経て、サイボウズにてプロダクトを横断したフロントエンド開発に取り組む。React本体や関連するOSSに対するコントリビュートも積極的に行なう他、React.js meetupも主催する。
稲富駿(いなとみ・すぐる) 2@laco2net (写真・左)
日本Angularユーザー会代表。Angularへのコントリビューターとしても活動しており、コミュニティの運営やイベントの主催、ドキュメントの翻訳なども行っている。現在はフロントエンドエンジニアとして株式会社Kaizen Platformに所属。

3React - A JavaScript library for building user interfaces

4angular.jp

【比較ポイント(1)】フレームワークの設計思想

──両フレームワークのベースとなっている設計思想は、どのように異なっていますか?

小林 Reactはアプリケーションレベルのコンポーネントを作ってくれるフレームワークです。DOMのレイヤーの上にアプリケーションレベルのコンポーネントを構築します。これを実現するために、Virtual DOMと呼ばれる、JavaScript上でDOMの構造を再現してその差分を実際のDOMに反映する機構を持っているのです。

5

フロントエンド開発をやったことのある方は分かると思うんですが、DOMは注意して書かないとパフォーマンスが出なかったり、各ブラウザごとに挙動の違いがあったりして、うまく扱うのが大変なんです。こうした部分をReactがラップすることで、DOMを意識せずアプリケーションのコンポーネントをエンジニアが開発できるようになります。

──Angularはどうですか?

稲富 小林さんの話で出てきたように、DOMの操作って複雑なので普通に操作するとなかなか泥臭いテクニックが必要で。パフォーマンスを落とさずバグを踏まないようにDOMに触るのは大変です。だから、それをラップする抽象化層がコンポーネントであるという考えはAngularもReactも一緒です。ただ、ラップを実現するアプローチが違います。

Reactは処理の最後までDOMが出てきません。JavaScript上でDOMツリーを作り終わってからDOMを描画するという流れです。

一方Angularは、1つのコンポーネントが1つのDOM要素と結びついています。MVCの流れを踏襲しているというか、AngularがDOMのコントローラーなんです。DOMをコントロールする抽象化レイヤーがコンポーネントであるという考え方をしています。

ただし最近は、両者の違いはそれほどなくなってきています。なぜなら、実際にはDOMをコントロールしない方がすっきりした設計になるからです。要するに、Reactのようにコンポーネントを「ビューを作る関数」と定義した方がきれいに収まることの方が多い。だから、モダンな設計をすると、結局似たような作りになるというのは最近の潮流としてはあります。

SPA1の開発って、最終的に重要になるのは「状態」とどう戦うか、です。だからコンポーネントの設計においては、可能な限り状態を持たないシンプルな作りにすることがキモになります。

【比較ポイント(2)】動作速度やminify時のファイルサイズ

──動作速度やminify時のファイルサイズなど、パフォーマンス面はどうですか?

小林 「Reactはファイルサイズが大きい」と言われることが多いです。確かに過去のバージョンではそうでした。しかし、バージョン16ではrollupを用いてReactを1つのモジュールとしてバンドルし配布する形になったため、ファイルサイズはこれまでよりも小さくなりました。

また、過去バージョンのReactにはIE8やIE9などをサポートするためのコードがけっこうありました。新しいバージョンではそれらのブラウザをサポートしなくなったため、コードがスリムになったんです。

6React v16.0 - React Blog

──Angularの方はどうですか?

稲富 動作速度について言うと、AngularとReactは大差がないです。だから、ランタイムのスピードは選定の基準にはなりません。

minify時のファイルサイズに関しては、Angularはローカル開発時とデプロイ時にJITコンパイルとAOTコンパイルを切り替えられるため、前者と後者のコードにかなりギャップがあります。

ローカル開発時はJITコンパイルのため、ブラウザ上でAngularがアプリケーションを都度コンパイルするんですけど、サーバーデプロイ時はそれがAOTコンパイルになり事前コンパイルで生成されたコードだけをbundleに含めるんです。そのためデプロイの際にはソースコード容量がかなり少なくなります。

7

稲富 なぜデプロイ時にそれほど圧縮できるかというと、Angularはモジュールがかなり細分化されているのと、Angular CLIというAngularに最適化された公式ビルドツールが提供されているからです。そのビルドツールに、デッドコードやAOT後コードの不要な部分を取り除くオプティマイザーが用意されていて、効率的にコードを圧縮できるんですね。

8Angular CLI

さらに言えば、今年の4月にリリースされるAngularのバージョン6では、ビルドの方法が変更になりコードを前バージョンよりもさらに圧縮できるようになります。

どれくらい違うかというと、公式推奨のbundle手順を使った場合、バージョン5のAngularではHelloWorldのコードがファイルサイズ100KBを切るぐらいだったものが、バージョン6ならば最小で3KBくらいにできるんです。

上記のツイートを見るとファイルサイズ低下が実感できる。

──ReactはAngularのように、さらにファイルサイズを小さくするための施策を実施する予定はありますか?

小林 Reactは、バージョン16から公式にカスタムレンダラーをエンジニア自身で実装できるようになりました。ReactのDOMのレンダラーは相互互換性や各ブラウザの挙動差異などをケアしているため、ある程度のサイズがあります。でも、それを自分自身でカスタマイズできると、軽量化できる可能性がかなり広がるはずです。

9React DOM Lite

【比較ポイント(3)】得意なこと、苦手なこと

──得意なことと苦手なことは?

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く