030. hx-boost（既存のサイトを一行で「爆速化」させる魔法）

原理：Webの「伝統」を「最新」へ導く一押し

ブラウザの「不器用」をフォローする

私たちが長年親しんできた「リンクをクリックして別のページへ移動する」という動作。実はブラウザはこの時、とても「不器用」な動きをしています。 - ページを一度真っ白にする（一瞬のチラつき）。 - ヘッダー、メニュー、フッター、アイコン画像……。前のページと同じものがたくさんあるのに、全部捨てて、またゼロから読み込み直す。 - スクロール位置も、入力しかけた文字も、読み込み中のアニメーションも、すべてリセット。

この「無駄とストレス」を一掃し、従来のWebサイトをまるで最新のスマホアプリ（SPA：シングルページアプリケーション）のような滑らかな体験に変えてくれる、HTMXで最も「手軽で強力」な属性。それが hx-boost です。

AJAXへの自動変換機能

hx-boost="true" と書かれた要素の内側にあるすべてのリンク（<a>）とフォーム（<form>）を、HTMXは「最新仕様」にアップデートします。 1. リンクがクリックされた時、ページ遷移を「中止」する。 2. 代わりに裏側でAJAX通信を飛ばし、新しいページの中身（<body>）を取得する。 3. 今の画面の内容を、取得した新しい内容にサッと書き換える。 4. URL（アドレスバー）も、履歴も、正しく書き換える。

驚くべきは、「これまでのサイトのコードをほとんど書き換える必要がない」という点です。

実践：たった一行で体験を別物にする

1. サイト全体のSPA化

<body> タグに hx-boost を書くだけで、サイト内の全リンクが滑らかになります。

<!-- これだけで、このページ内のリンククリックがすべて
     「チラつかない部分更新」にパワーアップします -->
<body hx-boost="true">

    <nav>
        <a href="/">トップ</a>
        <a href="/about">当サイトについて</a>
        <a href="/contact">お問い合わせ</a>
    </nav>

    <main>
        <h3>ようこそ！</h3>
        <p>リンクをクリックしても、画面が白くならずに内容だけが切り替わります。</p>
    </main>

</body>

2. 特定のエリアだけをブーストする

サイドメニュー部分だけを高速化したい、といった使い分けも可能です。

<div hx-boost="true">
    <!-- この中のリンクだけがHTMX化される -->
    <a href="/section1">セクション1</a>
    <a href="/section2">セクション2</a>
</div>

<!-- ここは通常の（重たい）リンクのまま -->
<a href="/external">外部サイトへ</a>

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

設置: 高速化したい範囲を包む要素に hx-boost="true" を書きます。
プログレッシブ・エンハンスメント: もしユーザーがHTMX（JS）を無効にしていても、この属性は無視されて「普通のリンク」として動作し続けます。壊れる心配がない、非常に安全な改善手法です。
サーバー側の対応（任意）: サーバーが「ページ全体（フルHTML）」を返しても正しく動きますが、HTMXからのリクエスト（ヘッダーで判別可能）の時だけ、<body> の中身だけを返すようにすると、通信量が激減してさらに爆速になります。

比較：手動AJAX vs hx-boost

手動でリンクをAJAX化する

document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', async (e) => {
        e.preventDefault();
        const html = await fetch(link.href).then(r => r.text());
        document.body.innerHTML = html;
        window.history.pushState(null, '', link.href);
    });
});

全てのリンクに対して処理を書き、さらに履歴管理（戻るボタン対策）まで自分で実装しなければならず、非常にバグが起きやすい領域です。

HTMXの hx-boost

<div hx-boost="true">

この一行で、履歴管理、URL変更、スクロール位置の処理……といった「SPAとしての作法」を、HTMXが完璧に、かつ標準に準拠して実行してくれます。

まとめ：初心者のための「加速」の魔法

hx-boost は、Web開発の歴史と、未来の体験を繋ぐ架け橋です。

まずはこれから: HTMXを導入して最初に試すべきは、恐らくこれです。自分のサイトが急にサクサク動き出す感動を味わってください。
既存資産を活かす: サーバー側のプログラムを「API」に作り変える必要はありません。「普通のHTMLを作るプログラム」のままで、アプリのような体験が作れます。
心地よさを追求する: 画面全体を書き換えるため、共通のヘッダーなどは変わりませんが、メインエリアがチラつかずに変わるだけで、ユーザーの「ストレス」は劇的に減少します。

今あるものを、捨てずに磨く。hx-boost という魔法の一押しで、あなたのWebサイトに新しい命を吹き込んでください。第2章の核心を抜けた次は、ユーザーの操作を優しくガードする「hx-confirm」（031. hx-confirm）から始まる、UX（ユーザー体験）制御の世界へと旅を進めましょう。