ReactとAngularを徹底比較！
システムに最適なJavaScriptフレームワークはどちら？テクニカルレポート

R&D本部DI部 シニアITアーキテクトの佐原です。
前回のコラム「開発プロジェクトの最前線！Tech Leadの役割と技術資料「BiLD」を解説！」では、開発プロジェクトのTech Leadを支援する技術資料「BiLD」を紹介し、その中で人気のアプリケーションアーキテクチャであるSPA（Single Page Application）について取り上げました。今回はその続編として、SPAを実現する代表的なJavaScriptフレームワークである「React」と「Angular」を比較し、それぞれの特徴や選定時のポイントを解説します。

近年、ユーザーの操作性を向上させる手法として、SPA（Single Page Application）の導入が広がっています。図1には、従来のMPA（Multi Page Application）とSPAの構成例を示しています。SPAでは、プログラムがユーザーの手元に近いブラウザー上で動作するため、ユーザー操作への反応が従来に比べて速くなります。

SPAではUIロジックをJavaScriptで実装するため、従来よりもJavaScriptのコード量が増加します。その結果、大量のコードを効率的に開発するための仕組みが必要となり、その解決策としてJavaScriptフレームワークの利用が進んでいます。

トレンド調査サイト（State of JavaScript）によると、現在人気のあるJavaScriptフレームワークは、React^※、Angular、Vue.jsです。それぞれの大まかな特長を図2にまとめています。

開発や保守を効率的に行うためには、システムの特性に最適なフレームワークを選ぶことが重要です。そのためには、各フレームワークの特徴をしっかり理解しておく必要があります。今回は、対照的な特長を持つReactとAngularを比較し、それぞれがどのようなケースに適しているのかを解説します。

SPAを実装するために必要な機能について、ReactとAngularがどのような機能を備えているかを図3にまとめました。

Reactは必要最小限のシンプルな機能を提供するため、外部ライブラリを選定して開発基盤に組み込む必要があります。これは手間に感じられるかもしれませんが、快適なユーザー体験を実現するために、最適なライブラリを柔軟に組み合わせられるという利点があります。このような特長から、Reactは高い競争力を追求するサービスの開発に向いています。
一方、Angularは必要な機能が最初から一通りそろっているフルスタックなフレームワークです。標準機能でおおむね完結するため、チーム開発のルールや作業手順を統一しやすく開発基盤もすぐに準備できます。こうした特長から、Angularは標準化を要する大規模なチームでの開発に適しています。

SPAでは、画面構築において「コンポーネント指向」が重要な考え方となります。これは、UIの構造（HTML）、見た目（CSS）、動作（JavaScript）を1つの部品（コンポーネント）としてまとめ、それらを組み合わせて画面を構成する手法です。1つの画面は複数のコンポーネントで構成され、それぞれが入れ子になっています。図4に示すように、SPAの画面構成には大きく分けて2つの方針があります。

図4の左側は、画面を複数のコンポーネント（画面パーツ）に分割し、それらを組み合わせて構築するという設計方針です。現在人気が高まっている手法で、Reactで導入しやすい^※1です。この方針は、UIロジックの肥大化を防ぎ、保守性／拡張性が向上します。また、ユーザー体験向上のための頻繁な改修にも柔軟に対応できます。一方、分割の粒度が適切でないと、逆に保守性が低下するリスクがあります。この方針の利用ケースとしては、複雑な画面構成や、リリース後も継続的な改善が求められるサービス開発に適しています。

図4の右側は、画面全体を1つの大きなコンポーネントとして構築する設計方針です。従来よく採用されてきた手法であり、Angularで導入しやすい^※2です。この方針は、画面の内部設計コストを軽減し、開発作業を容易に進められます。一方、複雑な画面ではコードが肥大化しやすく、保守性が低下する可能性があります。この方針の利用ケースとしては、多数のメンバーが関わり、比較的シンプルな画面を量産する社内システム開発に適しています。

ここまで説明したReactとAngularの特長を表1にまとめました。

人気のReactとAngularを比較し、それぞれの特徴と利用ケースをまとめました。キヤノンITソリューションズではReactとAngularを利用した開発環境をスムーズに立ち上げられる開発テンプレートを整備し、技術アセット（BiLD）として社内で共有しています。今後のコラムでは、このBiLDの開発テンプレートについて、詳しく紹介していく予定です。