はじめに
HTMX (HTML Extension) は、複雑なJavaScriptフレームワークを必要とせずに、動的なWebアプリケーションを作成することができる強力なライブラリです。このarticle では、HTMXを使ってGETリクエストを処理し、Webページにデータを表示する方法を探っていきます。
GETリクエストを起動するボタンを追加する
この動画は、ホームページにボタンを作成し、クリックするとサーバーにGETリクエストを送信して書籍のリストを取得する、という目的について説明しています。発表者は、ボタン要素にhx-get属性を追加する方法を示しています。これにより、HTMXがGETリクエストを処理できるようになり、追加のJavaScriptは不要です。hx-get属性は/booksというURLに設定されており、サーバーがこのリクエストを処理します。
サーバー側でGETリクエストを処理する
続いて、/booksというGETリクエストを処理するサーバーサイドのルートを設定する方法が示されています。Expressアプリケーションに新しいルートを追加し、/booksへのGETリクエストを受け付け、HTMLテンプレートを使ってレスポンスを送信します。HTMLテンプレートはviewsフォルダのlist.jsファイルで定義されており、これによりapp.jsファイルがスッキリとし、テンプレートも再利用しやすくなります。
書籍リストのテンプレートを作成する
発表者は、list.jsファイルに、書籍リストのためのHTMLテンプレートを生成する関数が含まれていると説明しています。このテンプレートはbooksデータ配列を使ってUnordered List (<ul>)を生成し、各書籍のタイトルと著者名を<li>要素に表示します。テンプレートをより再利用しやすくするために、個別の書籍用のテンプレートはbook.jsファイルで定義されています。
ページに書籍リストを挿入する
クライアントが「書籍を表示」ボタンをクリックすると、GETリクエストがサーバーに送信され、サーバーは書籍リストのHTMLテンプレートを返します。HTMXはこのレスポンスを受け取り、book-list divにHTMLを挿入します。現時点では、書籍リストがボタンの中に直接表示される実装になっていますが、次回のレッスンではリストを適切な場所に配置する方法について説明されます。
まとめ
HTMXを使えば、複雑なJavaScriptなしで動的なWebアプリケーションを作成できます。hx-get属性を使うことで、GETリクエストを簡単に処理し、その結果をWebページに表示することができます。このarticleでは、サーバー側でGETリクエストを処理する方法、書籍リストの再利用可能なHTMLテンプレートを作成する方法、HTMXを使ってレスポンスをページに挿入する方法を学びました。
ポイント:
- HTMXを使えば、複雑なJavaScriptなしで動的なWebアプリケーションが作れる
hx-get属性を使ってボタンクリックでGETリクエストを起動できる- サーバー側のルートがGETリクエストを処理し、HTMLテンプレートを応答として返す
- HTMLテンプレートは別ファイルで定義し、メインコードをスッキリさせる
- HTMXがサーバー応答を受け取り、HTMLをページに挿入する