ひとことで言うと
SPA（Single Page Application）とは、最初の読み込み時に1枚のHTMLとJSバンドルをすべてダウンロードし、以降のページ遷移はJavaScriptがURLを書き換えて画面を切り替える方式のアプリだ。React Router、Vue Router、Tanstack Routerなどがこのルーティングを担う。
ユーザーが体感するのはネイティブアプリに近い画面遷移の滑らかさだが、その裏でHTTPリクエストは1回しかサーバーに送られていない。この構造が「HTMLを1枚共有すれば動く」という期待と実態のギャップを生む。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
SPAをビルドしてできた`index.html`をファイルとして相手に渡すと、`file://`プロトコルでの動作制限に加え、画像やCSSなどのアセットパスが合わずに表示が崩れることが多い。さらに内部リンクをクリックすると`file://`のままURLが変わってファイルが存在しないと判断され、何も表示されなくなる。
ギガサイト便でSPAをアップロードする際は、ビルドフォルダ（distやbuild）全体をzipにして送るだけでよい。配信側がHTTPS URLを発行するため、JSルーターが正常にURLを書き換えられ、ページ遷移も機能する状態でレビューしてもらえる。
よくある誤解
「SPAはサーバーが必要」という誤解がある。実際にはSPAのビルド成果物は完全な静的ファイルであり、サーバーサイドの処理は不要だ。ただし、どのURLへの直接アクセス（ディープリンク）でも`index.html`を返すよう設定する必要があり、それができない環境では404が出る。
「SPAは1ページしか作れない」という勘違いも多い。ページ数に制限はなく、複数のURLに見えるページを実装できる。ただし実態は全ページが同一のHTMLファイルから生成されており、検索エンジンからのアクセスや共有URLの扱いがMPAとは異なる。
安全に使うための注意点
SPAのビルドに含まれるJSバンドルには、開発中に使ったAPIのエンドポイントURLや`REACT_APP_`プレフィックスの環境変数が含まれることがある。共有前に`strings dist/assets/*.js | grep -i key`などのコマンドでバンドル内の文字列を確認し、機密情報が含まれていないかをチェックする。
SPAは認証前のルーティングをJS側で制御するため、認証ページをスキップするURLを直接入力されても、ガードロジックが未実装なら保護されないリスクがある。共有URLを受け取った人が認証不要でアクセスできる範囲を事前に確認し、機密コンテンツがある画面は共有URLに含まれないよう設計する。
よくある質問
SPAをアップロードしたが、ページ内リンクをクリックすると404になる。どう対処すればいいですか？
配信先がすべてのパスに対して`index.html`を返す設定（フォールバック）になっていないことが原因です。ギガサイト便はこれを自動で処理します。Netlifyなら`_redirects`ファイルに`/* /index.html 200`と書けば解決します。
SPAと静的HTMLサイトでは、共有URL発行の速さに違いがありますか？
配信の速さはファイルサイズ次第です。SPAはJSバンドルが大きくなりがちなためアップロードに数秒余分にかかることがありますが、ギガサイト便は静的ファイル配信なのでURLが発行されてからの表示速度に差はほぼありません。
AI生成のSPAにはどのフレームワークが多く使われていますか？
v0やBoltはNext.js（App Router）、LovaはReact+Vite、GeminiのCanvas出力はReact CDNが多い傾向です。フレームワークによってビルドコマンドと出力先フォルダが異なるため、確認してからzipを作ってください。