Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTMX触ってみた
Search
biwakonbu
April 12, 2024
Technology
0
48
HTMX触ってみた
HTMXについての発表です。
どういう感じのものなのか、Django で使った所感はどうなのかなどを話しました。
資料はデモ部分が無いので少し味気ないかもしれません。
biwakonbu
April 12, 2024
Tweet
Share
More Decks by biwakonbu
See All by biwakonbu
爆速なPythonフレームワーク
biwakonbu
0
51
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
180
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
63
プログラミング言語F#を学びはじめました
biwakonbu
0
67
開発の生産性を高める事を考える
biwakonbu
0
73
「プログラミングを習得する」を考えてみた
biwakonbu
0
42
Python の型事情について
biwakonbu
0
47
ESLint使ってますか?
biwakonbu
0
63
TypeScript で型を扱う観点から React と Vue3 を比較
biwakonbu
0
440
Other Decks in Technology
See All in Technology
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
270
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
ハードウェアを動かすTypeScriptの世界
9wick
3
1.1k
Databricksの生成AI戦略
taka_aki
1
340
Domain-driven Design: A Complete Example
ewolff
2
230
自らを知り外と繋がる、日経のエンジニア採用とDevRel活動/devreljp92
nishiuma
2
210
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
150
能動学習のいろは:書籍「Human-in-the-Loop機械学習」3〜5章
hiroyoshiito
0
280
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
36k
Secrets of a PowerShell "Guru"
guyrleech
1
120
回り回って効いてくる副次的効果としての技術広報/techpr
nishiuma
1
130
From here to resilience - a travel guide
ufried
1
160
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
33k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
RailsConf 2023
tenderlove
9
580
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
81
44k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Building Your Own Lightsaber
phodgson
100
5.7k
Documentation Writing (for coders)
carmenintech
60
4k
Design by the Numbers
sachag
274
18k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
The Cult of Friendly URLs
andyhume
74
5.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Transcript
HTMX 触ってみた 株式会社coroutine 東川 諒央
自己紹介 1 ここが便利 (そう) な仕様 3 django-htmx で使ってみた 4 HTMX
とは 2 5 まとめ
自己紹介 1 株式会社 coroutine 東川 諒央 @biwakonbu 大学教員 ゲームバックエンド フリーランス
経歴 Go Python 実績言語 Ruby 技術顧問 エンジニア教育 業務 設計 プログラミング インフラ etc… Rust Haskell TypeScript 趣味言語 Lisp F#
> HTMX とは
HTMX とは 2 ❏ HTML を拡張して便利にしたライブラリ ❏ GET, POST 以外の
HTTP Method のサポート ❏ 全てのタグから HTTP Request を送れるように ❏ HTML の部分更新が可能に
HTMX とは 2 #target a タグボタン hx-post=”/task/create” hx-target=”#target” POST 部分的な
HTML を返却 hx-target で指定されたセレクタを置換
> ここが便利 (そう) な仕様
ここが便利 (そう) な仕様 3 ❏ セットアップが楽 ❏ サーバーサイドのフレームワークの仕組みに簡単に載せられる ❏ 部分的な
DOM の入れ変えがサーバーで生成した純 HTML で出来る ❏ React, Vue などのクライアントサイドレンダリングをしなくても良い ❏ → という事は、極端に UX に拘らない限り JS をやらなくても良い ❏ → 開発コスト減が狙えそう ❏ SPA (SSR) 的にアプリケーションを動作させたい場合 boost を使うと出来る ❏ 取得した HTML で body を差し替えてくれる ❏ CSS トランジションもできる ❏ JS で class 属性を弄るとかをやらなくて良い
> django-htmx で使ってみた
django-htmx で使ってみた 3 ❏ django-htmx が django との連携拡張 ❏ 無くても使えるんだけど、リクエストが
HTMX からのものか判別できる ❏ つまり、部分レンダリングか全レンダリングかを選択できる ❏ SSR のような挙動で SEO を意識した機能 ❏ HTMX はデフォルトの Content-Type が Application/x-www-form-urlencoded となる ❏ Django だと圧倒的に Application/json が良いので変えたい! ❏ ありました → json-enc という拡張を導入すると簡単に変えれます ❏ hx-ext=”json-enc” だけ
django-htmx で使ってみた 3 簡単なデモ
まとめ 4 ❏ django で使ってみましたが、導入が簡単な割に色々便利でした ❏ 単純にソースが簡略化されるのでサーバ側からしても良い選択っぽい ❏ 競争の激しい ToC
とかじゃない限り最初から分離構成不要だと思うので良い ❏ REST API でやるなら十分 ❏ json-enc を使っておけばあとから API を公開するように分離もできそう ❏ WEB → HTMX & json-enc、スマホ → API みたいな使いかたとか ❏ Laravel, Django, Spring Boot などは拡張で対応している ❏ Rails は Hotwire の文化なので... ❏ 対応してなかったとしても単純なリクエストなので ❏ GET, POST PUT, DELETE 等に対応できれば困らない筈
P.S. 大阪プログラミングコミュニティ始めました エンジニアのための学習・交流を行うコミュニティスペースを作っています 勉強したい人や人と繋がりたい人に向けてサービス提供していきます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し
・むしろ開催応援のギフト券なども考えています ・長く続く開発者コミュニティ作りを実行します
P.S. 大阪プログラミングコミュニティ始めました エンジニアのための学習・交流を行うコミュニティスペースを作っています 勉強したい人や人と繋がりたい人に向けてサービス提供していきます
おわり