「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

サクっと一言で説明すると

ポチポチ操作しても他のページに移動しない（けど中身が切り替わる）ホームページ

が「シングルページアプリケーション」です。
「Single Page Application（シングル・ページ・アプリケーション）」の頭文字を取って「SPA」と表現されることも あります。



※「Single Page Application」を何となく日本語にすると「1つのWebページのソフト」となります。[詳細]

……と、いきなり言われても分かりませんよね。
大丈夫です。
順番に見ていきましょう。

まずは予備知識として、ホームページが表示される流れについて説明します。
「そんなの説明されなくても知ってるよ！」な人は適当に読み飛ばしてください。

あなたがホームページを見ようとすると、まず、ホームページを見るときに使うソフト（Webブラウザ）からホームページのファイルが置いてあるコンピュータ（Webサーバ）に対して「このページをおくれ」と お願いが出されます。



そのお願いに対して、WebサーバさんからWebブラウザさんに「ほれ、そのページだよ」と お返事がきます。



お返事を受け取ったWebブラウザさんは、受け取った内容（ホームページのファイル）を画面上に表示してくれます。



これが、ホームページが表示されるときの流れです。



ホームページが表示されるときの流れは

１．くれよ
２．ほらよ
３．さぁ見ろ

でワンセットです。



最初のページを表示した後にリンクを押したりして別のページに移動したときは

１．くれよ（1回目）
２．ほらよ（1回目）
３．さぁ見ろ（1回目）
４．くれよ（2回目）
５．ほらよ（2回目）
６．さぁ見ろ（2回目）

の流れになります。



ただし、2回目の「さぁ見ろ」のタイミングで、1回目の「さぁ見ろ」で表示したページは捨てられます。
よって、より正確に表現すると

１．くれよ（1回目）
２．ほらよ（1回目）
３．さぁ見ろ（1回目）
４．くれよ（2回目）
５．ほらよ（2回目）
６．「さぁ見ろ（1回目）」で表示したページを捨てる
７．さぁ見ろ（2回目）

の流れになります。



以上を踏まえて、本題に入ります。

技術の進歩と共に「くれよ」を裏でコッソリやる技が編み出されました。
ちょっと小難しい言い方をすると「非同期通信」というやつで「くれよ」をできるようになったのです。

それに伴い

「さぁ見ろ（1回目）」で表示したページを捨てないでページの一部や全部を差し替えられる

ようになりました。

例えば、そうですね。

「さぁ見ろ（1回目）」で表示したページが表示されています。



その状態で「くれよ（2回目）」を裏側でコッソリやります。



「くれよ（2回目）」に対する「ほらよ（2回目）」が来ました。
「さぁ見ろ（1回目）」で表示したページを表示している状態で、新しいページをコッソリ受け取ります。



あとはページの作り方次第ですが、表示中のページに「ほらよ（2回目）」でもらってきたページを合体させたりできます。
ページの一部を差し替えるわけです。



あるいは、丸ごとページを置き換えたりもできます。



ただし、これは「ページの一部差し換え」の対象をページ全体に広げただけです。
実質的に「ページの一部差し換え」と同じです。

ここで ちょっと考えてみてください。

「くれよ（2回目）」でもらってきたページは「ページの一部差し換え」に使いました。
今現在、画面に表示されているページは

「さぁ見ろ（1回目）」で表示したページ＋α（「くれよ（2回目）」でもらってきた内容）

です。
ホームページを見ている人にとっては（表示内容が一部変わったにしろ）「さぁ見ろ（1回目）」で表示したページが表示されています。



せっかくなので、もう1回「くれよ」をやってみますね。

「さぁ見ろ（1回目）」で表示したページ＋α（「くれよ（2回目）」でもらってきた内容）が表示されています。



その状態で「くれよ（3回目）」を裏側でコッソリやります。



「くれよ（3回目）」に対する「ほらよ（3回目）」が来ました。
「さぁ見ろ（1回目）」で表示したページ＋α（「くれよ（2回目）」でもらってきた内容）を表示している状態で、新しいページをコッソリ受け取ります。



あとはページの作り方次第ですが、表示中のページに「ほらよ（3回目）」でもらってきたページを合体させたりできます。
ページの一部を差し替えるわけです。



あるいは、丸ごとページを置き換えたりもできます。



ただし、これは「ページの一部差し換え」の対象をページ全体に広げただけです。
実質的に「ページの一部差し換え」と同じです。

ここで ちょっと考えてみてください。

3回目のやり取りでもらってきたページは「ページの一部差し換え」に使いました。
今現在、画面に表示されているページは

「さぁ見ろ（1回目）」で表示したページ＋α（「くれよ（2回目）」でもらってきた内容＋「くれよ（3回目）」でもらってきた内容）

です。
ホームページを見ている人にとっては（表示内容が一部変わったにしろ）「さぁ見ろ（1回目）」で表示したページが表示されています。



4回目以降も同じです。
何回「くれよ」をしようと「ページの一部差し換え」に使われている限り、ホームページを見ている人にとっては

「さぁ見ろ（1回目）」で表示したページ＋α

が表示されています。



このような

「さぁ見ろ」が1回しか発生しない作りになっているホームページ（とかWebシステム）

がシングルページアプリケーション（SPA）です。

実際には何回も「くれよ」「ほらよ」をやっていますけどね。
裏側でコッソリやっているので、人間様には見えません。
また、コッソリもらってきた内容は

ページの中身の差し替え

で使います。
それに伴い、ページの表示内容は変わるけど、ページ自体は移動しない（「さぁ見ろ」が発生しない）のがシングルページアプリケーション（SPA）です。



ここまでの説明がよく分からなかった人は「Google マップ」を思い浮かべてください。
Google マップを開くのは最初の1回だけですよね。
ポチポチ操作すると地図の表示位置とかは変わりますが、ページ自体は移動しません。
Google マップのような作りのホームページがシングルページアプリケーション（SPA）です。