本文へ
ハクソク

世界を動かす技術を、日本語で。

HTMXをGoでどのように使うか

元記事: 原文(alexedwards.net)

概要

  • HTMX と Go を組み合わせたWebアプリ開発手法の紹介
  • HTMLテンプレート構成 や 部分・全体HTMLレスポンス の返却パターン解説
  • リダイレクトやエラー処理、HTMXの標準設定にも言及
  • Goのhtml/template と ファイル埋め込み の活用方法
  • 小規模アプリ 構築を通じて具体例を提示

GoとHTMXによるインタラクティブWebアプリ開発

  • HTMX は最小限のJavaScriptで、アプリのような滑らかなインタラクションを実現
  • サーバーサイドHTMLレンダリング の一貫性と安全性を維持
  • Goのhtml/templateパッケージ との相性が良い
  • HTMLテンプレートの構造化 や 部分HTML（パーシャル）・全体HTML の返却パターンを採用
  • リダイレクトやエラー処理 もHTMX利用時に工夫が必要
  • HTMXの標準設定 （CDNではなく静的ファイルとして配布）を推奨
  • Bamboo（CSSフレームワーク） や Gopher画像 も静的アセットに追加

プロジェクト構成

  • ディレクトリ構成 例
    • assets/static/css, img, js：静的ファイル格納
    • assets/html/pages, partials：HTMLテンプレート格納
    • cmd/web：Goのエントリポイントやハンドラ
  • HTMLテンプレート
    • base.tmpl：全ページ共通のレイアウト
    • pages/home.tmpl：個別ページの内容
    • partials/images.tmpl：再利用可能なパーシャル

HTMXの導入と静的アセット管理

  • HTMX/Bamboo/Gopher画像 を静的ディレクトリにダウンロード
  • 静的ファイルサーバ で配信

提供: ハクソク · 要約更新:

AIによる日本語要約です。内容は原文とあわせてご確認ください。

Hacker Newsの議論を読む

Hackerたちの意見

最近のプロジェクトでHTMXを使ってみたんだけど、めっちゃ楽しかった！AngularJSやReactが出る前のWebの仕組みを知ってるから、実際のページを作れて、必要なJSの量を減らせるのがすごくありがたい。バニラJSでも問題ないけど、HTMXは繰り返し同じイベントハンドラーのために作らなきゃいけないボイラープレートをかなり省いてくれるんだよね。もし興味があって、「モダンフロントエンド」哲学にあまり魅力を感じてないなら、HTMXを試してみることをおすすめするよ。HTMXサイトの最初の例は本当に基本的だけど、もう少し学ぶともっとパワフルになるよ。

└

もし興味があって、「モダンフロントエンド」哲学にあまり魅力を感じてないなら、私も慎重にsveltekitについて言及するつもり。外から見ると、また別のJSフロントエンドフレームワークに見えるけど、最近使わざるを得なくなって、実際にはHTMXやその仲間たちが提唱するハイパーテキスト中心のデザイン哲学に対する素晴らしいサポートがあることを学んだ。

GoとHTMXの組み合わせが大好き！テンプレートやコンポーネント、パーシャルの型安全性を高めるために、a-h/templと一緒に使ってる。自分のツールキットも共有したよ[1]、これを「GUSスタック」って呼んでるんだ。Go、Unix、SQLiteの組み合わせで、exe.devの「GUTS」スタック[2]から大きな影響を受けてるけど、Typescriptの代わりにHTMXを使ってる。キットには他にもGoのコンポーネントがいくつか入ってるよ… - cockroachdb/errors（スタックトレース付きのエラー用） - templ（型安全なHTMLテンプレート用、反応性のためにhtmxとCSS用にtailwindcssを使用） - fuego（Webハンドラーから生成されたOpenAPI仕様） - sqlc（SQLから生成された型安全なコード） - modernc.org/sqlite（純粋なGoのsqliteライブラリ） - goose（SQLとGoのマイグレーション用） - dbos（SQLiteでの耐久性のあるワークフロー用） - rod（Chrome / CDPのテストと自動化用）このスタックでコーディングするのがすごく生産的で、エージェンティックなコーディングができて、バイナリを構築・デプロイするのが楽しい！

└

HUGSスタックに改名するのもいいかもね -- HTMX（またはハイパーテキスト）、Unix、Go、SQLite。

└

templを使おうとしたけど、使い勝手が悪くてイライラした。あの時点では、むしろReactを使った方がマシだと思った（Reactは嫌いだけど）。基本的な標準テンプレートにHTMXをちょっと加えるだけで、私のニーズには十分だね。

└

これをGoTHスタック、つまりGo Templ Htmxって呼んでるよ。そこにsqlcを加えればGoTHsかGHosTスタックになる。これの組み合わせが大好きで、「go generate ./...」をビルドステップに取り入れると、すごく便利になるよ。sqlcモデルとテンプレートオブジェクト、戻り値の間を変換するためにgoverterも追加してる。ボイラープレートの50%が生成されるから、型安全性がすごく良くなるんだ。

└

最近、タイプセーフなSQLのためにjet[1]がすごく気に入ってる。コードを生成するのにライブDBが必要だけど、それもポジティブだと思ってる。コードを書く前にマイグレーションを適用しなきゃいけないからね。[1] https://github.com/go-jet/jet

└

hyperscript[1]がHTMXの話をする時にもっと評価されてほしいなって少し悲しい。hyperscriptはGo + HTMXスタックにぴったりで、サーバーとの往復なしでDOM操作ができるんだ。こういう宣言型プログラミングが好きな人は少ないのは分かるけど、すでにHTMLファイルがある時には、hyperscriptはそれの延長みたいに感じる。複数の決済ゲートウェイを扱うOpen Payment Host[2]に取り組んでいて、hyperscriptだけで複雑なDOM操作ができたよ。[1] https://hyperscript.org/ [2] https://openpaymenthost.com/

アレックス・エドワーズが大好き！彼の本や「Learn Go with Tests」は、私がこの言語に初めて触れたきっかけだった。今でもおすすめだよ。古いものをHTMXに変換したくなってきた。

└

アレックス・エドワーズのファン、賛成！Web開発のためにGoを学ぼうとしている人は、ぜひ「Let's Go」と「Let's Go Further」を手に取ってみて。プログラミング言語の入門書としては、すごくアプローチしやすくて、楽しくて、実用的だと思う。

自分用にKotlin + HTMXを使ったフレームワークを書いたよ - https://github.com/reubenfirmin/zoned。目標は、完全に型付けされたウェブアプリを作れるか試すことだった。Kotlinx.htmlを使ってて、HTMLを書くためのjsxっぽいDSLを提供してる。最初の90%は手作業でやって、残りの10%（とREADME）はClaudeを使って仕上げた。とにかく出したかったんだ。

GoもAlexも大好きなんだけど、HTMXとの経験はいつも残念な結果になっちゃうんだよね。言い換えると、HTMXを使ってると、コードベースの複雑さがアプリ自体の2倍の速さで増えていく感じがする。いつも変なエッジケースにハマって、変なハックなしには抜け出せないんだ。Nodeパッケージが嫌われる理由は分かるけど、HTMXはそれに対する過剰な反応みたいに感じる。でも、JSONと格闘しなくて済む分、アプリを実際に見た目や使い心地を良くするのにかかる時間は3倍になるよ。Mantineのテンプレートを組み合わせるのに2分もかからないし、最高のUIコンポーネントを使えるから、ビルドした静的アセットを埋め込んで、同じGoのバイナリが得られるんだ。[1] https://github.com/mantinedev/vite-min-template

Hacker Newsで議論の続きを見る