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

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

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

主なSPA向けフレームワークの紹介

　続いて、それぞれのフレームワークについて、概要と特徴を紹介します。

Backbone.js

Backbone.js

　Backbone.jsは、2010年10月に初回リリースされたクライアントサイドMVCフレームワークです。古くから存在するフレームワークですが、シンプルでカスタマイズ性が高いため根強い人気を持っています。

　ReactやVue.jsといった他のViewライブラリと組み合わせて利用されることが多く、大規模なJavaScriptのアプリケーションを作る際に、Viewライブラリ単体では煩雑になりがちなプログラムを構造化するための仕組みが提供されています。

　具体的には、状態を保持する役割を担うModelと状態を基にUIを描画するためのViewを明確に分離し、疎結合を実現するためのアプリケーション構造を提供しています。

　その他、下記のような特徴があります。

• フレームワークの仕組みがシンプルであり、実装時の制約が少なく自由度が高い
• あくまで骨組みを提供するためのフレームワークであるため、データバインディングやルーティングなどの機能はサポートしていない（サポートしていない機能はプラグインやライブラリを組み合わせることで実現可能）

AngularJS 1

AngularJS

　AngularJS 1は、Googleとコミュニティーによって開発されているフレームワークです。クライアントの構造化だけではなく、テストフレームワークやルーティング、REST APIの呼び出しなど、SPA開発で必要となる機能が一通り提供されます。

　AngularJS 1では、MVC（MVVM）アーキテクチャパターンが取り入れられています。具体的には、画面のDOMの状態を一元的に保持するための仕組みとして、「Scope」と呼ばれるオブジェクトを定義することにより、同一データの描画方法や描画箇所の変更が容易になります。

　その他、下記のような特徴があります。

• 双方向データバインディングの仕組みを提供しており、View／Model間の属性値の同期をフレームワーク側で保障してくれるため、データ同期のための決まりきったコードの記載が不要
• 各提供モジュールの役割が明確に分かれているため、コードの見通しが良い
• テンプレートがHTML拡張なので、既存のHTMLタグに対して新しい機能を追加できる
• DI（依存性注入）機能が提供されている

React

React

　ReactはFacebookが主体で開発しているViewライブラリです。

　他のフレームワークと違い、UIを構築する機能に特化しているという特徴があります。DOMを構造的に管理するためのアーキテクチャとして、「コンポーネント指向」をサポートしており、再利用性が高いUIコンポーネントを組み合わせてアプリケーションを作ることが可能になっています。

　Reactを用いて中規模以上の開発をする場合は、Facebookが提唱する「Flux」というデザインパターンがよく使われます。Fluxを用いて開発することで、画面と「store」（アプリケーションの状態を管理する機構）間のデータの流れが一方通行となり、アプリケーションの構造がシンプルになります。

　その他、下記のような特徴があります。

• 「仮想DOM」と呼ばれる、DOMの状態をJavaScriptのオブジェクトで管理する仕組みを持ち、状態の変更時にはその差分のみをReactが更新するため、描画が高速となっている
• Viewだけを持つシンプルなライブラリであるため、ライブラリ自体への依存が少ない

Vue.js

Vue.js

　Vue.jsは、双方向のデータバインディングを実現するシンプルなMVVMフレームワークです。この中では比較的後発となるフレームワークであり、ReactやAngularJS 1などの他のフレームワークの良い部分が積極的に取り込まれています。また、View層に焦点を当てたフレームワークとなっており、全体の構造もシンプルなので、他のライブラリやモダンツールとの併用が容易という特徴があります。

　Vue.jsもReactと同様、中規模以上の開発の場合には「Vuex」と呼ばれるFluxライクなライブラリが利用されています。

　その他、下記のような特徴があります。

• コンポーネント指向のため、コードの再利用性が高い
• 仮想DOMによって描画が高速化されている
• 使い勝手のよいAngularJS 1ライクな構文が多数採用されている
• テンプレートとして、ネイティブなHTMLを利用可能

Angular2

Angular

　Angular2は、2016年9月に正式リリースされたばかりのAngularJS 1の後継フレームワークです（※ただし、AngularJS 1との互換性は、ほとんどありません）。

　状態の保持をするためのScopeオブジェクトをはじめとした、AngularJS 1が独自で提供していた機能が廃止され、同時にES 2015やWeb ComponentsなどのWeb標準が多く取り込まれたことにより、フレームワークとしての独自色が弱くなっています。

　また、View／Model間の属性値の変更を検知、更新するアルゴリズムに仮想DOMが利用されるようになり、AngularJS 1で課題だったパフォーマンスの問題を解消しています。

　その他、下記のような特徴があります。

• 主な開発言語がJavaScriptではなくなり、JavaScriptのスーパーセットであり静的型付けが可能なTypeScriptになった
• Web Componentsを利用したコンポーネント指向が新しくサポートされており、コードの再利用性が高い
• サーバサイドレンダリングに対応することにより、SEO対策が必要なサイトでも導入が可能

次回からは、React、Angular2について深掘り

　今回は、SPAの概要やフレームワークなどについて紹介しましたが、いかがでしたでしょうか。次回からは、今回紹介したSPAフレームワークの中でも特に注目度（GitHubのスター数とコントリビューター数）が高い「React」と、AngularJS 1の後継である「Angular2」について、実際に開発を進めながら詳細な比較していきますので、お楽しみに。