SPA(Single Page Application)は、Webアプリの表現力や操作性などを向上させる技術の1つ。Webページを遷移せずに、必要な部分だけを切り替えて表示する技術や手法である。JavaScriptのプログラムによって実現されている。

 SPA対応のアプリでは、ページごとにデータをサーバーからダウンロードしながらページ全体を遷移するのではなく、画面を構成する要素を一度に取得して、アプリの操作に応じて変更が必要な部分のみ描画する。これにより、サーバーとの通信量が減り、通信が非同期で実行される。ページの更新にかかる時間が短縮されるので、アプリの応答速度や描画速度を高めることができる。

SPAの処理イメージ
[画像のクリックで拡大表示]

 SPAの典型的な活用例の1つは、データ入力画面などで画面遷移せず、画面の一部が浮き上がったような表示をするケースだ。背景部分がグレーになり、入力画面だけがハイライト表示される。

 データ入力が完了して元の画面に処理が戻っても、新たな通信が発生することなく、元の画面が表示される。

 ただし、SPAの利用には注意点もある。初回のアクセス時にWebサイトのデータをまとめて読み込むので、初回の表示まで時間がかかる。またクライアント端末でのJavaScriptの処理が増えるので、CPUやメモリーが少ないデバイスでは操作性が損なわれる可能性もある。

 SPAの開発には、必要になる共通処理をまとめたWebフロントエンド開発向けのフレームワークを使うのが一般的だ。利用者が多い人気のSPAフレームワークとしては、「Angular」「React」「Vue.js」などが挙げられる。