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

by Yoshihiro Hasegawa

Slide 1

Slide 1 text

< > htm / x って知っていますか？次世代のHTML 長谷川喜洋よしひろはせがわ

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

chocolat_street hiro_ghap1 長谷川喜洋よしひろはせがわフロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO 株式会社ステラクリエイト CEl 京都芸術デザイン専門非常勤講d デジタルハリウッド大阪非常勤講d Figma Community Leader LottieFiles エバンジェリスq 鳥取県商工会連合会登録専門家

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

chocolat_street hiro_ghap1 長谷川喜洋よしひろはせがわフロントエンドエンジニア/星のソムリエ® 株式会社How to Use CTO 株式会社ステラクリエイト CEn 京都芸術デザイン専門学校非常勤講f デジタルハリウッド大阪非常勤講f Figma Community Leadeq LottieFiles エバンジェリスs 鳥取県商工会連合会登録専門家星のソムリエって？

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

< > htm / x

Slide 14

Slide 14 text

a なぜとだけがHTTPリクエストできるの% a なぜ click と submit イベントだけがトリガーになるの% a なぜ GET と POST メソッドだけが利用できるの% a なぜ画面全体の更新しかできないの？

Slide 15

Slide 15 text

htm がこれらの制約をなくすことで x HTMLはハイパーテキストとして完成するなぜとだけがHTTPリクエストできるのb なぜ click と submit イベントだけがトリガーになるのb なぜ GET と POST メソッドだけが利用できるのb なぜ画面全体の更新しかできないの？

Slide 16

Slide 16 text

< > htm / x 基本的な使い方

Slide 17

Slide 17 text

コンテンツを取得

Slide 18

Slide 18 text

コンテンツを取得 hx-get="./text.html" HTML要素に属性を追加するだけ

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

これだけで、htm の機能が使える準備が整います x

Slide 21

Slide 21 text

シンプルな例を見てみましょう

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

hx-get でAjaxリクエストが送信されます

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

hx-trigger でリクエストを発行するイベントを指定します

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

hx-target でリクエストの結果が挿入される場所を指定します

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

hx-swap でリクエスト結果のターゲットへの扱いを指定します

Slide 34

Slide 34 text

HTMLの基本だけで、簡単に動的インターフェースが作れます！

Slide 35

Slide 35 text

< > htm / x テンプレートとして

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

< > htm / x まとめ

Slide 41

Slide 41 text

S Ajaxリクエストを簡単に発行でき1 S HTMLテンプレートとして使え1 S ページの部分更新が簡単に行え1 S HTMLベースなので、JavaScriptの知識が少なくても使える

Slide 42

Slide 42 text

< > htm / x a Ajaxリクエストを簡単に発行でき9 a HTMLテンプレートとして使え9 a ページの部分更新が簡単に行え9 a HTMLベースなので、JavaScriptの知識が少なくても使えるぜひ、htm 使ってみてください！ x