SNSやYoutubeなどの動画を見る時、スマートフォンやタブレットではアプリを使うけれど、パソコンではWebブラウザを使って見るという人が多いのではないでしょうか？

TwitterやFacebookをブラウザで見ると、他のWebサイトに比べてスマートフォンのアプリのような表示だと思いませんか？通常ブラウザでウェブサイトを閲覧する時、画面遷移時にはページ全体を読み込みますが、TwitterやFacebookはコンテンツ内の必要な箇所だけ切り替えられていることに気がつきます。

TwitterやFacebookでは「SPA」というWebアプリケーション構築を使うことでアプリのような動作を可能にしています。
今回のコラムではプログラミングやWebに詳しくない方に向けて「SPA（シングルページアプリケーション）」について解説していきます。

SPA構築はプログラミング知識がないと扱うのが難しい技術ではありますが、今後アプリのようなWebサイトを作りたい方や、ページ遷移のないアンケート等をWebサイト内に設置したい方の基礎知識としてお役に立つはずです。

SPA（シングルページアプリケーション）とは

SPAとは「Single Page Application（シングルページアプリケーション）」の略称です。
画面の必要な箇所だけを書き換えることで、Webブラウザでもアプリ（ネイティブアプリ）のようなスムーズな画面遷移が可能なのが特徴です。

冒頭にもある通り、SPAを使った例にTwitterやFacebookが挙げられます。SPAがピンと来ない方は実際にWebブラウザでこれらを見てみると、ヘッダーやメニューはそのままで必要な部分だけページやコンテンツの切り替えられていることが分かると思います。

※ネイティブアプリ
OSにインストールして使うアプリのことを指します。
一方、Webブラウザ上で動くアプリを「Webアプリ」と呼びます。

SPAの仕組み

Webブラウザにサイトを表示するには、ブラウザが出したリクエストに対して、サーバーがHTMLをレスポンスし、ブラウザがHTMLを読み込むことでページを表示させます。

従来のWebサイトでは、ブラウザはリクエストの度にサーバー側からHTMLを受け取り、それを繰り返すことで画面遷移を行ってきました。
これに対してSPA（シングルページアプリケーション）では、初回は同じようにサーバーからHTMLを受け取るのですが、以降の画面遷移はサーバーを介すことなく、操作に応じたデータのみをレスポンスとして受け取り画面遷移を行います。

操作の度にページ全体を読み込む通常の方式と比較し、必要な部分だけを更新するためスムーズに動作させることができ、スマートフォンのアプリ（ネイティブアプリ）に近いデザインや操作感が可能です。

SPAは性質上、ひとつのWebサイト内でユーザーの操作に応じて頻繁に画面を書き換えるタイプのWebサイトに向いています。

【SPAに向いているWebサイト】

・アンケートサイト
・書籍検索サイト
・チャットアプリ

導入のメリット・デメリット

メリット

・スムーズな動作
・アニメーションのようなページ遷移
・ネイティブアプリのような機能
・すべてのデバイスで使用可能
Webブラウザを使用するため、デバイスごとにインストール・ダウンロードの必要がなく幅広く使用できます。

デメリット

・初回に表示速度が遅い場合がありますが、対策としてSSR（Server Side Rendering）やSSG（Static Site Generator）などといった手法もあります。

主な開発環境

WordPress（PHP)では実装できないため、下記のようなJavaScriptフレームワークを導入して制作を行うのが一般的です。
・Vue.js
・React.js
・Angular

まとめ

いかがでしたでしょうか？
SPAの解説は専門用語が多く難しいかもしれませんが、日常的によく使っているWebサイトやアプリにもSPAの技術はたくさん使われています。
世界的にも大流行している技術の一つですので、ぜひ積極的に取り入れてみて下さい。専門的なことは京都広告デザイン.comにお任せください。初歩的なことから技術的なことまで丁寧にご相談に応じます。