初心者向けにSPA（Single Page Application）を分かりやすく解説！

SPAとは？

SPAとは「Single Page Application」の略でシングルページアプリケーションと呼ばれます。

これは単一のページでコンテンツの切り替えを行うWebアプリケーションのアーキテクチャの名称で、ブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行います。

従来のWebページは遷移時にページ全体が書き換わりますが、SPAはJavaScriptを用いてページ内のHTMLの一部を差し替えてコンテンツを書き換えます。

これによりブラウザの挙動に縛られないUIや、パフォーマンスの向上が可能になります。

従来のルーティング

従来のWebページは1リクエスト1レスポンスというデータの流れが基本です。

クライアントがリクエストしたページの情報をサーバーが返して、それをブラウザで表示します。

SPAのルーティング

SPAでは初回のリクエストをしたとき、リクエストしたURLに関わらず、アプリケーション全体のJavaScriptのコードのかたまりやアセットファイルが渡されてきます。

それ以降のページ遷移に関してはアプリケーションが動的に部品（DOM要素）の書き換えをします。

部品の書き換えをすることでページを移動しているように見えますが、URLが変わったとしても表示などの処理はブラウザで完結していて、基本的にはサーバーにリクエストが送られることはありません。

なぜSPAなのか？

従来のルーティングでは新しい画面を表示するためには毎回リクエストを行う必要があり、変更があったときの部分的な更新をシームレスに行うことができませんでした。

部分的な変更が難しいため操作性が悪くなり、結果的にパフォーマンスもあまり良くありませんでした。

そこで、もっとリッチなUIやパフォーマンスを実現したいということでSPAが考えられました。

このような部分的な更新を行えるようになった背景には「Ajax」という通信処理技術が使われているためです。AjaxはSPAにとって、重要な技術になるので詳しく解説していきます。

Ajaxとは

Ajaxとは「Asynchronous JavaScript + XML」の略になります。

Asynchronousとは、非同期のという意味があり、「JavaScriptとXMLを使って非同期にサーバーと通信する」という意味です。

非同期という言葉は聞き慣れないと思いますが、まず「同期」について説明します。
基本的にはプログラム処理は1つずつ行われ、同時に複数の処理が実行されることはありません。
これを「同期処理」といいます。

それとは反対に「非同期」とはプログラム処理が並行して実行している状態のことになります。
Ajaxの技術はプログラム処理でメインの処理が実行している裏の処理で、HTMLの指定した部分を書き換えるためにサーバーと通信を行うことができます。
このようなプログラム処理を並行して実行できるのが「非同期処理」となります。

Google Mapは拡大・縮小、スクロールなどの移動をしてもページ遷移なしにいろんな情報が表示されると思います。これはAjaxを使って非同期に情報を取得し表示しているからです。

Ajaxを使わないと拡大・縮小、スクロールなどの移動をする度にブラウザの再読み込みが行われ、すごく使い勝手が悪いものになっていしまいます。

SPAが台頭するまでの歴史

Ajax以前

Ajaxが登場する前は、URLで指定されたページのHTMLファイルを表示するだけでした。

URLで指定されたページの情報を取得してそれを表示し、ページ遷移をすると1回初期化して新たなページの情報を取得して表示するといった流れでした。

Ajax登場

Ajaxが登場したことにより、ページ遷移をする度に毎回初期化していた処理がなくなり、表示されている内容の部分的な変更が可能になりました。

必要な部分を変更すればよく、毎回ページの読み込みをすることがないため操作性が向上しました。
これにより、よりリッチな画面を作ることが可能になりました。

SPA登場

Ajaxを使って部分的な変更が可能になりましたが、表示されている内容の全てを部分的に変更することは難しいという問題がありました。

そこで、全てのページを非同期処理にしようとしたのがSPAの始まりです。

全てのページを非同期処理にすることでページの読み込みも短縮され、シームレスな操作が行えるため操作性が向上しました。

昔のサービスより現在のサービスの方が使いやすいと感じるのは、このような技術が使われていることも1つの要因となっています。

SPAのメリットとデメリット

メリット

ページ遷移がスムーズになる

SPAはページ遷移をしても、新たなページに切り替わることなく部分的に内容が差し替わるためスムーズなページ遷移と表示が可能になります。

ストレスなくユーザーはページを閲覧することが可能となります。

操作性が向上する

ユーザーは感覚的に操作ができるようになります。

例えばチャット機能で投稿しようとしたとき、今までであれば投稿の作成ページや編集ページなどそれぞれ分かれていて、画面遷移しながら操作することが多かったです。

SPAを使えば1画面で投稿の作成や編集といった複数の操作ができるようになり、操作も分かりやすく感覚的に行うことができるようになります。

運用・保守がしやすい

今まではUIとロジックの処理は1つのアプリケーションで行われていました。

SPAはUIに特化した技術で、ロジック処理を切り分けることができます。

ロジックを担う処理はAPIに任せ、UIだけを管理することができるので運用や保守がしやすくなります。

デメリット

サーバー側の処理ができない

SPAはサーバーにリクエストが行かないため、ページ遷移の履歴やHTTPステータスコードなどサーバー側の処理を行うことができません。別のツールを使ったり、APIを使うなど別の手段を取る必要があります。

最初の読み込みに時間がかかる

SPAは部分的な変更を行うため、どの部分を差し替えるかをJavaScriptで記述しなければいけません。

そのためブラウザで読み込むコードが多く、初回のページ表示に時間がかかることがあります。

開発コストがかかる

SPAはデータの流れを意識しながら開発することが大切なため開発コストがかかってしまいます。

正しいライフサイクルでコードを記述しないと、動作や表示が正しく行われないためです。

またUIの処理とロジックの処理（API）を別々で開発することが多いため、開発スキルも求められます。

SPAを開発する方法

SPAを開発するためには「React」や「Vue」、「Angular」などのJavaScriptライブラリを使います。

よくこれらは言語やフレームワークと言われていることがありますが、それは間違いで、これらはあくまでもJavaScriptの「ライブラリ」です。

SPAを実現できるJavaScriptのライブラリであることに注意して下さい。

またReactベースのフレームワークとして「Next.js」、Vueベースのフレームワークとして「Nuxt.js」があります。

このようなフレームワークを使って開発することでより開発スピードを高めることができます。

まとめ