SPA（シングルページアプリケーション）とは？注目のモダンな技術を解説！

近年、Webアプリを作る際の技術として「React」や「Vue」などを採用する企業が増えてきていますよね。「React」で「Vue」で実現できる「SPA」という技術はご存知でしょうか？

「Webアプリ開発の打ち合わせでは、SPAって言葉はよく聞くけど、実は意味がわかっていない…」という方向けに、今回はSPAをわかりやすく説明します。

本記事を見ると、以下の内容が理解できます。

・SPAとは ・SPAとMPA（従来の方法）の違い ・SPAのメリット、デメリット ・SPAに適しているケース

SPAを有効的に使えば、ユーザーの満足度もあがり、より高品質なWebアプリを作ることが可能です。この記事を通して、SPAについてしっかり理解し、活用できるようにしましょう。

SPA（シングルページアプリケーション）について

まず初めにSPAのイメージを掴んでもらうために、SPAのポイントを2つ紹介します。

・1つのページでスムーズにコンテンツ切り替えができる技術 ・SPAとMPAは「ページ取得のサーバーへのアクセス回数」が違う

 

１つのページで、スムーズにコンテンツ切り替えができる技術

「SPA」とは「Single Page Application」の略で、１つのページで、スムーズにコンテンツ切り替えができる技術のことです。

従来のページの読み込みでは、複数のページがあり、それを１ページづつアクセスし表示していく方法でした。SPAでは、一度のアクセスでWebページの全体を取得した後、差分データのみを表示させることで、ページの高速化が期待できます。詳しい内容は後述の「SPAとMPAの違い」で説明します。

上記のようなことから、１つのページでスムーズにページ切り替えを行うことができるわけですね。

 

SPAとMPAは「ページ取得のサーバーへのアクセス回数」が違う

先述した、従来の方法のページの読み込みのことを「MPA（Multi Page Application）」と言います。では具体的に「SPA」と「MPA」は何か違うのでしょうか？ここではその違いについて、説明します。

「SPA」と「MPA」で大きく違うところは「ページ取得のサーバーへのアクセス回数」が違う点です。

SPAでは、一度サーバーにアクセスしたタイミングでWebページの全体を取得します。その後のページ切り替えは、差分データの情報のみを取得します。

一方、MPAの場合はページにアクセスする度、サーバーから一回ずつページを取得します。

上記を比較すると以下のようになります。

	ページの取得数（1回）	サーバーへのアクセス回数（ページ単位）	取得データ（ページ単位）
SPA	Webページ全体	1回	差分データのみ
MPA	1ページ	ページごとにサーバーへアクセス	1ページ分のデータ

 

ここまでのことから、「SPA」と「MPA」では「ページ取得のサーバーへのアクセス回数」が違うとわかりましたね。ではアクセス回数が減ると、具体的に何がいいのかは、後述の「SPAのメリット」で説明します。

SPAにおけるメリット・デメリット

ここまでで、「SPAについては何か」について理解いただけたかと思います。しかし具体的に何が良くて、何が悪いかなども気になりますよね。そこで、ここではSPAのメリット・デメリットについて説明します。

SPAにおけるメリット

SPAには、大きく以下の２つのメリットがあります。

・パフォーマンスの向上 ・UX（ユーザー体験）の向上

 

パフォーマンスの向上

SPAは１ページのデータを全て取得せず、差分データのみ取得します。これによりデータの通信量に抑えられ、同時にパフォーマンスも向上します。

Webページには、再更新の必要がないパーツ（ヘッダーやフッターなど）がありますが、従来の方法はそういった部分まで更新していました。

SPAは1回の通信でWebページ全体を取得し、差分データのみを更新します。そのためSPAでは、再度更新の必要がないパーツを残し、更新が必要なパーツ（ブログ記事など）を差分データとして更新します。結果的にデータ通信量を最小限に抑えられ、パフォーマンスの向上につながるわけですね。

UX（ユーザー体験）の向上

SPAの特徴を活かすことで、UX（ユーザー体験）の向上にもつながります。実際のサービスを例に交えて説明していきましょう。

たとえばFacebookが提供している「Messenger」というサービス。このサービスでは現在のメッセージ画面から、他のメッセージを見ようとした場合、ページ遷移をすることなく、別の画面の情報を見ることができます。これはSPAの「１つのページで、スムーズにコンテンツ切り替えができる」特徴を前面に活かしている例ですね。

また先述致しましたが、SPAを採用することでパフォーマンスも向上します。これはUX（ユーザー体験）を向上することにもつながります。Googleが定義したページ表示のUX指標「Core Web Vitals」などからわかる通り、パフォーマンス面がUXに大きく関わってくるのがわかります。

 

SPAにおけるデメリット

ここまでメリットについて説明してきましたが、逆にデメリットはなにがあるのでしょうか？

ここでは以下2つのデメリットについて説明します。

・初期ページを読み込むのに時間がかかる ・処理が複雑になりやすい

 

初期ページを読み込むのに時間がかかる

SPAの特徴の１つとして、1回の通信でWebページ全体を取得するというものがあります。この特徴が、初期ページの読み込みに時間をかけてしまう原因になってしまいます。

1回の通信でWebページ全体を取得するということは、その分通信するデータ量が多くなってしまうということになります。そのため、SPAは初期ページの読み込みに時間をかかるケースが多いです。

開発コストがかかる

SPAは従来の方法と比べ、開発にかかるコストがどうしても高くなってしまうのが現状です。

今までブラウザ側で行っていた処理も開発しなければいけないため、開発コストが自ずとかかってしまいます。具体的な処理の例は、以下のようなものがあげられます。

・ページごとにURLの設定が必要 ・ログイン状態の管理方法 ・戻る / 進むの履歴管理

 

またSPAを使う上で、代表的な技術の「React」や「Vue」というものがあります。こういった流行の技術を扱える人材は増えてきましたが、高品質なWebアプリの開発が可能な人材はまだまだ少ない印象のため。リソース面での開発コストもかかります。

Reactとは？JavaScriptとの関係やライブラリ・フレームワークについても解説！

 

SPA・MPAそれぞれを採用するケースは

ここまでSPAについて説明してきましたが、「結局SPAはどういったケースに向いているんだろう？」と思う方もいらっしゃるかと思います。

そこで最後にSPAとMPA（従来の方法）を比較し、具体的にどういったケースで採用した方がいいのかをまとめたいと思います。

SPAを採用すべきケース

SPAはユーザーの操作が多く、かつ長く利用するケースがSPAに向いていると言えるでしょう。

SPAは最初の読み込みが終われば、ユーザーが多くの操作をしても、ページ更新のラグが最小限で済みます。その分ユーザーはストレスなくWebアプリを利用できるため、上記のようなケースではSPAを採用すべきでしょう。

具体的な例をあげると、以下のようなケースがSPAでは有効的かと思います。

・タスク管理 ・メッセージ ・SNS

 

MPAを採用すべきケース

MPAは開発コストも抑え、ユーザーの滞在時間が長くないケースが、MPAに向いていると言えるでしょう。

あまり開発コストを割けないプロジェクトなどにSPAを採用すると、プロジェクトの進捗遅れや予算不足などの問題に直結しかねません。またユーザーの滞在時間が長くないサービスで、無理にSPAを採用すると、費用対効果が低くなる可能性もあります。

具体的な例をあげると、以下のようなケースがMPAでは有効的かと思います。

・Webメディア等のブログサイト ・開発コストを抑えたいプロジェクト

 

SPAは有効的に使えば、UXを高め、より満足度の高いサービスが作れることがわかりましたね。Webアプリ開発をする際は、ぜひSPAの利用を検討してみてください。

またAlobrigeは、「SPA」をはじめとしたモダンな技術を使い、ローコスト・ハイクオリティな開発が可能です。開発の際は、ぜひAlobrigeまでお問い合わせください。