ゼロから学ぶ！ Single Page Applicationの特徴と主なフレームワーク5選：モダンなフロントエンド開発者になるためのSPA超入門（1）（1/2 ページ）

フロントエンド開発のアーキテクチャである「SPA（Single Page Application）」について、開発に必要となる各種フレームワークの特徴や作り方の違いなどを紹介する連載。

[千葉達仁, 日野達也，三菱総研DCS]

今回の主な内容

• SPAとは
  • SPAの特徴
  • SPAが生まれるまで
• 主なSPA向けフレームワーク5つの比較
• 主なSPA向けフレームワークの紹介
  • Backbone.js
  • AngularJS 1
  • React
  • Vue.js
  • Angular2
• 次回からは、React、Angular2について深掘り

　本連載「モダンなフロントエンド開発者になるためのSPA超入門」では、フロントエンド開発のアーキテクチャである「SPA（Single Page Application）」について、開発に必要となる各種フレームワークの特徴や、サンプルアプリ開発を通じたSPA開発の流れ、フレームワークによる作り方の違いなどを紹介します。

　サンプルアプリ開発では、SPA開発において人気がある「React」「Angular2」の使用を予定しています。第1回目である今回は、SPAの特徴と取り巻く環境、フレームワークを紹介します。

SPAとは

　SPAはAdobe FlashやMicrosoft SilverlightといったリッチなUIを提供できるRIA（Rich Internet Application）に代わるフロントエンド開発の技術として、ブラウザの進化やHTML5の登場などによって誕生したアーキテクチャです。HTMLやJavaScript、CSSといったWeb技術で、デスクトップアプリケーションのような快適な操作性を実現できます。

SPAの特徴

　名前に「Single Page」とあるように、1枚のHTMLに対してJavaScriptで動的に変更を加えながら画面の描画を実現しているのが大きな特徴です。もちろん、既存のWebアプリケーション同様、ブラウザから利用できます。

　従来のWebアプリケーションと異なり、ページ全体をロードするのは初回のみで、2回目以降はサーバからJSONデータを受け取ることで必要箇所のみリロードします。

図1　SPAの動作イメージ

　データを取得しながらフロントエンド側で表示を変えるので、ユーザーに高速なレスポンスを返すことができ、優れたUI／UXを提供できます。

　また、サーバサイドで画面を生成する必要がなくなり、サーバサイド側をWeb APIで構成することが可能になります。それによってクライアントとサーバサイドが疎結合になるため、マルチデバイスにも対応しやすくなります。

SPAが生まれるまで

　以前のJavaScriptは、Webブラウザで入力チェックや多少の動きを加えるといった役割が中心で使われており、Webブラウザでリッチな表現をするためには、FlashなどWebブラウザを拡張する技術が採用されていました。

　JavaScriptに関しては、Google MapsでのAjaxの活用（2005年）や、JavaScriptの実装を容易にするjQueryの登場（2006年）によって積極的な利用が進みました。そして、HTML5（2014年勧告）やCSS3（2011年から順次勧告）の登場、ブラウザの進化に伴い、既存のWeb技術だけで実現できることが増えるようになります。

　これらの背景に加え、Flashが衰退したことによってRIAに代わる技術が必要とされ、SPAが台頭し始めました。jQueryでもSPAを構築することは可能ですが、直接DOMを操作するjQueryではDOMの状態管理が困難であり、大規模なSPA開発をするには限界があります。その中で登場したのが、「AngularJS 1」「React」に代表されるSPA向けのフレームワークです。

　これらのフレームワークはクライアントサイドでのMVCやMVVMといった、データとUIを分離する思想が取り込まれており、フロントエンドを構造化できるようになったことで、SPAの大規模開発を可能にしました。

主なSPA向けフレームワーク5つの比較

　SPA向けフレームワークは多数公開されていますが、その中から人気が高いものとして、Googleトレンドで上位を占める以下5つのフレームワークの概要と特徴を紹介します。

図2　2016年の日本国内での各フレームワーク／ライブラリの検索数の推移（Googleトレンドから引用）

※以下、フレームワークの並びはリリース順です。

• Backbone.js
• AngularJS 1
• React
• Vue.js
• Angular2

　それぞれの特徴を一覧化した表は以下の通りです。

図3　SPAフレームワークの比較

　GitHubのスター数とコントリビューター数は、注目度を図る指標として記載しています。参考値として、2017年1月時点でのjQueryのスター数は4万2894、コントリビューター数は258です。