開発技術Webテクノロジ

SPA（Single Page Application）の特徴として最も適切なものはどれか。

ア.SPAは初回ロード時にHTML・CSS・JavaScriptをまとめて取得し、以降のページ遷移はJavaScriptがDOMを動的に書き換える。サーバとはAPIを通じてデータのみをやりとりする。正解

イ.SPAはページ遷移のたびにサーバから完全なHTMLを受け取って表示を切り替える。初期ロードが速く、SEOに優れている。

ウ.SPAはサーバサイドレンダリング（SSR）と同義であり、JavaScriptなしでも動作することが最大の特徴。

エ.SPAではブラウザの「戻る」「進む」ボタンが機能しない。これはSPAの構造上の制約で回避する手段がない。

解説

SPAは「アプリのようなWebサイト」。初回だけ大荷物を運んで、あとはその場で荷物の中身を入れ替える感じ。MPA（Multi Page Application）は毎ページで荷物を丸ごと受け取り直す方式。

なぜアが正解か

SPA（Single Page Application）: 初回アクセス時にHTMLのシェル・CSS・JavaScriptをまとめてダウンロード。以降のナビゲーションはJavaScriptがDOMを動的に書き換えることでページ遷移を模倣する。サーバとのデータ通信はREST APIやGraphQLを通じてJSONのみでやりとりする。代表例: React SPA・Vue SPA・Angular。メリット: ページ遷移が高速でUXがアプリに近い。デメリット: 初期ロードが重い・SEOの工夫が必要。

なぜイは間違いか

ページ遷移のたびにサーバから完全なHTMLを受け取るのはMPA（Multi Page Application）の特徴。SPAはDOMを動的に書き換えるのでサーバからHTMLを再取得しない。

なぜウは間違いか

SPAとSSRは異なる概念。SPAはクライアントサイドレンダリング（CSR）が基本。SSRはサーバでHTMLを生成してからクライアントに送る方式。

なぜエは間違いか

SPAは History API（pushState）を使えばブラウザの戻る・進むを実装できる。Vue RouterやReact Routerなどのライブラリがこの問題を解決している。

出典: AI生成問題（学習用）

← 前の問題

運用テストにおける「受入テスト（UAT: User Acceptance Testing）」の目的と実施主体として正しいものはどれか。

次の問題 →

PWA（Progressive Web App）の特徴として最も適切なものはどれか。

開発技術の問題を解くこの分野の問題一覧を見る