SPAとは

SPA（Single Page Application：シングルページアプリケーション）は、最初に 1 つの HTML のページを読み込み、その後はページを移動するたびにサーバーから新しいページを読み込むのではなく、JavaScript で画面を書き換えて動く Webアプリケーションです。

特徴

• 画面の切り替えが速く、アプリのような操作感にできる
• 必要なデータだけを API から取得する
• Vue.js、React などのフレームワークでよく作られる

課題と対策

• 最初の表示が遅くなりやすい：必要な部分から読み込む、サーバー側で HTML を作る（SSR）などで対応する
• SEO：検索エンジンが内容を読み取りにくい場合があるため、SSR や事前に HTML を作る方法（SSG）を組み合わせる
• ブラウザの戻る・進むや URL の管理：ルーターの仕組みで、画面ごとに URL を変える

セキュリティのポイント

• 画面で表示を切り替えていても、データの アクセス制御 は必ずサーバー側の API で行う
• アクセストークン をブラウザに保存する場合は、XSS で盗まれないよう保存場所に注意する

関連用語

API、DOM、SEO