Day 075 / htmx x Hono API

検索 UI を HTML 断片だけで作る

このチュートリアルは /api/day075/search が HTML を返し、 フロント側は htmx で結果一覧だけ差し替える最小構成です。 React や JSON 整形を挟まず、Workers に向いたサーバー主導 UI を試せます。

入力するたびに API を呼び、カード一覧だけを差し替えます。

検索中...

流れ

  1. 入力欄の hx-get で Worker の検索 API を呼ぶ
  2. q を query string として送る
  3. Worker は検索結果の HTML 断片を返す
  4. #search-results だけを置き換える

試すポイント

  • workers で Cloudflare 系のカードに絞る
  • htmx で UI 実装のカードに絞る
  • 存在しない語を入れて empty state を確認する