SPAとは
- Single Page Application（シングルページアプリケーション）
- SPAとは複数ページではなく、単一のページで構成されたwebアプリケーションまたはwebサイト
SPA使用例
Trello
SPAで単一のページでできており、Webなのにまるでアプリのようにページ遷移無しで他の情報を見ることが可能。
SPAを従来のwebアプリケーションと比較
従来のwebアプリケーションはブラウザがリクエストしたページに対して新しいHTMLファイルを送り、それをブラウザで表示する、といったものでした。
SPAでは、ブラウザからのリクエストする内容が異なります。
ブラウザには最初に基本となるHTMLファイルが送られており、新しいページをサーバーから取得する際、その差分のみをリクエストします。
そして、サーバーから差分のみを返し、それを同じHTMLファイルを使って表示します。
これによって、ページを更新することなく、サーバーと通信することができます。
なぜこのようなやり取りがどうしてできるかと言うと、Ajaxという通信処理を使っているからです。
Ajaxとは
Ajaxとは「Asynchronous JavaScript + XML」の略
JavaScriptを使って、非同期にサーバー間での通信を行います。
GoogleMapはページの遷移がなく新しい情報を取得可能。これはAjaxを用いて動いている。
通常、プログラム処理は1つずつ行われ、同時に複数の処理が走ることはありません。これを同期処理といいます。
一方、Ajaxでは、プログラムでメインの処理が走っている裏で、HTMLの指定した部分を書き換えるためにサーバーと通信を行うことができます。プログラムが並行して走っている形となるので、非同期処理と呼ばれます。
サーバーと通信して返ってくるのはJSONというデータ形式で、この形式をJavaScriptが読み取り、非同期で部品を更新することができます。
SPAのメリット
-
ユーザーにストレスのないページ遷移
→表示速度が速い。サクサク表示が切り替わるので、とても快適 -
アプリのような体験を提供できるUX（体験）ができる
→いつも使っているスマートフォンのアプリ感覚で使えたり、使い勝手が良い
UXとはユーザーエクスペリエンスのことで、人がモノの利用を通して得る体験のことです。
SPAのデメリット
- 古いブラウザでは処理が重くなる
ブラウザのバージョンなどが古い場合、とても動作が重くなってしまい、SPA導入の意味が全くなくなってしまいます。
- 実装コストが大幅に増える
SPAでは今までブラウザに処理を任せていた部分を実装する必要があるため、開発コストがかさみます。
最後に
Reactを勉強しててSPAという言葉よく聞くようになり、なんとなくの理解だった為、今回まとめてみました。
最後までご覧頂きありがとうございました