SPA(Single Page Application シングルページアプリケーション)とは
HTML ページを最初に一度読み込んだのち、従来の Web アプリケーションのようなページ遷移を行わず、1つのページ内で JavaScript による情報の取得、描画などを行うタイプの Web アプリケーション。
マウススクロールによってコンテンツの続きが読み込まれるようなシンプルなものから、Gmail、Facebook など、1つのページ内にさまざまな機能が組み込まれた複雑なものまで、応用範囲は多岐にわたる。
技術的には、ページ内の JavaScript が、Ajax や WebSocket などによってサーバと非同期通信を行って情報(JSON、XML、HTML )を取得し、それを用いて DOM を更新し、ページの一部を書き換えることによって実現されている。
これらの処理は、自前で実装したり、jQuery を利用する方法でも可能ではあるが煩雑になりがちであるため、実際の SPA の構築では、Angular、React、Vue などのフロントエンドフレームワークを使用することが多い。
SPA では画面遷移がないため、必要な情報だけをよりすばやく表示できるなど、よりよいユーザーエクスペリエンス( UX ) を提供できると言われているが、次のような点に注意が必要である。
- 従来型のフロントエンド開発に比べ、開発コストが高い
- 初回読み込み時のデータ量が多くなりがちで、ユーザーが短時間しか滞在しないサイトには不向き
なお、JavaScript で動的にコンテンツを作り出すため、検索エンジンのクローラーボットが正しく JavaScript を解釈できない場合、SPA は SEO 的に不利になる可能性をもつ。
そのため、JavaScript をサーバ側で処理するサーバサイドレンダリングなどの利用が勧められることもあるが、クローラー側も日々改良が進んでおり、いずれそのような対策は不要になるとの見方もある。(2019年9月現在)

教育研修担当 (トレーニング担当者) のためのWebマガジンを編集しています。
-
- 「こんな特集、記事を読んでみたい」というリクエスト
- 「こんな記事を書いてみたい」という執筆者の方のお問い合わせ
や誤植のご連絡など、お問い合わせフォームより受付しています。
お気軽に問い合わせくださいませ!!