htmxって知っていますか？次世代のHTML

HTMLタグに属性を追加するだけで簡単に非同期通信が可能なhtmx。
WordPressやECを含むCMSを便利に使うことができますが、実は「ちょっとコーディングする」だけでもすごいパワーを発揮します。
このセッションで、htmxをサクッとぜひ使ってみてください。

Transcript

1. < > htm / x って知っていますか？ 次世代のHTML 長谷川 喜洋 よしひろ はせがわ
4. chocolat_street hiro_ghap1 長谷川 喜洋 よしひろ はせがわ フロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO † 株式会社ステラクリエイト CEn † 京都芸術デザイン専門学校 非常勤講f † デジタルハリウッド大阪 非常勤講f † Figma Community Leadeq † LottieFiles エバンジェリスs † 鳥取県商工会連合会 登録専門家
5. chocolat_street hiro_ghap1 長谷川 喜洋 よしひろ はせがわ フロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO † 株式会社ステラクリエイト CEn † 京都芸術デザイン専門学校 非常勤講f † デジタルハリウッド大阪 非常勤講f † Figma Community Leadeq † LottieFiles エバンジェリスs † 鳥取県商工会連合会 登録専門家
6. chocolat_street hiro_ghap1 長谷川 喜洋 よしひろ はせがわ フロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO † 株式会社ステラクリエイト CEn † 京都芸術デザイン専門学校 非常勤講f † デジタルハリウッド大阪 非常勤講f † Figma Community Leadeq † LottieFiles エバンジェリスs † 鳥取県商工会連合会 登録専門家
7. chocolat_street hiro_ghap1 長谷川 喜洋 よしひろ はせがわ フロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO „ 株式会社ステラクリエイト CEl „ 京都芸術デザイン専門 非常勤講d „ デジタルハリウッド大阪 非常勤講d „ Figma Community Leader „ LottieFiles エバンジェリスq „ 鳥取県商工会連合会 登録専門家
8. chocolat_street hiro_ghap1 長谷川 喜洋 よしひろ はせがわ フロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO „ 株式会社ステラクリエイト CEl „ 京都芸術デザイン専門 非常勤講d „ デジタルハリウッド大阪 非常勤講d „ Figma Community Leader „ LottieFiles エバンジェリスq „ 鳥取県商工会連合会 登録専門家
9. chocolat_street hiro_ghap1 長谷川 喜洋 よしひろ はせがわ フロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO † 株式会社ステラクリエイト CEn † 京都芸術デザイン専門学校 非常勤講f † デジタルハリウッド大阪 非常勤講f † Figma Community Leadeq † LottieFiles エバンジェリスs † 鳥取県商工会連合会 登録専門家
10. chocolat_street hiro_ghap1 長谷川 喜洋 よしひろ はせがわ フロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO † 株式会社ステラクリエイト CEn † 京都芸術デザイン専門学校 非常勤講f † デジタルハリウッド大阪 非常勤講f † Figma Community Leadeq † LottieFiles エバンジェリスs † 鳥取県商工会連合会 登録専門家 星のソムリエって？
11. chocolat_street hiro_ghap1 長谷川 喜洋 よしひろ はせがわ フロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO † 株式会社ステラクリエイト CEn † 京都芸術デザイン専門学校 非常勤講f † デジタルハリウッド大阪 非常勤講f † Figma Community Leadeq † LottieFiles エバンジェリスs † 鳥取県商工会連合会 登録専門家 ―― 豊かな知識と経験からおいしいワインを 選んでくれるソムリエのように、 星空や宇宙の 楽しみ方を教えてくれるのが星空案内人です。
12. chocolat_street hiro_ghap1 長谷川 喜洋 よしひろ はせがわ フロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO † 株式会社ステラクリエイト CEn † 京都芸術デザイン専門学校 非常勤講f † デジタルハリウッド大阪 非常勤講f † Figma Community Leadeq † LottieFiles エバンジェリスs † 鳥取県商工会連合会 登録専門家 ―― 豊かな知識と経験からおいしいワインを 選んでくれるソムリエのように、 星空や宇宙の 楽しみ方を教えてくれるのが星空案内人です。
13. < > htm / x
14. a なぜ <a> と <form> だけがHTTPリクエストできるの% a なぜ click と submit イベントだけがトリガーになるの% a なぜ GET と POST メソッドだけが利用できるの% a なぜ画面全体の更新しかできないの？
15. htm がこれらの制約をなくすことで x HTMLはハイパーテキストとして完成する ˜ なぜ <a> と <form> だけがHTTPリクエストできるのb ˜ なぜ click と submit イベントだけがトリガーになるのb ˜ なぜ GET と POST メソッドだけが利用できるのb ˜ なぜ画面全体の更新しかできないの？
16. < > htm / x 基本的な使い方
17. <button hx-get="./text.html">コンテンツを取得</button>
18. <button >コンテンツを取得</button> hx-get="./text.html" HTML要素に属性を追加するだけ
20. これだけで、htm の機能が使える準備が整います x
21. シンプルな例を見てみましょう
24. hx-get でAjaxリクエストが送信されます
27. hx-trigger でリクエストを発行するイベントを指定します
30. hx-target でリクエストの結果が挿入される場所を指定します
33. hx-swap でリクエスト結果のターゲットへの扱いを指定します
34. HTMLの基本だけで、簡単に動的インターフェースが作れます！
35. < > htm / x テンプレートとして
40. < > htm / x まとめ
41. S Ajaxリクエストを簡単に発行でき1 S HTMLテンプレートとして使え1 S ページの部分更新が簡単に行え1 S HTMLベースなので、JavaScriptの知識が少なくても使える
42. < > htm / x a Ajaxリクエストを簡単に発行でき9 a HTMLテンプレートとして使え9 a ページの部分更新が簡単に行え9 a HTMLベースなので、JavaScriptの知識が少なくても使える ぜひ、htm 使ってみてください！ x