サクッとわかるITトレンドでご紹介した「htmx（Hotwire）」。興味ある！という方も多かったのではないでしょうか。そこで、今回から2回にわたってhtmxをさらに深掘り。まずは、htmxでHTTPリクエストはどのように指定するのか、書き方だけでなく基礎知識もあわせて解説します。
Hotwire（HTML Over The Wire）と呼ばれる、JavaScriptのプログラムを書くことなくAjaxのような動作を実現する技術があります。このHotwireの動作を手軽に実現できるのが【htmxというライブラリ】です。HTMLファイルの中で読み込むだけで簡単に動きのあるウェブサイトを作ることができます。
▼htmxの詳しい解説はこちらから
htmxでのHTTPリクエストはどう指定する？
HTTPリクエストは利用者がリンクをクリックしたり、アドレスバーにURLを入力したりすることで発生します。htmxでは、このような利用者の操作を待つのではなく、定期的にHTTPリクエストを送信してサーバー側の状態を取得するポーリングという方法を使うこともできます。
以下のように指定すると、/newsというURLに対して2秒ごとにポーリングし、レスポンスをdivタグに読み込みます。
<div hx-get="/news" hx-trigger="every2s"></div>このhtmxによるポーリングをサーバー側で止めたいときには、サーバーからのレスポンスにおいて、ステータスコードとして「286」を返します。それを受け取った要素はポーリングをキャンセルします。
「読み込み中」を表示したいとき
一般的なWebページでは、リンクをクリックしてページを遷移するとページ全体が切り替わるので、ページが書き換わっている状況を利用者が把握できます。しかし、ページ内の要素を書き換える場合には、その進捗状況を利用者が把握するのは難しいものです。
そこで、処理中であることを示すアニメーションを使うことがあります。このようなとき、htmxではhtmx-indicatorというクラスを使うことで表示・非表示を切り替えられます。
このクラスは、デフォルトでは不透明度が0に設定されており、初期状態では目に見えません。htmxがHTTPリクエストを発行すると、htmx-requestというクラスが自動的に追加されます。このクラスが指定された要素は、htmx-indicatorクラスが設定された子要素の不透明度を1に変更し、アニメーションを表示できます。処理が終了すると、htmx-requestが外れて、自動的に非表示になります。
たとえば、以下のように指定すると、ボタンがクリックされる前は何も画像は表示されていませんが、ボタンがクリックされると「spinner.webp」という画像が表示されます。
<button hx-get="/search">
処理に時間がかかるボタン
<img class="htmx-indicator" src="/spinner.webp">
</button>
そして、/searchを読み込んで置き換える処理が完了すると、画像は表示されなくなります。
「進捗バー」を表示したいとき
アニメーションを表示するだけでなく、⻑い時間がかかるような処理の最中には、その進捗状況を表示すると親切です。進捗状況としてパーセントを表示し、100%になると終了するような「進捗バー」を表示することを考えます。
このような表示は、htmxのロードポーリングという方法で実現できます。これは、Webサーバーからの応答を受けて、自身の要素を少しずつ置き換える方法です。
以下のように書くと、サーバー側に対して処理状況を1秒ごとにポーリングして、その結果で要素の中身を置き換えられます。
<div hx-get="/status"
hx-trigger="load delay:1s"
hx-swap="outerHTML">
</div>
非同期通信に欠かせないHTTPの基礎知識
ここまでhtmxでのHTTPリクエストの指定方法について解説してきましたが、「HTTPってどんな仕組みだっけ？」と疑問が出てきた方もいるかもしれません。ここからはhtmxを使いこなすために知っておきたいHTTPの基礎知識を解説します。「基本は知っている」という方も学び直してみると新たな発見があるかもしれません。
また、htmxの書き方を知っていればコードを動かすことはできますが、「なぜそういう指定になるのか」を理解するにはHTTPの基礎知識も知っておく必要があります。基礎から理解しておくことで、エラーが出たときの原因をスムーズに調べられたり、新しい技術への応用もしやすくなります。それでは見ていきましょう。
Q. HTTPって何？
A. Webページの表示やファイルのダウンロードなどに使われるプロトコル＊のこと
Web技術が変化するとともに、HTTPに新たな機能が追加され、HTTP/1.0、HTTP/1.1とバージョンアップしてきました。現在ではHTTP/2やHTTP/3というバージョンも登場しており、さまざまな高度な機能を使えるようになっています。
＊プロトコル：コンピューター同士が通信を行うための規格（ルール）のこと。
Q. Webサイトはどんな仕組みで閲覧できている？
A. WebブラウザからWebサーバーに対してHTTPリクエストを送信し、HTTPレスポンスが返ってくることで閲覧できている。
▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.49より引用
Q. HTTPリクエストでは何が送信されている？
A. HTTPリクエストを送信するときは、DNSサーバーに問い合わせて、URLに含まれるサーバーのホスト名からIPアドレスに変換します。そして、取得したIPアドレスとWebサーバーのポート番号を使って、WebブラウザがWebサーバーにHTTPリクエストを送信します。
HTTPリクエストは、以下のような3つの要素で構成されています。それぞれの意味を簡単に確認しましょう。
＊Microsoft Edgeでは「開発者ツール」の「ネットワーク」タブ、Google Chromeでは「Chromeデベロッパーツール」の「ネットワーク」タブ、Safariでは「Webインスペクタ」の「ネットワーク」タブで確認できます。
▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.51より引用
■リクエストライン
リクエストラインでは、何をどのように要求するのかを指定します。このときに使われるのがリクエストメソッドで、以下の表のようなものがあります。
▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.52より引用
こちらの記事で紹介したhtmxの記述では、「hx-get」という属性を使いました。これはHTTPのGETリクエストを送信するものです。上の表で解説したものの一部は、htmxの属性として下の表のように指定することで同等の処理を実現できます。
▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.52より引用
■リクエストヘッダー
リクエストヘッダーは1行に「名前: 値」という形式で、以下のような項目が送信されます。
▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.53より引用
■リクエストボディ
GETリクエストのようにデータを送らないリクエストでは、リクエストボディが省略される場合がありますが、POSTやPUTリクエストではリクエストボディを使ってデータを送信します。
Q. HTTPレスポンスでは何が返ってくる？
A. Webブラウザから送信されるHTTPリクエストに対し、Webサーバーからはその要求内容に応じたHTTPレスポンスをWebブラウザ側には返します。
HTTPレスポンスもHTTPリクエストと同様に、下図のような3つの要素で構成されています。それぞれの意味を簡単に確認しましょう。
▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.54より引用
■ステータスライン
ステータスラインは1行で、その応答の概要が書かれています。先頭にはHTTPのバージョン、そのあとには3桁のステータスコードと成否が書かれています。
ステータスコードは百の位で大きく5つに分類でき、代表的な処理の成否を確認できます。以下のように、百の位を見るとおおまかに結果がわかります。
▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.55より引用
■レスポンスヘッダー
レスポンスヘッダーはレスポンスの概要や、リクエストで要求された情報への応答が書かれています。具体的には、以下のようなものがあります。
▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.56より引用
■レスポンスボディ
レスポンスボディはリクエストに対する実際のレスポンスで、一般的なWebページではHTMLの内容が書かれています。画像であればその画像のデータ、CSSであればCSSの内容が返されます。
Webブラウザは、ここに記載されている内容をもとに、Webブラウザの画面に表示します。画像データのようなバイナリデータでは、人が見てもその中身がよくわかりませんが、レスポンスヘッダーのContent-Typeを見て適切に取り扱っています。
・・・
いかがでしたか。基礎的な知識を押さえながら、htmxのような便利な書き方を活用していきたいですね。次回はDOMについてもhtmxでの操作方法を見ていきます。
＊本稿は増井敏克『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』を再編集したものです。
増井技術士事務所代表。技術士（情報工学部門）。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかり プログラミングのしくみ』『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』（翔泳社）、最新刊の『データ分析に強くなるSQLレシピ 小規模データの前処理・分析の書き方＆テクニック』（インプレス）がある。
※本稿に記載されている情報は2024年5月時点のものです。
