2025/06/30
htmxを試してみた
HTMXとは
以下AIの回答です。
HTMXは、HTML属性を使ってWebページに動的な動作を簡単に追加できるJavaScriptライブラリです。主な特徴は以下の通りです。
サーバーとの通信（GET, POST, PUT, DELETEなど）をHTML属性だけで実現できる
ページ全体をリロードせず、一部だけを動的に更新できる
JavaScriptの記述を最小限に抑え、HTML中心の開発が可能
他のフレームワークやライブラリと組み合わせて利用できる
例えば、ボタンにhx-get="/profile"と書くだけで、そのボタンをクリックしたときに/profileから取得したHTMLで指定エリアを更新できます。
HTMXは「HTMLを拡張して、よりインタラクティブなWebアプリを簡単に作る」ためのツールです。
実際の挙動を試してみる
文字だけを見てもよく分からないので実際に動かしてみましょう。
環境の構築
今回は簡易的にViteを使用して環境を作ります。
# Viteプロジェクトの作成
bun create vite htmx-test
# プロジェクトフォルダに移動
cd htmx-test
# インストール
bun install -D
bun install htmx.org@2.0.6
# サーバーを起動
bun run devこの時点で「http://localhost:5173/」で内容を確認できると思います。
一旦HTMXを書いてみる
サンプルをみて実装し、挙動を確認してみます。
もともとのmain.tsを変更します。
import './style.css'
import 'htmx.org'; // htmxをインポート
// もともとあったコードは削除します。index.htmlにHTMX用にbuttonを追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div id="app">
<button hx-get="/profile.html" hx-target="#profile" hx-swap="innerHTML">プロフィールを取得</button>
<div id="profile"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>取得先のprofile.htmlを追加します。
テストプロフィールここでサイトを開いてボタンを押してみましょう！
#profile内に「テストプロフィール」を表示されました。
次にボタンの機能を詳しく見てみます。
HTMXの機能
hx-get
上記の例だとprofile.htmlのコンテンツをGETする機能です。
この機能でいちいちajaxなどで取得するコードを書かなくて済みます。
hx-target
hx-getで取得したコンテンツをどこに入れるかを指定します。
hx-swap
データの挿入方法を指定します。
innerHTMLやouterHTMLなどがあります。
その他指定できる値はドキュメントをご覧ください。
https://htmx.org/attributes/hx-swap/
まとめ
簡単にですがHTMXを試してみました。
まだ使いどころが分かりませんが、簡単にAjaxのような機能を実装できるのはすごいと思いました。