今回はSPA(シングルページアプリケーション)とは何かという初歩的な部分から、従来のWebサイトとの違いやメリット・デメリットを解説していきます。
今後Webフロント技術としてさらなる普及・発展が見込まれるSPAの基礎知識を知っておくと、今後役立つことは間違いないでしょう。
SPA(Single Page Application)とは？
そもそもSPA(Single Page Application)ってなに？というところから解説していきます。
その名前の通り、単一のページで構成されたWebアプリケーションのことです。
名前だけ聞くと、ペライチのLP(ランディングページ)の印象を受けるかも知れませんが、そうではありません。
SPAはページの切り替えの際に、差分だけを更新していくという新しい方法でページ遷移を実現しています。
またアプリケーションという名前ですが、JavaScriptなどのフロント技術だけで動かすことも可能です。
より理解を深めるために、従来のWebサイトの挙動と比較しながらみていきましょう。
従来のWebサイトの挙動を確認
まずは従来のWebアプリやサイトの挙動を確認します。
従来のWebサイトは、簡単に説明すると以下のフローに沿って動作しています。
- ユーザーが何かしらのアクション（クリックをして画面遷移など）を行う
- それを受けてサーバに通信（リクエスト）
- サーバ側でHTMLを生成し、ブラウザに返す（レスポンス）
- ブラウザに表示
まず、ユーザーがWebサイトに訪れるとそのページごとにサーバーにリスエストを送ります。
サーバはそのリクエストに応じたファイルをレスポンスとして返すことで、ブラウザに表示させています。
ページの切り替えごとにサーバーへ通信が発生するため、ページ遷移のときには毎回再読み込みが入るということですね。
SPAで構築したWebサイトの挙動
次にSPAの場合を見ていきます。
SPAの場合は以下のフローに沿って動作しています。
- ユーザーが何かしらのアクション（クリックなど）を行う
- そのアクションに必要な部分のデータだけをサーバに要求
- 返ってきたデータをJavaScriptで処理
- 差分だけを更新してHTMLに反映
SPAの場合は初回リクエスト時(Webサイトの最初の読み込み時)にのみHTMLファイルを返しています。
では、どのようにページを変えているかと言うと、2回目以降はページごとに必要なデータをサーバーに要求し、差分だけを更新してブラウザに表示するという流れになっています。
ページ全体のリクエストを送る従来のWebサイトとは違って、更新するべき差分だけをサーバーにリクエストすることで高速なページ遷移を実現しているのです。
SPA(Single Page Application)のメリット
SPAのメリットとして挙げられるのは以下のとおりです。
ページ遷移のローディングがほぼ無い
先に確認したように、SPAでは初回読み込みのみHTTPサーバとの通信を行います。
そのため一度ページの読み込みが終われば、別ページに移動したりする際のページ遷移は一瞬です。
再読み込みが行われずにページ遷移することでユーザーはストレスフリーで色々なページを見て回ることができるという訳ですね。
国内で代表的なサービスとしてはFacebookなどが挙げられます。
SPAのイメージが湧きにくいという方は流れを意識して体験してみるといいでしょう。
リッチなUIの実装が可能
本来のブラウザではなし得なかったリッチな表現をweb上で実装できるようになりました。
先程説明したように、ページ遷移時に必要な部分だけを更新するという仕組みは、高速なページ遷移を実現するだけではなく、ユーザーエクスペリエンス(UX)の向上に大きく影響を与えます。
実際にどんなUIが実装できるのかを見てみたい人は以下のサイトから、モダンJavaScriptフレームワークであるVue.jsでの実装例をいろいろと確認できます。
SPA(Single Page Application)のデメリット
初回ロードに時間がかかる
SPAの挙動を確認したときに見たように、初回アクセス時にWebサイトのデータをまとめて読み込むので、初回の表示まで時間がかかるというデメリットがあります。
さらに、クライアントサイドのJavaScriptの処理が増えるので、CPUやメモリーが少ないスマホなどのデバイスでは、操作性が損なわれる可能性もあるので、注意が必要です。
従来よりも工数がかかる
これは開発面でのデメリットですが、ブラウザ側でのJavaScript操作が増えるため開発の工数も増加します。
今までのWebサイトよりもリッチやUIを実装したり、UXの向上が期待できる反面、工数やコストなどのデメリットもあるので、プロジェクトごとに本当に必要かを見極める必要があるでしょう。
SPA(Single Page Application)を採用する場面
ここまでSPAの特徴を見てきましたが、実際使う際にはどんな場面で使うべきなのでしょうか？
SPAの特徴と照らし合わせて見ていきましょう。
ユーザーの滞在時間が長いサービスに向いている
SPAはその特性上、ユーザーが頻繁にページ遷移やコンテンツの操作を行う滞在時間の長いサービスに適しています。
何回もページ遷移を行うため、ページの切り替え速度が早いというSPAのメリットを存分に活かせるためです。
例えば、何かサービス内で目当てのコンテンツを探したり、比較したりするサービスはユーザの滞在時間が長いのでユーザーの体験を向上させるためにSPAを採用するのは良い選択肢だと言えるでしょう。
直帰率が高いサービスには不向き
一方で、ブログなどのようにユーザーがすぐに離脱する、直帰率が高いサービスはSPAにはあまり適していないといえます。
デメリットの部分でも解説しましたが、SPAはWebサイトへの初回アクセス時の読み込みが比較的長くなってしまします。
直帰率が高いサービスにSPAを採用しても、初回アクセス時にかかる時間が増加するだけであまりメリットはないと考えたほうがいいかも知れませんね。
まとめ
今回はSPA(Single Page Application)について解説しました。
モダンJavaScriptフレームワークを使って実装されるSPAは今後もどんどんと普及していくことでしょう。
モダンなSPA開発を自分でも行ってみたいという方は以下のようなJavaScriptフレームワークを学ぶ必要があります。
日本だとReactとVueの人気が非常に高いです。
初心者には日本語のドキュメントが充実していて、学習コストも低いVue.jsをオススメします。
当ブログではVue.jsの学習法から実践的な環境構築まで解説しているので、興味のある方は是非チャレンジしてみてください。
