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
48
ESLint使ってますか?
biwakonbu
0
64
TypeScript で型を扱う観点から React と Vue3 を比較
biwakonbu
0
440
Other Decks in Technology
See All in Technology
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
410
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
1
130
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
37k
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
510
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
380
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
38k
Observabilityジャーニーを実現するためのAWSサービス:OSS編
o11yfes2023
0
110
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
1
320
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
220
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
370
スクラムに出会って「できた」を実感できるようになってきた話 / Scrum makes me feel like I can do it
yayoi_dd
2
110
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
460
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Web development in the modern age
philhawksworth
203
10k
GitHub's CSS Performance
jonrohan
1025
450k
Embracing the Ebb and Flow
colly
80
4.2k
Into the Great Unknown - MozCon
thekraken
15
1.1k
KATA
mclloyd
16
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
We Have a Design System, Now What?
morganepeng
43
6.8k
How STYLIGHT went responsive
nonsquared
92
4.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.4k
BBQ
matthewcrist
80
8.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
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. 大阪プログラミングコミュニティ始めました エンジニアのための学習・交流を行うコミュニティスペースを作っています 勉強したい人や人と繋がりたい人に向けてサービス提供していきます
おわり