【Webアプリケーション】SPAとは：仕組みやメリットをわかりやすく解説

SPAとは

SPA（Single Page Application）とはWebアプリケーションの開発手法の１つであり、単一のHTMLで画面遷移することなく動的にコンテンツを変化させるWebアプリケーションです。

SPAは最初のページ読み込み時にはヘッダーやメニューなどを取得し、その後の変更ではヘッダーやメニューなど変更させる必要のない部分はそのままにし、変化させたいコンテンツ部分のみをjavascriptで動的に更新します。

ブラウザでページ遷移を行わないでコンテンツを変更するためページ更新速度は速く、ＵＸ（ユーザーエクスペリエンス）を大きく向上させることが期待できます。

SPAのメリットとデメリット

SPAを利用する上でのメリットは次の通りです。

SPAではコンテンツのみをJavaScriptで更新するため、高速にコンテンツの更新が行えます。MPAと違い、ページ全体の読み込みをする必要がなく、サーバーとのデータ量にかかる時間を短くできるのは大きなメリットです。

またSPAのWebアプリケーションを開発する際に、フロントエンドとサーバーサイドで開発を並行して進めることができます。そのため開発工数を少なくできるメリットがあります。

SPAを利用する上でのデメリットは次の通りです。

JavaScriptはユーザー側で動作するため、ユーザーはプログラムの内容を見ることができます。そのため改変される恐れがあることは頭に入れておいてください。

サーバーとのやり取りするデータ量は減るため表示速度は高速です。しかし初回のローディング時にJavaScriptのコードを取得するため時間がかかってしまうのです。

Googleのbotが正しくJavaScriptを実行できないことがあり、SPAはMPAよりもSEOに弱いと言われています。現在のbotは最新のJavaScriptに対応しているため、SEOで不利になることはそこまで考えられないと私は思います。しかし念のため広告収入や多数の訪問を目的としたサイトであれば、MPAでサイトを作成することが無難です。

SPAが使われているサイト

SPAで開発されている有名なサイトは以下の通りです。