HTMX入門【はじめからそうやって教えてくれればいいのに！】
はじめに
この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！
HTMXとは？
HTMX とは、一言で言うと、JavaScriptを書かずに動的なページを簡単に作成できるライブラリのことです。
htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript.
（訳）htmx は、JavaScript を使用するのではなく、HTML から最新のブラウザー機能に直接アクセスできるようにするライブラリです。
...と言っても、これだけだとよく分からないですよね。なので、実際に手を動かしながら学べるよう、解説していきます。
準備
まず、HTMX を動かす環境を準備します。
htmx-tutorial という名前のディレクトリを作成します。そして、そのディレクトリ内に index.html を作成します。
# ディレクトリ作成
mkdir htmx-tutorial
# ディレクトリ移動
cd htmx-tutorial
# 空のHTMLファイル作成
touch index.html
次に、VSCode で、先ほど作成した index.html を開きます。! と入力して、補完で HTML のひな形を作成します。
ひな形ができたら、以下のように <head> の中に <script> を追加します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 以下を追加 -->
+ <script src="https://unpkg.com/htmx.org@2.0.0"
+ integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw"
+ crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>
最後に、ローカルサーバーを簡単に立ち上げるための拡張機能である「Live Server」をインストールします。
👆のリンク先のインストールボタンからインストールしてください。
インストールできたら、実際にローカルサーバーを立ち上げてブラウザで確認してみましょう。VSCode の右下にある「Go Live」ボタンを押して、ブラウザで「localhost:5500」にアクセスしてみてください。真っ白な画面が表示されるはずです。
ここまで来たら、HTMX を動かす準備は完了です！
HTMXの基本
次に、HTMX の基本について解説していきます。
HTMX では、あらかじめ用意された独自の HTML 属性を使って、動的なページを作成します。上記のようなイメージです。
そして、主な HTML 属性は4つあります。
一つずつ、どのような属性なのか説明していきます。
hx-get
hx-get 属性は、指定した URL に GET リクエストを送信する属性です。
実際に使ってみましょう。
まず、index.html の <body> の中に「Profile」というタイトルと「Click Me」というボタンを追加します。コードは以下のようになります。
<body>
+ <h1>Profile</h1>
+ <button hx-get="profile.html">Click Me</button>
</body>
次に、profile.html ファイルを作成し、その中に自己紹介文を書きます。ずんだもんの場合は、こんな感じになります。
名前: ずんだもん
誕生日: 12/5
趣味: その辺をふらふらすること
書き終わったら、ブラウザでどのように表示されているか、確認してみましょう。
ボタンを押すと、「Click Me」という文字の代わりに、自己紹介文が表示されました。このように、hx-get 属性を使うと、値として設定してある profile.html に対して、GET リクエストを送信することができます。
ところで、ボタンをクリックした時、ボタンの外側ではなく、内側の文字が自己紹介文に変わりました。なぜでしょうか？
実は、これには hx-swap という属性が関係しています。次は、hx-swap について解説します。
hx-swap
hx-swap 属性は、サーバーから受け取ったコンテンツを対象の要素と、どのように交換するのかを指定する属性です。
例えば、さっきのボタンの挙動を振り返ってみましょう。
ボタンをクリックすると、ボタンの中の文字が「Click Me」から、自己紹介文に入れ替わりましたよね。これは、hx-swap の値が デフォルトで innerHTML に設定されているから です。つまり hx-getだけだと、要素の内側が入れ替わるという挙動になります。
では、innerHTML ではなく outerHTML を設定するとどうなるでしょうか？実際に試してみましょう。
以下のコードのように、hx-swap 属性を追加します。
- <button hx-get="profile.html">Click Me</button>
+ <button hx-get="profile.html" hx-swap="outerHTML">Click Me</button>
ブラウザで確認してみます。
ボタンをクリックしたら、ボタンそのものが自己紹介文に置き換わりましたね！
このように hx-swap 属性を使うと、サーバーから受け取ったHTMLを対象の要素とどのように交換するのかを設定することができます。
hx-target
hx-target 属性は、サーバーから受け取ったコンテンツを、ターゲットとして設定した場所に差し込むための属性です。
例えば、先ほどの hx-swap に outerHTML を設定しましたよね。その結果、以下の GIF 画像のように、クリックしたときにボタンが消えて、代わりに自己紹介文が表示されました。
これに対して、hx-target 属性を使うと、ボタンを残したまま、別の要素に変更を加えられます。
実際に試してみましょう！まず、index.html の <button> から hx-swap を削除し、代わりに hx-target を追加します。そして、値には #response を設定します。
- <button hx-get="profile.html" hx-swap="outerHTML">Click Me</button>
+ <button hx-get="profile.html" hx-target="#response">Click Me</button>
次に、<button> の後ろに <div> を追加して、id属性に「response」を設定します。<div> の中身は適当に「サンプル」とでも書いておきます。
<button hx-get="profile.html" hx-target="#response">Click Me</button>
+ <div id="response">サンプル</div>
どのような表示になるのか、ブラウザで確認してみましょう。
ボタンの下に、「サンプル」と表示されています。
「Click Me」を押すと、ボタンは残ったまま、「サンプル」という文字が消えて、代わりに自己紹介文が表示されました。
また、検証ツールで確認すると、<div> の中身が変更されたことがわかります。
このように hx-target 属性を使うと、ターゲットとして指定した場所に、サーバーから受け取ったコンテンツを差し込むことができます。
hx-trigger
hx-trigger 属性は、特定のイベントが発生した時にサーバーにリクエストを送信する属性です。
ここまでの例では、ボタンをクリックすることで GET リクエストが送信されてました。hx-trigger を使うと、クリックしたときではなく、例えば、ボタンをホバーしたときなどでもリクエストを送れるようになります。
実際に使ってみましょう。index.html の <button> に hx-trigger 属性を追加し、mouseover を設定します。
- <button hx-get="profile.html" hx-target="#response">Click Me</button>
+ <button hx-get="profile.html" hx-target="#response" hx-trigger="mouseover">Click Me</button>
どのような動きになるのか、ブラウザで確認してみましょう。
ボタンの上にマウスカーソルを重ねただけで、GET リクエストが送信されたのがわかります。
このように hx-trigger 属性を使うと、特定のイベントが発生したときに、サーバーにリクエストを送信できます。
今回は mouseover を紹介しましたが、他のイベントも使えます。試してみてください。
おわりに
この記事の他にも、「100秒で理解する」というシリーズを書いています。よかったら見てください！
Discussion