htmx

LDIで開発担当しているOKです。 前回に続き HTMX を使った事をやっていきます。 今回はコンテンツの一覧を表示・編集・削除ができる画面を HTMX を交えて作っていきます。 完成するとこんな感じのページになります。 編集画面完成形 ディレクトリ構成 実装一覧 main.go header.html items.html items-readonly.html items-edit.html 実装解説 編集画面表示 編集ボタン 変更ボタン キャンセルボタン 削除ボタン hx-on について おわりに ディレクトリ構成 今回差分があったものだけ記載。 - main.go - template…

ご無沙汰しております。LDIで開発担当しているOKです。 今回のテーマですが、 普段はWebのフロントエンドとか全然やってないのですが、 訳あってHTMXを使ってみたので、アウトプットも兼ねてまずは導入部分について記事にしようと思います。 HTMXとは とりあず今回の完成系 開発環境情報 ディレクトリ構成 実装 header.html footer.html sample1.html sample2.html index.html main.go HTMX の動作解説 HTMXとは 公式ドキュメント には次のようにあります。 htmx gives you access to AJAX, CSS…

こんにちは、エキサイト株式会社の平石です。 今回は、HTMXでheadタグ内の要素を扱う方法をご紹介します。 はじめに 環境 標準のHTMXではheadタグを扱えない headタグを扱いたいとき merge re-eval hx-preserve append 終わりに 参考文献 はじめに ソースコードはJava SpringBootを利用していますが、それ以外の言語、フレームワークでも動作するかと思います。 環境 今回のソースコードは以下の環境で動作確認をしています。 Java 21 SpringBoot 3.3.5 また、テンプレートエンジンとしてThymeleafを利用しています。 標準…

あんまり凝ったことをHTMXでやるべきではないというのが持論ですが、どうしても足したい機能があって、HTMXがDOMを入れ替えてしまうことが問題になるケースではmorphdomを使うときれいに解決できるかもしれません。 HTMXとは HTMXとは、タグに hx-hogehoge といった属性を足すことで、HTMLだけを書いているように見せつつも動的にDOMを組み立てることができるライブラリ。 ちょっとした情報更新がある動的サイトを書きたいときはとてもスッキリ書けるので、結構画期的なライブラリに思えます。 が、書くには結局DOMから発せられるイベントに熟知している必要があるなど、よく言われる「J…

エキサイト株式会社エンジニアの佐々木です。htmxのhx-swap-oobとhx-select-oobを理解します。 前提 hx-swap-oob hx-select-oob まとめ 最後に 前提 HTML内にhtmxをロードしてください。 <script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script> hx-swap-oob h…

こんにちは、エキサイト株式会社の平石です。 今回は、HTMXでhx-getやhx-postを使ってリクエストを実行した後に任意のJavaScriptコードを実行する方法をご紹介します。 はじめに HTMXでは、hx-getやhx-postを利用して、リクエストを実行することができます。 そして、レスポンスとして返ってきたHTMLテンプレートで既存のテンプレートの全体または一部を置き換えることができます。 しかし、このリクエストの実行後に任意のJavaScriptコードを実行したい場合もあると思います。 今回は、その方法をブログ記事として残しておきたいと思います。 環境 以下の環境で動作確認をし…

こんにちは。 エキサイト株式会社の三浦です。 以前、「htmxでデータを送信する際、送信の設定をしたタグの親にformタグがある場合は、そのformタグに含まれるすべてのデータが送信される」ということを説明しました。 tech.excite.co.jp 今回は、親以外のformタグのデータを送信する方法について説明します。 htmxでデータを送信する際、親formタグのすべてのデータが送られる 親タグではないformタグのデータを送信する方法 最後に htmxでデータを送信する際、親formタグのすべてのデータが送られる 以前紹介しましたが、htmxでデータを送信すると、親formタグのデータ…