SPA（Single Page Application）とは

SPAとは「 Single Page Application 」（シングルページアプリケーション）の略称で、複数ではなく単一のWebページに対して、Ajaxなどでページを構成することを指します。

単一のWebページで構成することで、新しい情報を読み込む際にページの遷移に縛られないことから、サーバーへどのリクエスト（要求）を送ってもほとんど同じURLを表示したり、どんなページが表示されてもPOSTリクエストを飛ばしたりします。

例えば：

以下の４つの機能に対しては、画面表示はそれぞれ異なっていますが、それらは１つの「domain.com」ページのみで処理されています。

サーバーへリクエストを送る際にブラウザは#（シャープ）以降の文字列を付けずに「GET /」というURLパスでリクエストを送ります。#以降の文字列はレスポンス取得後にJavaScript、Ajaxなどで構成します。

・https://domain.com/#/login

・https://domain.com/#/reset-password

・https://domain.com/#/home

・https://domain.com/#/mypage

SPAはブラウザがリクエストする内容が古典的なWebページと異なります。

※古典Web的ページとはリクエストごとにHTMLを取得するサイト。サーバーに多種多様な全てのページを保持していて、ブラウザのそれぞれのリクエストごとにURLが設定されたり、新しいHTMLファイルを送り、それをブラウザで表示したりします。

SPAでは、初回リクエストに対して基本となるHTMLファイルがサーバーから送られます。

このため、新しいページを取得する際にサーバーへその差分のみをリクエストします。その時、サーバーから差分のみを戻し、それを同じHTMLファイルで入れ替えて表示します。

これにより、ページを更新しなくてもサーバーと通信することができます。

次に、SPAのメリット及びデメリットを解説していきます。

1. Webアプリケーションの動作を向上する

ユーザーの操作に応じていちいちリクエストおよびレスポンスを繰り返し、Webページ単位で更新されず、更新が必要なデータのみをAPIで送受信していくことで、サーバーとの通信量を最低限に抑えることが可能です。

そのため、 Webアプリケーションの動作の向上することが可能になるのです。

2. 高度なページ表現ができる

SPAではページの遷移ごとに新しいHTMLを表示することがなく、必要な部分のデータのみをサーバーへリクエストを行い、レスポンスしたデータをJavaScriptで処理HTMLに反映します。

これによって、新しい画面が高度に表示することができます。

3. ネイティブアプリのような体験を提供できる

SPAではブラウザ側でできる処理はJavaScriptなどで完結できるため、幅の広いUIを実装することができます。したがって、ネイティブアプリの代わりとして使うことができます。

1. 初期ローディングに時間がかかる

SPAでは、サーバとのやり取りのボリュームは減るので、ページの切り替えは高速になります。しかし、ブラウザでJavaScriptの読み込むコード量が増加するため、最初のページローディングに時間がかかります。

読み込みに時間がかかるサイトはGoogleの評価を落としてしまうので、SEOに影響する恐れがあります。そのため、処理速度を保つことを意識する必要があります。

2. 実装コストが大幅にかかる

SPAでは、ブラウザで構成されるため、アクションごとに差分を明確に確認できる処理が必要となっているので、フロントエンドの実装に時間が結構かかります。

3. SPAの経験開発者が少ない
古典的Webページと比べると、より高度なWebアプリケーションの制作スキルに加えて、JavaScriptとフレームワークなどに関する幅広い知識と設計スキルが必要です。

また、SPA作成の際に考えるべきこと（例：初回ロード時間、コンポーネント、画面のつながりなど）について理解も必要になります。

このほか、SPAを開発したことのある経験者自体が従来のアプリケーションの開発者と比べて少ないので、開発リソースの確保が難しい面もあります。

今回は、SPAの仕組みやメリット・デメリットについて説明しました。

最後に、私たちSHIFT ASIAは、ベトナムを拠点に世界中のお客さまに高品質なソフトウェア開発とソフトウェアテストサービスを提供していますので、ご興味があれば以下のソリューション概要をご覧ください。

それでは、またよろしくお願いします。