---
title: "SPAとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "AI生成のSPAをチームや顧客にプレビュー共有したい方向け。SPAがHTML共有や静的配信と何が違うか、共有時に起きる404や白紙問題の原因と対策、安全な共有手順を具体的に解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-single-page-app-html-share"
markdown: "https://giga-site.com/articles/what-is-single-page-app-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# SPAとは？HTML共有・AI生成サイトでの意味をやさしく解説

AIでWebアプリを生成してチームに共有しようとしたとき、URLを渡しただけでは動かない、あるいはビルドフォルダをそのまま送ったら相手が開けなかった、という経験はないだろうか。その原因の多くはSPA（Single Page Application）の仕組みにある。SPAの特性を知ることで、共有の落とし穴を避けられる。

> Source HTML: https://giga-site.com/articles/what-is-single-page-app-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

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を作ってください。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SPAとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "AI生成のSPAをチームや顧客にプレビュー共有したい方向け。SPAがHTML共有や静的配信と何が違うか、共有時に起きる404や白紙問題の原因と対策、安全な共有手順を具体的に解説する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-single-page-app-html-share",
  "url": "https://giga-site.com/articles/what-is-single-page-app-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "SPAをアップロードしたが、ページ内リンクをクリックすると404になる。どう対処すればいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "配信先がすべてのパスに対して`index.html`を返す設定（フォールバック）になっていないことが原因です。ギガサイト便はこれを自動で処理します。Netlifyなら`_redirects`ファイルに`/* /index.html 200`と書けば解決します。"
      }
    },
    {
      "@type": "Question",
      "name": "SPAと静的HTMLサイトでは、共有URL発行の速さに違いがありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "配信の速さはファイルサイズ次第です。SPAはJSバンドルが大きくなりがちなためアップロードに数秒余分にかかることがありますが、ギガサイト便は静的ファイル配信なのでURLが発行されてからの表示速度に差はほぼありません。"
      }
    },
    {
      "@type": "Question",
      "name": "AI生成のSPAにはどのフレームワークが多く使われていますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "v0やBoltはNext.js（App Router）、LovaはReact+Vite、GeminiのCanvas出力はReact CDNが多い傾向です。フレームワークによってビルドコマンドと出力先フォルダが異なるため、確認してからzipを作ってください。"
      }
    }
  ]
}
```