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
85
HTMX触ってみた
HTMXについての発表です。
どういう感じのものなのか、Django で使った所感はどうなのかなどを話しました。
資料はデモ部分が無いので少し味気ないかもしれません。
biwakonbu
April 12, 2024
Tweet
Share
More Decks by biwakonbu
See All by biwakonbu
Django を使い続ける理由
biwakonbu
0
42
爆速なPythonフレームワーク
biwakonbu
0
67
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
230
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
85
プログラミング言語F#を学びはじめました
biwakonbu
0
110
開発の生産性を高める事を考える
biwakonbu
0
93
「プログラミングを習得する」を考えてみた
biwakonbu
0
50
Python の型事情について
biwakonbu
0
54
ESLint使ってますか?
biwakonbu
0
74
Other Decks in Technology
See All in Technology
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
MySQLのロックの種類とその競合
yoku0825
6
1.6k
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
Featured
See All Featured
Gamification - CAS2011
davidbonilla
78
4.9k
Building Applications with DynamoDB
mza
89
5.8k
The Pragmatic Product Professional
lauravandoore
29
6.1k
What's in a price? How to price your products and services
michaelherold
239
11k
Making Projects Easy
brettharned
111
5.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Designing for Performance
lara
604
67k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Faster Mobile Websites
deanohume
303
30k
The Invisible Customer
myddelton
117
13k
A designer walks into a library…
pauljervisheath
201
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
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. 大阪プログラミングコミュニティ始めました エンジニアのための学習・交流を行うコミュニティスペースを作っています 勉強したい人や人と繋がりたい人に向けてサービス提供していきます
おわり