010. SPA否定ではなく簡略化（SPA Simplification, Not Negation）

原理：なぜSPAは「悪夢」になったのか

SPAの理想と、残酷な現実

Single Page Application（SPA）。一度サイトを開いたら、二度と画面が白くリロードされることなく、まるでスマホアプリのようにヌルヌルと画面が切り替わる体験。これは、Web開発者が追い求めた一つの「理想」でした。

しかし、その理想を実現するために、私たちはあまりにも多くの犠牲を払いました。ひとつのSPAを作るために、膨大なJavaScript（JS）フレームワークを学び、ビルドパイプライン（WebpackやVite）を構築し、複雑なルーティングライブラリを導入し、サーバーとは別にフロントエンドの宇宙を作り上げなければなりませんでした。結果として、「サクサク動く画面一つ作るのに、なぜこれほどエンジニアの人生を費やさなければならないのか？」という本末転倒な状況が生まれてしまったのです。

HTMXの「第三の道」：肩の力を抜いたSPA

HTMXの「SPA否定ではなく簡略化」という原理は、SPAという「体験」そのものを否定するものではありません。むしろ、「あの素晴らしい体験を、これほど苦労せずに手に入れる方法がある」という提案です。

HTMXは、SPAを実現するために「全ページをJSで作り直す」必要はないと断言します。今ある普通のHTML。それを少しだけ拡張し、必要な部分だけをサーバーから取ってきて入れ替える。これだけで、ユーザーから見れば高級なJSフレームワークで作ったSPAと何ら変わらない、滑らかな体験が実現できます。

難攻不落の城（SPA）を、力技で攻め落とすのではなく、裏道からひょいと忍び込んで手に入れる。そんな「賢い簡略化」が、HTMXの真髄です。

実践：1行で「サイト全体をアプリ化」する

1. `hx-boost` という魔法の杖

HTMXの中で最もSPA化を象徴する属性が hx-boost です。

<!-- これだけで、この親要素の中にある全ての<a>タグと<form>がSPA化します -->
<body hx-boost="true">
    <nav>
        <a href="/home">ホーム</a>
        <a href="/search">検索</a>
    </nav>
    <main>
        <!-- ここだけが滑らかに切り替わる -->
    </main>
</body>

これだけで、ブラウザの「ページ全体のリロード」が完全に止まります。リンクをクリックすると、HTMXが裏でページを読み込み、bodyの内容だけをシュッと入れ替えてくれます。ブラウザのURLも正しく書き換わり、戻るボタンも普通に動きます。 開発者がやったことは、hx-boost="true" と書いただけです。

2. ローディング演出の追加

SPAにつきものの「読み込み中のバー」も、CSS数行で実現できます。

/* HTMXが通信中に自動で付与するクラスを利用 */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}

<div class="htmx-indicator">読み込み中...</div>

3. ステップ・バイ・ステップ解説

既存サイトからのスタート: まずは普通のWebサイトとして作ってください。これが最大の簡略化です。
ブーストの起動: hx-boost="true" を適当な親要素に書きます。これでベースラインとしてのSPA化が完了します。
部分の洗練: 特定のボタンで、もっと細かく特定の場所だけを変えたいときに、hx-target などを使って、SPA特有の「ヌルヌル動くパーツ」を追加していきます。

比較：フルSPA（React等） vs 簡略化SPA（HTMX）

フルSPA (Heavy-duty SPA)

コスト: 数週間の環境構築、専門知識が必要。
仕組み: ブラウザが全ての画面描画をゼロから担当。
課題: SEO（検索エンジン対策）が難しく、初期読み込みが非常に重い。

簡略化SPA (Simplified SPA / HTMX)

コスト: 数秒（属性を書くだけ）。
仕組み: サーバーが得意なHTML生成を担当し、ブラウザは「貼るだけ」。
利点: SEOは最初から完璧。初期読み込みは通常のHTMLと同等の速さ。

まとめ：初心者のための「賢いサボり方」

「高度なものを作るには、苦労しなければならない」という考えを、一度捨ててみてください。

SPAは「体験」の名前であって、「技術」の名前ではない: ユーザーは裏側でReactが動いているかHTMXが動いているかなど気にしません。滑らかであれば、それはSPAです。
標準を愛する: HTMLのリンクという、Webが30年かけて磨き上げてきた仕組みを捨てないでください。
小さく始める: サイト全体をいきなりSPAにする必要はありません。一つのページ、一つのボタンから、少しずつ滑らかにしていけばいいのです。

難しさに立ち向かうのではなく、難しさを回避して、目的（ユーザーの満足）に最速で到達する。これがHTMX流の、大人のSPA開発です。

これで第1章「コア思想」の前半から中盤にかけての重要な概念が揃いました。次の記事では、さらに踏み込んで、サーバーがどのようにアプリの導線を決定するかという「HATEOAS（011. Application Engineとしてのハイパーメディア）」の世界へ足を踏み入れましょう。