HTMX初心者チュートリアル: HTMXを使ってエントリーを削除する

By /

はじめに

このアーティクルでは、HTMXの世界に飛び込み、主要な機能の1つであるリストからのエントリー削除の実装方法を学びます。HTMXとは「HTML Extensions」の略で、ヘビーなJavaScriptフレームワークを必要とせずに、動的でレスポンシブなWebアプリケーションを作成することができる強力なライブラリです。HTMXを活用することで、ページ全体を更新することなく、スムーズで効率的なユーザー体験を提供することができます。

前回のHTMXチュートリアルでは、HTMXを使ってリストに新しい本を追加する方法を取り上げました。今回は、そのリストから本を削除する方法を探ります。コア機能に焦点を当て、複雑なJavaScriptロジックを避けながら進めていきます。

YouTubeでこのビデオを視聴する

リストから本を削除する

本をリストから削除するには、サーバーに削除リクエストを送信して本をデータから削除する必要があります。HTMXには、この目的のために便利なhx-delete属性が用意されています。このattr ibuteをボタンやリンクなどのHTMLエレメントに適用すると、ユーザーがそのエレメントを操作したときにHTMXが自動的に削除リクエストをトリガーします。

リストから本を削除するための主な手順は以下の通りです:

  • hx-delete属性を使って削除リクエストをトリガーする
  • 削除リクエストのURLには削除対象の本のIDを含める

これを実現するには、本リストアイテムのHTMLテンプレートを更新する必要があります。単純なボタンやリンクではなく、削除対象の本のIDをパラメーターとして渡す削除ルートを指すhx-delete属性を追加します。

<li>
  {{ book.title }} - {{ book.author }}
  <a href="#" hx-delete="/books/{{ book.id }}">削除</a>
</li>

ユーザーが「削除」リンクをクリックすると、HTMXが自動的にサーバーに削除リクエストを送信し、本のIDをURLパラメーターとして渡します。

サーバー側で削除リクエストを処理する

サーバー側では、削除リクエストを処理できるようなルートハンドラーを作成する必要があります。Express.jsアプリケーションでは、app.jsファイルに新しいルートを追加します:

app.delete('/books/:id', (req, res) => {
  const bookId = req.params.id;
  
  // 本データから対象の本を見つけて削除する
  const bookIndex = books.findIndex(book => book.id === bookId);
  if (bookIndex !== -1) {
    books.splice(bookIndex, 1);
  }

  // HTMXに空のレスポンスを返す
  res.sendStatus(204);
});

このルートハンドラーでは、まずルートパラメーターから本のIDを抽出します。次に、この IDを使ってbooks配列から対応する本を見つけ、削除します。最後に、操作が成功したことを示す204 (No Content) ステータスコードを含む空のレスポンスをHTMXに返します。

HTMXがこのレスポンスを受け取ると、対応する本リストアイテムをDOMから自動的に削除し、スムーズで効率的なユーザー体験を提供します。

まとめ

このアーティクルでは、HTMX駆動Webアプリケーションに削除機能を実装する方法を学びました。hx-delete属性とサーバー側の専用削除ルートを使うことで、ユーザーに滑らかで反応の良い削除体験を提供することができました。

HTMXの宣言的なDOMアップデートとサーバー側インタラクションの処理により、開発プロセスが簡素化され、コードベースをクリーンに保つことができます。HTMXを活用することで、複雑なJavaScriptロジックに没頭することなく、アプリケーションのコア機能に集中できます。

HTMXの探索を続けていくうちに、モダンで動的なWebアプリケーションを簡単に構築できることがわかるでしょう。今後もHTMXに関するチュートリアルをお楽しみください。

主なポイント:

  • hx-delete属性を使ってクライアントから削除リクエストをトリガーする
  • 削除リクエストのURLには削除対象の本のIDを含める
  • サーバー側に削除リクエストを処理するためのルートハンドラーを作成する
  • ルートパラメーターから本のIDを抽出し、それを使ってデータから本を削除する
  • HTMXに空のレスポンスを返して、ブラウザ上からその本を削除する
上部へスクロール