はじめに
この記事では、HTMXを使ってシングルページアプリケーション(SPA)にフォームを追加し、ページ全体の更新なしでフォーム送信を行う方法を紹介します。HTMXには、Webアプリケーションに動的な振る舞いを簡単に組み込めるさまざまな属性があり、今回はその中でも「hx-boost」機能に着目して解説します。
ホームページにフォームを追加する
まず、インデックスビューにフォーム要素を追加します。記事名の入力欄とタイトルの入力欄(必須)を設置し、`hx-post`属性でPOST要求を`/articles`ルートに送信するよう設定。`hx-target`属性で、新しい記事リストが反映されるよう指定します。
サーバー側では、POST要求を処理するためのルートハンドラーを追加します。リクエストボディから記事データを取得し、ユニークなIDを持つ新しい記事オブジェクトを作成して`Articles`配列に追加します。
更新された記事リストをレンダリングする
新しい記事が`Articles`配列に追加されると、`partials/list.view`テンプレートがレンダリングされ、HTMXリクエストの応答として返されます。更新された記事リストが現在のリストと置き換わり、UI上に新しい記事が表示されます。
講師は、HTMXが標準のフォーム動作を”ブースト”していることを説明します。`method`と`action`属性を使う代わりに、`hx-post`と`hx-target`属性を使うことで、ページ全体の更新なしにフォーム送信とページ更新を行えるのです。
`hx-push-url`でURLの変更を防ぐ
講師は、HTMXがフォーム送信時にアドレスバーのURLも更新し、ブラウザの履歴に追加することを指摘します。これを防ぐため、フォームに`hx-push-url`属性を追加し、`false`に設定します。これにより、フォーム送信時にアドレスバーのURLが変更されず、HTMXの文脈内でフォーム送信が完結するようになります。
まとめ
この記事では、HTMXの`hx-boost`機能を使ってSPAスタイルのアプリケーションでフォーム送信を行う方法を学びました。`hx-post`、`hx-target`、`hx-push-url`属性を活用することで、ページ全体の更新なしにフォームの動的な処理を実現できます。このアプローチにより、ユーザーエクスペリエンスが向上し、Webアプリケーションがより応答性の高いものになります。
ポイント:
- ホームページにhx-postとhx-target属性付きのフォームを追加
- フォーム送信とArticle一覧の更新を処理するサーバーサイドのルートを実装
- HTMXの”ブースト”機能を活用してフォームの処理を強化
- hx-push-urlを’false’に設定してフォーム送信時のURLの変更を防止