007. Progressive Enhancement（段階的な強化）

原理：誰一人取り残さない「強靭な」Web設計

「モダン」の影に隠れた脆さ

現代のWeb開発の主流は、「ブラウザでリッチなJavaScript（JS）がバリバリ動くこと」を前提にしています。しかし、この前提は実はとても「脆い（もろい）」ものです。通信環境の悪い場所、古いスペックのスマートフォン、あるいは何らかの理由でJSの読み込みに失敗した瞬間、多くのモダンなサイトは「真っ白な画面」になり、何もできなくなってしまいます。これは「ゼロか百か」という極端な設計です。

「引き算」ではなく「足し算」で考える

「Progressive Enhancement（段階的な強化）」とは、この脆さを解決するための設計思想です。その考え方は非常にシンプルです。 1. まず、基本を完璧にする（土台）: JSが全くなくても、リンクをクリックすれば移動でき、フォームを送れば保存できる。HTMLだけで成立するサイトをまず作ります。 2. その上に、体験を上乗せする（強化）: JS（HTMX）が使える環境であれば、同じ操作を「画面の書き換えなしで」「もっと高速に」実行できるように、機能を「強化」します。

この思想に基づくと、もし電車の中のトンネルで通信が途切れ、HTMXの読み込みに失敗したとしても、ユーザーは「少し速度は落ちるけれど、普通にページ遷移して使い続ける」ことができます。これが「強靭なWebアプリ」です。

HTMXは、この設計思想を最も簡単に、美しく実現できるツールです。なぜなら、HTMXはHTMLを「否定」するのではなく、HTMLを「ブースト（加速）」させるための存在だからです。

実践：通常の遷移をHTMXで強化する

1. 「普通のaタグ」を「爆速リンク」に変える

もっとも簡単な強化は hx-boost です。

<!-- 普通の書き方：これだけでJSなしでも動く（土台） -->
<nav hx-boost="true">
  <a href="/home">ホーム</a>
  <a href="/profile">プロフィール</a>
  <a href="/settings">設定</a>
</nav>

何が起きるか？ - JSがない場合: 普通のリンクとして機能し、画面全体がリロードしてページが切り替わります（100点）。 - HTMXがある場合: 自動的に通信を奪い取り、画面の中身（body内）だけを滑らかに入れ替えます。リロードなしのSPA体験になります（120点）。

2. フォーム送信の強化

保存ボタンなどのフォームも、同様に強化できます。

<!-- 通常のform送信としても動作する（アクション先が定義されている） -->
<form action="/save-task" method="POST"
      hx-post="/save-task" hx-target="#task-list" hx-swap="beforeend">
    <input type="text" name="task" required>
    <button type="submit">タスク追加</button>
</form>

<div id="task-list">
    <!-- 既存のタスク一覧 -->
</div>

何が起きるか？ - 強化前: ボタンを押すと /save-task へ飛び、ページ全体がリロードされます。 - 強化後: HTMXが送信を肩代わりし、リストの末尾に新しいタスクを追加するだけで終わります。ユーザーは入力欄のフォーカスを失わずに済みます。

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

HTML標準に準拠: action 属性や href 属性を正しく書き、HTMXなしでも動作することを確認します。
HTMX属性を付与: 同じURLを hx-post や hx-get にも書き、hx-target で「強化された時に書き換えたい場所」を指定します。
サーバー側の配慮: サーバー側で「もしHTMXからのリクエストならパーツ（HTML断片）だけを返し、そうでなければフルページを返す」という設定をします。

比較：JS依存のSPA vs HTMXによる段階的強化

従来のSPA（React/Vueなど）

動作条件: JSライブラリの読み込み、解析、実行がすべて完了すること。
失敗時: 何も見えない、何も押せない。
開発難易度: 「JSがない場合の挙動」を無視（またはSSRという複雑な技術で解決）せざるを得ません。

HTMXの強化モデル

動作条件: ブラウザがHTMLを表示できること（ほぼ100%可能）。
失敗時: 普通のWebサイトとして動作する（全ページが白くなることはない）。
開発難易度: 普段通りHTMLを書き、そこに数文字付け足すだけ。自然体で「最高品質のWeb」に到達できます。

まとめ：初心者のための「優しさ」の設計

「段階的な強化」を意識することは、あなたのサイトを訪れるすべてのユーザーへの「優しさ」でもあります。

土台を愛する: HTMLだけでも十分に価値があるものを作りましょう。
魔法はスパイス: HTMXはあくまで快適にするためのスパイスです。料理（HTML）そのものが美味しいことが大前提です。
最悪の事態に備える: 「もし自分のJSが動かなかったら？」と時々考えてみることが、一流の開発者への第一歩です。

誰一人取り残さない、強靭で優しいWeb。HTMXを使えば、その理想は驚くほど簡単に現実のものとなります。次の記事では、この思想を支えるインフラとしての「クライアントの薄型化」（008. クライアントの薄型化）という技術的メリットに迫ります。