htmxを最短で導入！
CDN・npm・ダウンロードの手順と選び方まとめ
htmxは、<script>を1行追加するだけですぐ試せる、とても導入しやすいライブラリです。
このページでは、最短で始められるCDN、開発環境向けのnpm、自前で管理しやすいダウンロードの3パターンを、コピペですぐ使える手順でまとめています。用途に合った方法を選んで、htmxをすぐに試してみましょう！
目的別おすすめ導入方法
目的別に、おすすめの導入方法をまとめました！用途に応じてお選びください！
CDNで導入する（最速）
まず試したい場合は、公式が例に挙げているCDN（例：jsDelivr）を使うのが一番簡単です。 <head>内にscriptタグを追加すればOKです。
最小（minified）
<script
src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"
integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz"
crossorigin="anonymous"></script>デバッグ向け（unminified）
<script
src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.js"
integrity="sha384-ezjq8118wdwdRMj+nX4bevEi+cDLTbhLAeFF688VK8tPDGeLUe0WoY2MZtSla72F"
crossorigin="anonymous"></script>CDNは手軽ですが、運用方針によっては本番でCDNを使わない選択もあります（次の「ダウンロード」参照）。
ダウンロードして導入する（自前配信）
本番運用やポリシー上CDNを避けたい場合は、htmxのファイルをプロジェクトに同梱して配信します。 公式は「htmx.min.js をダウンロードしてプロジェクトにコピー」する方法を案内しています。
- htmxのファイル（例：
htmx.min.js）をダウンロードして、プロジェクトの静的ファイル置き場へ配置します。 - HTMLからそのパスを参照します。
<script src="/assets/js/htmx.min.js"></script>ポイントは「そのパスがブラウザから取得できる」ことです（静的配信設定が必要な環境では、ルーティング設定も確認してください）。
npmで導入する（バンドラー）
Webpack / Vite / Rollupなど、バンドラー中心で運用している場合はnpmで入れるのが楽です。
インストール
npm install htmx.org@2.0.8
ファイルは基本的に node_modules/htmx.org/dist/ 配下（htmx.js / htmx.min.js）を利用します。
importする（例）
import 'htmx.org';
グローバル変数 htmx を使いたい場合は、バンドルの設定や自前のJSでwindowに載せる方式もあります。
// 例：自前のJSでwindowに載せる
window.htmx = require('htmx.org');拡張（extensions）を導入する
htmxの拡張（extensions）は、コア機能に追加の振る舞いを足す仕組みです。
使い方は共通で、拡張のJSを読み込んでから、hx-extで有効化します。
使い方の共通ルール（最重要）
- まず、htmx本体（
htmx.min.js）を読み込む - 次に、使いたい拡張のJSを読み込む（拡張ごとに別ファイル）
- 最後に、
hx-extで拡張を有効化する（<body>に付けると全体に適用）
CDNで導入する（例：WebSocket拡張）
拡張ページのInstallingに載っているCDN例をそのまま使うのが最速です。 必ず本体 → 拡張の順で読み込みます。
<head>
<script
src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"
integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/htmx-ext-ws@2.0.4"
integrity="sha384-1RwI/nvUSrMRuNj7hX1+27J8XDdCoSLf0EjEyF69nacuWyiJYoQ/j39RT1mSnd2G"
crossorigin="anonymous"></script>
</head>
<body hx-ext="ws">
...
</body>
複数の拡張を使う場合は、hx-extにカンマ区切りで並べます。
<body hx-ext="ws, sse">
...
</body>ダウンロードして導入する（自前配信）
本番でCDNを避けたい場合は、拡張のJSをプロジェクトへコピーして自前配信します。
（例：CDNのURLから取得して /assets/js/ に配置）
<script src="/assets/js/htmx.min.js"></script>
<script src="/assets/js/htmx-ext-ws.js"></script>
<body hx-ext="ws">
...
</body>npmで導入する（バンドラー）
バンドラー運用なら、htmx本体と拡張をnpmで入れてimportするのが楽です。
npm install htmx.org@2.0.8
npm install htmx-ext-wsimport 'htmx.org';
import 'htmx-ext-ws';
拡張のファイル場所は基本的に node_modules/htmx-ext-*/dist/ 配下です（.min.jsもあります）。
どの要素に有効化する？（hx-extの置き場所）
- 全体に適用：
<body hx-ext="..."> - 一部だけ適用：任意の親要素に
hx-extを付ける（配下だけ有効） - 一部だけ無効化：
hx-ext="ignore:拡張名"でその拡張を止める
<div hx-ext="ws">
<!-- この中はws有効 -->
<button hx-get="/example">ws有効</button>
<button hx-get="/example" hx-ext="ignore:ws">このボタンだけws無効</button>
</div>よく使う拡張（例）
- ws：WebSocket対応（双方向通信）
- sse：Server-Sent Events対応（サーバープッシュ）
- head-support：レスポンス内の
<head>要素のマージ対応 - response-targets：HTTPステータスコード別に差し替え先を切り替え
本体/代表的な拡張のダウンロード
htmx本体（ダウンロード）
必要なファイルをダウンロードして、プロジェクト内（例：/assets/js/）へ配置します。
リンク先で「名前を付けて保存」すればOKです。
拡張機能（extensions：ダウンロード）
拡張も同様にダウンロードして配置し、htmx本体の後に読み込みます。
-
WebSocket（ws）
ws.min.js（圧縮版 / v2.0.4） / ws.js（非圧縮版 / v2.0.4） -
Server-Sent Events（sse）
sse.min.js（圧縮版 / v2.2.4） / sse.js（非圧縮版 / v2.2.4） -
response-targets
response-targets.min.js
読み込み例（自前配信）
<!-- 本体 -->
<script src="/assets/js/htmx.min.js"></script>
<!-- 拡張（必要なものだけ） -->
<script src="/assets/js/ws.min.js"></script>
<script src="/assets/js/sse.min.js"></script>
<!-- 有効化（全体に適用する例） -->
<body hx-ext="ws, sse">
...
</body>導入できたか確認する
1) DevToolsで存在確認
ブラウザのDevToolsコンソールで window.htmx を確認し、オブジェクトが出れば読み込みOKです。
2) 最小サンプルで動作確認
以下は「ボタンを押したらGETして、結果を#resultに差し込む」最小例です。
<button hx-get="/hello" hx-target="#result">
挨拶を読み込む
</button>
<div id="result">ここに結果が入ります</div>
サーバー側は /hello に対して、差し込みたいHTML断片（例：<p>Hello!</p>）を返すだけでOKです。
早速試してみよう！
ここでは、htmxを導入したあとにすぐ試しやすい4つのレシピと、定番1つを紹介します。 「htmxとは？」をまだ読んでいない方は、htmxでできることやメリット、設計思想を紹介しているので、こちらもぜひ読んでみてください！
参考リンク
このサイトの運営者
もちもちみかん（社内SE）
運営者は、グループ企業向けの業務アプリを要件定義から運用まで担当している社内SEです。PHP・JavaScript・MySQL・CSSを使った実務経験をもとに、一次情報や実際の運用で得た気づきを整理しています。
AIにコードを書かせて終わりではなく、どこで迷ったか・どこを人がレビューすべきかまで含めて、 やさしく噛みくだいてまとめています。
経験：Webアプリ・業務システム
得意：PHP・JavaScript・MySQL・CSS
制作・運用中：フォーム生成基盤・クイズ学習プラットフォーム・htmx逆引きレシピ 等
AI時代のエンジニアタイプ診断：CSPF/とろとろみかん
詳しいプロフィールはこちら！ もちもちみかんのプロフィール
