SPA/MPAとは

## はじめに SPA(Single Page Application)とMPA(Multi Page Application)は厳密に説明するとわかりづらくなるので基本的なイメージを説明します。 SPAという新しいWebサイトの作りかがた出てきた時、それと比較して従来のWebサイトの作り方がMPAと呼ばれることになりました。 自分で作ってみるまではピンとこないかもしれません。 ## 従来のWebサイトの作り（MPA） Webサイトはクライアント（Google Chromeなど）がサーバー（nginxなど）にページを要求してその内容をユーザーに見せます。 別の内容が見たい場合はリンクをクリックするなどして、クライアントがサーバーに別のページを要求してその内容をユーザーに見せます。 その時前のページの内容は全部破棄され、新しいページの内容が表示されます。 リンクをクリックした時から新しいページが表示されるまでしばらく（ほんのちょっとですが）待たされることになります。 ## 新しいWebサイトの作り（SPA） SPAでは画面遷移をせずに、必要な部分のデータをサーバーから取得し、必要な部分だけを書き換えます。JavaScriptを使ってデータの取得や書き換えのタイミングを制御するため、自由なタイミングで部分的にページを書き換えることができます。 サーバーが用意するページとしては最初の１ページだけなので、SPAと呼ばれています。 ## SPAの誕生 ### Googleマップの衝撃 元々SPAはありませんでした。昔のブラウザーJavaScriptにはそういった機能（HTTPのリクエストを投げる機能）がなかったためです。 しかしそこにGoogleマップが現れました。GoogleマップがWebサイトとして登場した時プログラマーはびっくりしました。 「ページ遷移無しで地図がどこまでも見れている！」 従来の作り方だったらGoogleマップは下記のような作りになっているはずです。  隣の地図が見たいだけなのにリンクをクリックして、その都度待たされるというのは相当使いづらいはずです。ところがGoogleマップではマウスをドラッグさせるだけで次々にマップが読み込まれます。本来はページ遷移をしてページ全体を読み込み直さないと新しいデータは取得できないはずです。  そのころのプログラマーはGoogleマップのJavaScriptコードをすぐに調べ、XMLHttpRequestを使っていることを突き止めました。 XMLHttpRequestは最近（その当時）使えるようになったXMLをHTTPで取ってくるための関数です。実際はXMLに限らずあらゆるHTTPリクエストが飛ばせる関数だったので、GoogleマップではマウスドラッグとXMLHttpRequestを組み合わせてスムーズな地図表示を実現していたのです。 ::: message info 現在では[XMLHttpRequest](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest)より便利な[Fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)があります。 ::: ### SPAに向けて Googleマップの使いやすさに驚いたWeb界隈のプログラマーはXMLHttpRequestの動的なデータ取得による早いユーザーレスポンスや動きのあるインタラクティブなWebサイトの可能性に気がつき、研究していきます。 最終的に、 「最初の１ページだけ送っておいて、あとはJavaScriptで必要な部分だけ更新すればいい。URLもJavaScriptで書き換えればいい」 という結論に達し、そういったアプリがSPA（Single Page Application）と呼ばれるようになりました。 ## 現状の使われ方 完全にSPA、完全にMPAだけでなく、基本MPAで一部SPA的な実装など組み合わせた使われ方も多いです。