はじめに
以前React.jsで開発していた際に、SPAについて調べる機会がありましたので、記載していきます。
SPAとは
「単一ページでアプリケーションを構成すること」
なんだかよくわかりませんね。。。。
まずは従来のアプリケーションとSPAを比較してみましょう。
◇従来のアプリケーション
1.ユーザ操作
2.サーバーにリクエスト
3.サーバーでWEBページを生成
4.クライアント側へWEBページを送信
5.サーバーから受け取ったWEBページを描画
特徴
ユーザがリクエストする度にWEBページ全てが読み込まれることです。
◇SPA
1.初期ページ読み込み（初期描画）
2.ユーザ操作
3.サーバーにリクエスト
4.サーバーからクライアント側へ差分データを送信
5.差分のみを更新
特徴
最初のリクエストのみWEBページ全体を読み込む
その後は差分データ（JSONなど）を受け取りJavaScriptで必要な場所だけを更新する
※従来のものと違い、毎回ページ全体の更新をする必要がなくなる
要するにSPAでは、ページ全体をロードするのは初回のみで
それ以降は、JavaScriptで差分のみを更新するということ。
これが「単一ページでアプリケーションを構成すること」とどうつながるのかというと、
一つのHTMLに対してJavaScriptを用いて更新しているというのがポイントです。
※おまけ
SPAを作成できるフレームワークとして「React」「Vue」などがあります。
これらは「仮想DOM」を用いて差分更新を実現しています。よければ調べてみてください。
SPAのメリット/デメリット
◇メリット
・画面全体のロードが最初の描画のみなので、通信負荷や通信容量が削減されて画面表示の高速化につながる
・画面を表示したまま、コンテンツの変更が可能になる
（更新対象のみを変更するので「待ち」ストレスが無くなる）
・サーバー側でWEBページを生成する必要がなくなり、クライアント側とサーバー側が疎結合になる
◇デメリット
・初期ページを読み込むのに時間がかかる
JavaScriptの記述量が増えるため、初期描画に時間がかかる
・開発の複雑化
表示側の多くをJavaScriptで制御する必要があるため
以前感じていた疑問
SPAとして作ったアプリケーションでもボタン押下等のアクション後にURLが変更され、
画面遷移しているのではと思ったことはないでしょうか。
あれは動的にURLをJavaScriptで変更し、画面の一部を更新しているだけで
擬似的な画面遷移を実現しているのです。
（ユーザ目線では画面遷移しているように見える。）
例として簡単にあげます
Vue.jsでは「vue-router」を使用して、動的にURLを変更しています。
(一部抜粋)
<template>
<div>
<p>テスト</p>
<router-view/>
</div>
</template>
「router-view」と記載されている箇所のみがURLによって
動的に「component」（画面のパーツのようなもの）を切り替えています。
なので画面の一部がURLによって更新されているということです。
まとめ
SPAはユーザへのストレスを減らし、UXをより良いものにしてくれると思います。
そのためにもちゃんと理解をして実装をする必要があります。
ここまでずっとSPAを推しましたが、なんとなくSPAを選んだではダメです。
一つの手段にすぎないため、自分の知識を深め最適かどうかを判断することも重要です。
（自分にも言い聞かせてます。。。。。。。。）
参考文献
