シングルページアプリケーション(SPA)を支える技術について

はじめに

前回の記事でシングルページアプリケーション(SPA)の概要について解説しました。
今回はシングルページアプリケーションを支える周辺技術について通信方法とサーバーサイドアーキテクチャの観点から解説しようと思います。

Ajax

Ajaxは「Asynchronous JAvaScript + XML」の略です。日本語にすると、「JavaScriptとXMLを用いてサーバーへ非同期通信を行う」ということになります。 では非同期通信とは何でしょうか。同期通信との差異にスポットを当てて解説させていただきます。

同期通信

サーバーにWebページ全体(HTML)を要求する。
ブラウザからWebサーバーにリクエストを発行してからレスポンスが返ってくるまで、画面は固まってしまい操作できない。
→　ひとつのリクエストを発行してレスポンスが返ってくるまで、新規にリクエストを発行することはできない

非同期通信

サーバーに必要な情報のみを要求する。
ブラウザからWebサーバーにリクエストを発行してからレスポンスが返ってくるまでの間でも、画面は操作可能。
→　ひとつのリクエストを発行してレスポンスが返ってくるまでの間にも、新規にリクエストを発行することができる

これによって、例えば検索ボックスに文字列を入力して検索ボタンを押して検索するという操作を文字列が入力されるたびに検索を行って検索結果を更新していく（インクリメンタルサーチ）現在のWebサイトでもよく見る手法を実現することができるようになりました。
AjaxはGoogle Mapの地図情報の読み込み処理やGoogle検索のサジェストに用いられたことをきっかけにWebには欠かせない技術として普及しました。

シングルページアプリケーションをどう支えているか

シングルページアプリケーションは画面遷移を、サーバーから取得したデータを使い、JavaScriptでDOMを操作することで行うことは前回の記事で解説しました。
従来の同期通信ではサーバーにWebページ(HTML)を要求し、取得したHTMLで画面全体を再描画してしまうため、シングルページアプリケーションを実現するためにはAjaxによる非同期通信は必須となります。
Ajaxはシングルページアプリケーションの根幹をなす技術なのです。

Thin Server Architecture

Thin Server Architectureとはどんなアーキテクチャなのか、これも従来のサーバーサイドアーキテクチャと比較することで解説させていただきたいと思います。

従来のアーキテクチャ

言わずとしれたMVC(Model・View・Controller)です。
最終的にはHTMLを作成してレスポンスとして返却します。つまりView処理はサーバーサイドが担っていることになります。

Thin Server Architecture

従来のサーバーサイドのアーキテクチャからView処理を切り出し、フロントエンドでView処理を行うようにするアーキテクチャです。
サーバーサイドは要求に対して、クライアントが必要なデータを単純に返却する、API的な役割をするようになります。

これによって以下のメリットを享受することができます。

・サーバサイドの開発者がView処理のことを気にせず、ビジネスロジックに集中することができる
・フロントエンドとサーバーサイドを切り離して開発することが可能になる(疎結合になる)

シングルページアプリケーションをどう支えているか

シングルページアプリケーションは画面遷移や画面の部分更新といったView処理をJavaScriptで行います。そして、そのView処理内で必要な情報があった場合にサーバーに対してAPI的にデータを要求します。
この処理方式を実現するためには、従来のようにサーバー側でView処理をするのではなく、View処理はサーバーサイドの世界から切り離して考える必要があります。まさにThin Server Architectureはこれを実現するためのアーキテクチャです。

おわりに

今回はシングルページアプリケーションを支える2つの技術について紹介しました。
もちろん他にもシングルページアプリケーションを支えている技術はたくさんあります(RESTとかWebSocketとか…)。
その中でも今回触れなかったもうひとつの根幹、JavaScriptフレームワークについて次回解説したいと思います。

感想やご意見等ございましたら、私のTwitterまでお気軽にどうぞ。