013. JSフレームワーク代替思想（JS Framework Alternative Philosophy）

原理：ReactやVueは「本当に」必要か？

Web業界を支配する「魔法の呪い」

現在のWeb開発において、一つの巨大な「常識」があります。それは、「まともなWebアプリを作るなら、ReactやVue、Angularといった巨大なJSフレームワークを使うのが当たり前だ」というものです。多くの初心者は、HTMLとCSSを学んだ直後、この巨大な壁に突き当たります。「ボタンをクリックして画面を変えるだけで、なぜこんなに難しい呪文（JSX、Hooks、仮想DOM、コンポーネント指向……）を学ばなければならないの？」と。

実は、この「常識」こそが、Web開発を不必要に難しくしている最大の原因かもしれません。 JSフレームワークは非常に高度で強力ですが、そこには「ブラウザ側で全てを管理する」という複雑な設計思想が潜んでいます。しかし、多くの一般的なWebサービス（ブログ、ECサイト、管理画面、SNS）にとって、その高度な機能の8割は「宝の持ち腐れ」であり、むしろ「足枷」になっていることすらあるのです。

HTMXによる「脱・フレームワーク」宣言

HTMXの「JSフレームワーク代替思想」は、ReactやVueを否定するものではありません。そうではなく、「それらが必要な場面は、あなたが思っているよりもずっと少ないはずだ」という問いかけです。

「画面の一部を更新したい」「入力に応じてバリデーションをしたい」「スクロールしたら次の読み込みをしたい」。これらはすべて、JSフレームワークという「大掛かりな重機」を持ち出さなくても、「HTMLの拡張」という「スコップ」一本で解決できるのです。

フレームワークを使わない、ということは、「退化」ではありません。むしろ、Webの標準技術（HTML/HTTP）を使いこなしてシンプルさを取り戻す、高度な「進化」なのです。

実践：フレームワークの「便利機能」をHTMLで再現する

1. コンポーネント指向の代わり（サーバー側テンプレート）

Reactなどでよく言われる「部品（コンポーネント）の共有」は、サーバー側のテンプレート分割で十分対応できます。

<!-- Python/Flaskなどのテンプレート 1 (components/user_card.html) -->
<div class="card">
    <h3>{{ user.name }}</h3>
    <button hx-delete="/user/{{ user.id }}">削除</button>
</div>

<!-- 使うとき -->
{% include "components/user_card.html" %}

2. 状態（State）による描画の切り替えの代わり

「もし読み込み中ならローディングを出し、そうでなければ中身を出す」という制御も、属性だけで完結します。

<button hx-get="/api/data" hx-indicator="#loading">
    データ取得
</button>
<div id="loading" class="htmx-indicator">読み込み中...</div>
<!-- 取得後、ここに中身が勝手に上書きされる -->

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

「JSでどう書くか」を忘れる: プログラミングの構文を考える前に、「どのHTML属性を使えばサーバーと通信できるか」を考えます。
サーバーサイドを強化する: JSのスキルを磨く代わりに、サーバー側のテンプレートを綺麗に分割する方法を学びます。
ミニマリズムを貫く: 本当に「ブラウザ側で複雑な計算」が必要な数パーセントの機能以外は、すべてHTMXに任せます。

比較：JSフレームワーク vs HTMX（ミニマリストの選択）

JSフレームワーク（React等）

学習コスト: 極めて高い（半年〜1年以上の習熟が必要）。
メンテナンス: ライブラリの更新が速く、数年でコードが動かなくなることも。
初期性能: 巨大なJSの解析が必要なため、表示がワンテンポ遅れがち。

HTMX (The Extended HTML Way)

学習コスト: 極めて低い（HTMLが分かれば1日で習熟可能）。
メンテナンス: 30年間変わらない「HTML」に基づいているため、非常に長持ちする。
初期性能: HTMLをそのまま表示するため、インターネットの限界速度で動く。

まとめ：初心者のための「本来の自信」

「流行りのフレームワークを使っていないから、自分は未熟だ」と思う必要はありません。逆に、「HTMLだけでここまで素晴らしいものを作れる」という誇りを持ってください。

道具に踊らされない: Reactは「目的」ではなく「道具」の一つに過ぎません。もっと手軽で強力な道具（HTMX）があるなら、それを選んでも良いのです。
本質を学ぶ: フレームワーク特有の書き方を覚えるよりも、Webの標準（HTTPメソッドやステータスコード）を覚える方が、一生モノのスキルになります。
勇気を持つ: 「うちはフレームワークなしでHTMXで行きます」と言うには少しの勇気がいりますが、その結果もたらされるシンプルさと速度は、きっとあなたを救ってくれます。

「あえて使わない」という美学。JSフレームワークという強力な魔法に頼らずとも、Webはもっと自由で輝ける。この思想を理解すれば、あなたの開発スタイルはより本質的で、力強いものになるでしょう。次の記事では、通信という「見えない糸」を使ってどのようにユーザー体験を操るか（014. UXをHTTPで制御）を学んでいきます。