「HALTって何？」から始まって、理解しようとした話

はじめに

最近、「HALT」という言葉を社内で聞くようになりました。最初は特に気にしていなかったのですが、頻度も増えてきたので気になり始めました。

でも正直なところ、

HALTって何…？
という状態でした（笑）

先輩エンジニアに聞いてみると、

HTMX + Atomic Design + Lit + Templ

というキーワードが出てきて、これらをまとめて「HALT」と呼んでいるとのことでした。
ここから、自分なりに理解しようとした話です。

---

HALTを分解してみる

最初はまったく理解できなかったので、とりあえず分解することにしました。

---

HTMXとは何か

HTMXは、一言でいうと
HTMLのままサーバーとやり取りして、画面を更新する仕組みです。

通常のWebアプリでは、
フロント → API(JSON) → バックエンド
という流れでデータを取得して、JavaScriptで画面を書き換えます。

一方HTMXでは、
フロント → サーバー → HTMLを返す
という流れになります。

つまり、

JSONではなくHTMLをそのまま返す

これによって、

• フロントで状態管理を持たなくていい
• APIの設計を細かく分けなくていい
• JavaScriptの量が減る

という特徴があります。

さらにHTMXは、

<button hx-get="/users" hx-target="#list">

のように、HTMLの属性だけで通信と更新を書けます。

UIの動きがHTMLの中にそのまま書けるため、非エンジニア的にもかなり直感的でした。

---

Atomic Designとは何か

Atomic Designは技術というより、UIの設計の考え方と理解しました。
画面をいきなり作るのではなく、

原子 → 分子 → 有機体 → テンプレート → ページ

という単位で分解して考えます。

例えば、

• ボタンやラベルのような小さいパーツ（原子）
• 入力フォームのような組み合わせ（分子）
• ヘッダーやカードのようなまとまり（有機体）

という形で、少しずつ組み立てていくイメージです。

この考え方のメリットは、
「UIが再利用しやすくなる」「構造が整理される」 ことだと学びました。

---

Litとは何か

Litは、Web Componentsベースの軽量なUIライブラリということです。

ここで重要なのは、全部をフロントエンド化しないという点です。

通常のReactなどでは、画面全体をフロントで管理します。でもLitは、必要な部分だけインタラクティブにします。

例えば、

• グラフ
• モーダル
• リアルタイム表示

など、「ここだけ動的にしたい」部分にだけ使います。
つまり重くしすぎないフロントエンドということです。

---

Templとは何か

Templは、GoでHTMLをコンポーネントとして書ける仕組みです。

普通のテンプレートだと、HTMLとロジックが分かれがちです。でもTemplでは、

templ User(user User) {
  <div>{user.Name}</div>
}

のように書けます。

これによって、HTMLが型付きで管理できるようになります。

つまり、

• コンパイル時にエラーが出る
• データ構造とUIが一致する

というメリットがあります。

HALTの中では、「GoでUIを組み立てる」役割です。

---

HALTの全体像

ここまでをまとめると、こうなります。

ユーザー操作
   ↓
HTMX（リクエスト）
   ↓
Go（処理）
   ↓
Templ（HTML生成）
   ↓
HTMX（部分更新）
   ↓
必要ならLit（インタラクション）

Atomic Designはこの中で、UIの構造ルールとして機能します。
なぜこの構成にするのか、ここが一番重要でした。

① 構成をシンプルにするため

通常は、

フロント/API/バックエンド

に分かれます。

HALTでは、Go中心でまとめる形になります。これで、理解コストが下がります。

② 表示を速くするため

HTMXで、

• 必要な部分だけ更新
• 無駄な再描画が減る

このため、表示を速くして快適な操作につながります。

③ AIで作りやすくするため

ここがかなり面白いところです。
一般的な構成では、フロント・API・バックエンドが分かれているため、AIがコードを把握するために追わなければいけない範囲が広くなります。例えば「ボタンを押したらこう動かしたい」と頼むだけでも、AIは複数のファイルや層をまたいで影響範囲を確認する必要があります。

一方HALTでは、

• 1つの流れにまとまっている
• 関連するコードがGo側に集約されている
• AIが関連箇所をまとめて把握しやすい

という構成になっています。
そのため、Claude Codeのような実装支援ツールを使ったときに、AIがコードの流れを追いやすく、修正提案の精度や速さが上がりやすいと感じました。

実際に先輩のコードを少し見せてもらったときも、「この画面のこの部分を直したい」という依頼に対して、修正対象が1つのファイルにまとまっているケースが多く、非エンジニアの私でも「どこを触れば良いか」がイメージしやすかったです。
これにより、非エンジニアの私でも開発をうまく進められそうだと感じました。

---

正直な感想

最初は「難しい設計」にしか見えませんでした。

でも分解して理解してみてみると、むしろシンプルにするための設計だということが分かりました。

---

まとめ

HALTは、

• HTMX + Atomic Design + Lit + Templ の組み合わせ

そしてその目的は、

• シンプル・高速・AIフレンドリーな開発

でした。

---

おわりに

最初は全く分からなかったものでも、分解すると見えてくることが多いなと感じました。
今後は、この構成で、AI利用状況を集計してSlack通知するような小さいツールを作ってみたいと思っています。実際に手を動かしながら、今回調べた内容を少しずつ理解していきたいです。