シングルページアプリケーション（SPA）のすすめ

2018/4/13

ページの高速化等が見込めるシングルページアプリケーション（SPA）について、サイトでの活用を考えてみたいと思います。

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

サイトのページとなるファイル（index.html等）は1枚のみで、あとはJavaScript等を使ってページの内容を動的に書き換える技術がシングルページアプリケーションです。
Single Page Application の頭文字をとって「SPA」と略されます。

「アプリケーション」というとソフトウェアのようなもののイメージを持つかもしれませんが、近年はWebサイト自体を「Webアプリケーション」という位置づけで捉え、これまで “見るもの” だったWebサイトから “使うもの（機能を持つもの）” という側面を強調するようになってきています。
そうした流れから「アプリケーション」という言葉が使われています。

有名なところでは、GmailやTwitter、Googleマップなどが（全てではありませんが）SPAのような構成でできています。
特にGmailはページの移動なしにページ内容が変わるため、わかりやすいかもしれません。

SPAのメリット

動的にページの内容を書き換える最大のメリットとしては、通信の省力化が挙げられます。
通常のWebページを閲覧した際、裏側では該当のページ（index.html等）のほかにCSSやJavaScript、特殊フォントなどの関連ファイルも通信によってダウンロードされています。
他のページに遷移した場合、また同じようにそれぞれのファイルがダウンロードされます。
毎ページごとにサーバーへ通信するため負荷もかかりますし、ダウンロード完了からページ表示までの時間もかかります。

SPAでは、これらの関連ファイルの読み込みは最初の1回だけで、あとは必要に応じてページ内容を部分的に読み込む形式です。
そのため通信負荷や通信容量が大幅に削減され、表示の高速化に繋がります。
特にモバイル環境ではデスクトップに比べて通信が貧弱な場合があるため有用です。

そのほかのメリットとしては、表示側（フロントエンド）と処理側（バックエンド）が切り離せるという点があります。

SPAではページ内容の一部をAPI経由（後述）で取得するため、表示側と処理側が明確に分かれています。
ですので、例えば表示側と処理側を別々のサーバーで運用するようなことも可能です。

処理側ではデザイン等を気にすることなく情報を送出することだけに集中でき、表示側では処理を作る必要なくデザインに集中できるため、分業もしやすいかもしれません。

SPAのデメリット

まず挙げられるデメリットは、開発の複雑化です。
SPAはサーバー側で動く言語に加え、表示側の多くをJavaScriptで制御する必要があります。
これまで単純にHTMLを書いてアップロードすればページが表示されていたものが、JavaScriptを通して表示するようになるため、そのぶんの工数がかかります。

また、近年はJavaScriptの進化が目覚ましく、SPAに適した技術（「React」「Vue」といったもの）を使う方が効率が良いため、その学習コストが必要です。

もう一点はSEOに関してのデメリットです。
SPAでできたページは、JavaScriptの処理が完了し内容が読み込まれるまではHTMLが空の状態です。
もし空の状態で検索エンジンに認識されてしまうと内容がないページになってしまいますが、Googleに関してはSPAのページであっても “正しく設定されていれば” 通常のページと同様にクロールできると言っています。
ただ、通常のページに比べてクローラの検証等に時間がかかるため、検索結果への反映までにやや時間がかかる場合があります。

SPAの仕組み

SPAは通常、サーバーと「API」で通信してページ内容を更新します。
新たな略語が出てきて恐縮ですが、APIとは「アプリケーション・プログラミング・インターフェイス」の略で、広い意味のある言葉ではあるのですが簡単に言うと「サーバー間通信の決まりごと」のことです。

Webページ内容の一部に必要な情報のみを、JavaScriptがサーバーと通信して取得します。
Gmailでいうと、上部や左のメニュー等はそのままで、新規受信メールの情報のみサーバーがら取得し、表示部分に差し込む、といった感じです。

弊社の提供サービスである ポータルサイトパッケージ ではWordPressを使用することが多いのですが、WordPressにはバージョン4.7以降、標準で REST API という機能が付いています。
（それ以前のバージョンはプラグインで追加可能）

これは、WordPressで更新した内容をAPI経由で取得できる機能で、「投稿の本文のみ」や「検索の一覧のみ」といった部分的な情報を取得できるため、これを利用すればWordPressでもSPAが実現できます。

SPAの活用

JavaScriptやCSSのような外部ファイルの読み込みは通信コストが高く、ページ表示速度への影響が無視できない大きさです。
モバイルユーザーは特にページ表示の速度を気にする傾向がある（参考：Googleの研究結果）ため、モバイル対応のサイトならSPAは有用だと思います。

SEOを重視するようなポータルサイトの場合、SPAで重要視するべきは検索エンジンへの通知です。
SPAは最初に読み込まれたページから移動しないため、例えばページタイトルやmetaタグも、最初のページに書いた情報のままですので、こういった部分を更新する仕組みが必要です。
また、Googleが推奨する構造化データの提供や検索サイトマップの確実な生成（これはGoogle以外の検索エンジンにも必要）なども非常に重要になってきます。

また、アクセス解析でページの変化を計測することも、改善のために重要になってきます。

おわりに

モバイル化が進む昨今、SPAの必要性は高まっていくと予想していますが、SEOへの不安を考えると少し躊躇していまします。
通常の構成（非SPA）と合わせ、適材適所かを判断するのが大切だと感じます。

個人的には、例えば管理画面のようなクローズの環境かつ使いやすさが求められるような環境なら積極的に導入しても良いのではないかと思います。