シングルアプリケーション（SPA）の導入メリット＆デメリット

SPAってどんな技術なのか

※アーキテクチャとは、コンピュータ　システム物理的構造

シングルアプリケーションの略で、単一のページでコンテンツの切り替えを行うwebアプリケーションのアーキテクチャの名称
SPAではブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行うことで、ユーザー体験（UX）を大きく向上させることができる。上来のwebページでは遷移時にページ全体が下記変わるが、SPAではjavascriptを用いて、ページ内のHTMLの一部を差し替えてコンテンツを切り替えている。これにより、ブラウザの挙動に縛られないUIの実現やパフォーマンスの向上が可能になる。

SPAを採用するメリット
・通常のwebページでは実現できないユーザー体験を実現できる。
・高速なページ遷移を実現できる。
・ネイティブアプリの代わりとして提供することができる。

１通常のwebページでは実現できないユーザー体験（UX）を実現できる。
ブラウザの挙動に縛られないことから、より幅広いUIを実現することができるため、ユーザー体験を向上させることができる。
例えば、ブラウザによるページ遷移が発生しないことにより音楽を視聴しながらブラウジングを行うことができる音楽配信サービスのようなものも実現可能。また、TwitterやFacbookなどのようにプッシュ型の通知を提示することもできる。
Facebookのように「チャットウィンドウは表示したまま表示しているコンテンツを変更する」などの機能を実現することができる。
他にも滑らかなアニメーションによるページ遷移や、見栄えの良いローdlえいんぐも独自に実装することが可能。

２高速なページ遷移を実現できる。
表示速度が1秒遅れることでコンバージョンが7%低下するという調査結果があり、表示速度はコンバージョンやりピーターの獲得に大きく影響する。

従来のwebページでは、ページ遷移の旅に遷移先のHTML全体をサーバーから取得するため読み込みに時間がかかる。
しかしSPAでは遷移先のページを構成するために必要最小限のデータのみを取得し、ブラウザでHTMLを構築するため、従来のwebページと比較してページ遷移が高速になる。
また、ブラウザによるページ遷移が発生しないため、独自にキャッシュ機能や先行ローディングの機能を実装することで更なる速度向上を図ることも可能。

３ネイティブアプリの代わりとして提供することができる。
SPAによって実現可能なユーザー体験はネイティブアプリと比較しても遜色のないものとなるため、webアプリとして作成したものをネイティブアプリとして流用することができる。最近ではプログレッシブウェブアプリという考え方がGoogleから提唱されており、webの最新の技術を用いてwebとネイティブアプリの両方の利点をもったアプリを作ることが着目されている。
この手法を用いればオフラインでのページ閲覧、プッシュ通知、ホーム画面からの起動と言ったネイティブアプリならではの機能をwebアプリならではの機能をwebアプリで。実現することができる。

SPAの特徴と主なフレームワーク５選

SPAの特徴
一枚のHTMLに対してJavascriptで動的に変更を加えながら画面の描画を実現しているのが大きな特徴。
既存のwebアプリケーション同様、ブラウザから利用できる。
従来のwebアプリケーションと異なり、ページ全体をロードするのは初回のみで２回目以降はサーバからJSONデータを受け取ることで必要箇所のみリロードする。

データを取得しながらフロントエンド側で表示を帰るのでユーザーから高速なレスポンスを返すことができ優れたUI/UXを提供できる。
また、サーバーサイドで画面を生成する必要がなくなり、サーバーサイド側をWebAPIで構成することが可能になる。それによってクライアントとサーバーサイドが疎結合になるため、マルチデバイスにも対応しやすくなる。

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

・Backbone.js
・Angular JS
・React
・Vue.js
・Angular2

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

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

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