htmxを導入するには？
CDN / npm / ダウンロード

公開日：
最終更新日：

htmxは依存関係のないブラウザ向けライブラリなので、基本は<script>を1行追加するだけで使い始められます。 ここでは、用途に合わせて「CDN」「ダウンロード（自前配信）」「npm（バンドラー）」の3パターンを整理します。

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で有効化します。

使い方の共通ルール（最重要）

  1. まず、htmx本体（htmx.min.js）を読み込む
  2. 次に、使いたい拡張のJSを読み込む（拡張ごとに別ファイル）
  3. 最後に、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-ws

import '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ステータスコード別に差し替え先を切り替え

導入できたか確認する

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です。

このページの著者

もちもちみかん（システムエンジニア）

社内SEとしてグループ企業向けの業務アプリを要件定義〜運用まで一気通貫で担当しています。

経験：Webアプリ／業務システム

得意：PHP・JavaScript・MySQL・CSS

個人実績：フォーム生成基盤／クイズ学習プラットフォーム 等

詳しいプロフィールはこちら！　　もちもちみかんのプロフィール

もちもちみかん0系くん
TOPへ

もちもちみかん.comとは


このサイトでは、コーディングがめんどうくさい人向けのお助けツールとして、フォームやCSSをノーコードで生成できる、
　もちもちみかん.forms
　もちもちみかん.css1
　もちもちみかん.css2
と言ったジェネレーターを用意してます。

また、このサイトを通じて、「もちもちみかん」のかわいさを普及したいとかんがえてます！