はじめに

こんにちは、まつけんです。

僕が開発に携わっているクラウドテックが管理画面のSPAへのリプレースが始まりました。　

「今流行りのモダンな技術を習得するチャンスや！」と思ってます。
なので、この際SPAをエンジニアじゃない人に説明できるくらい自分でも理解したいと思ったので、SPAを図解などを用いて、できるだけ噛み砕いた説明をします。

早速みなさんに質問です！

Q: 従来のWebサイトとSPAで作られたWebサイトの仕組みの違いを説明できますか？

この記事を最後まで読むと、上記のような質問にさらっと答えることができます。

想定読者

SPA開発の知見が浅い人
- IT企業に勤めているがエンジニアではない人
- エンジニア経験が浅い人（1年未満）

【基礎】SPAとは

SPA（シングルページアプリケーション）は、近年主流のWebサービスの開発手法の1つ。
その名の通り、1枚(シングル)のページでコンテンツが切り替わるWebアプリケーション（サイト）です。
Google mapやSlackなどで使われています。

SPAの良い点

ページ遷移にカクツキがなく、なめらかなスマホアプリのような動き
サイト内でのページ遷移速度アップによる、ユーザー体験の向上

現代のWebサイトではページの表示速度は超重要です。脱線しますが、ここで面白いデータがあるので、紹介します。

以下のグラフはAmazonのエンジニアが公開している横軸が「ページの表示速度」、縦軸が「売り上げ」のグラフです。
要約すると、「ページの表示速度が0.1秒遅くなれば、1％売り上げが減少し、1秒早くなれば10％売り上げが増加する」ということを示しています。

｢表示が0.1秒遅れると､売上が1％減少する｣絶対王者アマゾンがやっている"すごすぎるデータ分析" より引用

ではなぜ、SPAで作ると「従来のWebサイトと比べてサイト内のページ表示速度がアップするのか」について、以降の文章で語っていきます。

Webの処理の全体感

まずはWebの処理の全体感を把握してもらいたいので、ざっくりいうと下記の流れでWebは成り立っています。

クライアントからサーバーにリクエストを投げて、サーバーからクライアントにレスポンスを返します。

ここで言う「クライアント」はユーザーが操作するPCやスマホ端末などを指し、「サーバー」はサービス提供側のコンピュータのことです。

Web のしくみ - ウェブ開発を学ぶ | MDN より引用

従来のWebサイトとSPAで作られたWebサイトの処理の違い

ここからは例として、ユーザーがQiitaを閲覧する流れの下記4つの処理で、「従来のWebサイト」と「SPAのサイト」でどの部分で処理が違ってくるのかを説明します。

クライアントから、「Qiitaを見せて」のリクエスト
サーバーから、「これがQiitaのTopページやで」のレスポンス
クライアントから、「次はまつけんのプロフィールを見せて」
サーバーから、「これがQiitaのまつけんのプロフィールやで」のレスポンス

【補足】
※従来のWebサイト・・・　この記事では、MPA（Multi Page Application）のことを「従来のWebサイト」と表現させていただきます。

MPA参考資料

従来のWebサイト処理の流れ

【解説】

①②
AさんがQiitaのトップページにアクセスすると、サーバがリクエストを受け付けて、一致するページのHTMLファイルを返却します。

③④
Aさんが「まつけんのプロフィールページ」のリンクをクリック（リクエスト）したことにより、サーバー側から一致するページのHTMLファイルを返却する。以降、画面遷移のたび、③④を繰り返す。これを同期通信と呼びます。

「同期通信　is 何？」っていう疑問にお答えすると、
クライアントはサーバーからレスポンスが返ってくるまで、他の作業ができなくなる通信方式です。なので、ユーザーの待ち時間が発生します。

【まとめ】従来のWebサイトでは、
上記のように画面遷移する度、サーバー側からHTMLファイルがレスポンスとして送られるため
「ページ全体の再読み込み」が発生します。

「ページ全体の再読み込み」→→ ユーザーの待ち状態発生→→ ユーザー体験の低下
- これを同期通信と呼びます

なので、上記のようにユーザー体験を低下させる可能性が従来のサイトにはあります。

▼同期通信について、分かりやすい記事

初心者目線でAjaxの説明
Ajaxについて理解する

SPAのWebサイト処理の流れ

【解説】

①② →→ ここまでは従来のサイトと同じ
AさんがQiitaのトップページにアクセスすると、サーバがリクエストを受け付けて、一致するページのHTMLファイルを返却します。

③④
Aさんが「まつけんのプロフィールページ」のリンクをクリック（リクエスト）したことにより、サーバー側から必要最小限のデータを返却し、非同期通信で画面更新します。以降、画面遷移のたび、③④を繰り返す。

「非同期通信　is 何？」っていう疑問にお答えすると、
クライアントはサーバーからのレスポンスが返ってこなくても他の作業ができる通信方式です。

実際にSPAで作られているQiitaのトップページからプロフィールページへ遷移してみると、ヘッダーが共通で存在していて、必要最小限のデータだけ更新しているのが分かります。

SPAの画面遷移が従来のサイトより速い理由
画面全体の更新をせず、非同期通信のみで画面遷移を実現できるから

最初の質問にはこう答える

Q: 　従来のWebアプリケーションとSPAで作られたWebアプリケーションの仕組みの違いを説明できますか？

最初の質問にはこんな感じで回答できますね

A: 　従来のサイトでは画面遷移するたびにサーバー側にHTMLファイルのリクエストが送られ、HTMLファイルがレスポンスとして返却されます。なので、ページ全体の再読み込みが発生し、ユーザーの待機状態が続くことによって、ユーザー体験の低下に繋がる可能性がある。

一方、SPAのサイトは画面遷移の時、サーバー側から必要最小限のデータ取得を非同期通信で行っているため、ユーザーの待機状態が発生せず、なめらかなスマホアプリのようなページ遷移になる。
結果的にそれが「軽いサイト」と認識され、ユーザー体験向上に繋がる。　「キリっ！」

参考サイト