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
180
HTMX触ってみた
HTMXについての発表です。
どういう感じのものなのか、Django で使った所感はどうなのかなどを話しました。
資料はデモ部分が無いので少し味気ないかもしれません。
biwakonbu
April 12, 2024
Tweet
Share
More Decks by biwakonbu
See All by biwakonbu
Django を使い続ける理由
biwakonbu
0
160
爆速なPythonフレームワーク
biwakonbu
0
160
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
390
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
130
プログラミング言語F#を学びはじめました
biwakonbu
0
310
開発の生産性を高める事を考える
biwakonbu
0
140
「プログラミングを習得する」を考えてみた
biwakonbu
0
80
Python の型事情について
biwakonbu
0
96
ESLint使ってますか?
biwakonbu
0
110
Other Decks in Technology
See All in Technology
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
280
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
How Community Opened Global Doors
hiroramos4
PRO
1
120
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
270
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
480
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
230
Witchcraft for Memory
pocke
1
310
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
yoh
1
140
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Optimizing for Happiness
mojombo
379
70k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Designing Experiences People Love
moore
142
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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. 大阪プログラミングコミュニティ始めました エンジニアのための学習・交流を行うコミュニティスペースを作っています 勉強したい人や人と繋がりたい人に向けてサービス提供していきます
おわり