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
400
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
130
プログラミング言語F#を学びはじめました
biwakonbu
0
310
開発の生産性を高める事を考える
biwakonbu
0
140
「プログラミングを習得する」を考えてみた
biwakonbu
0
81
Python の型事情について
biwakonbu
0
97
ESLint使ってますか?
biwakonbu
0
110
Other Decks in Technology
See All in Technology
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
500
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
0
450
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
4
1.7k
ビギナーであり続ける/beginning
ikuodanaka
3
350
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
0
160
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
370
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
510
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
240
OPENLOGI Company Profile
hr01
0
67k
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
730
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Code Review Best Practice
trishagee
69
18k
Being A Developer After 40
akosma
90
590k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
A Modern Web Designer's Workflow
chriscoyier
694
190k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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. 大阪プログラミングコミュニティ始めました エンジニアのための学習・交流を行うコミュニティスペースを作っています 勉強したい人や人と繋がりたい人に向けてサービス提供していきます
おわり