Lambdaカクテル

京都在住Webエンジニアの日記です

Invite link for Scalaわいわいランド
トップ > 技術 > htmxをCloudflare Workers + Honoで動かして入門した

htmxをCloudflare Workers + Honoで動かして入門した

技術 htmx cloudflare

htmxについてちょっと遊んでおきたかったので遊んだ。Cloudflare Workersの上でHonoを動かして、TSXでHTMLを返しつつ、その中にhtmxをのっけた、みたいな構成。𝑹𝒆𝒂𝒍 𝑾𝒐𝒓𝒍𝒅 𝑩𝒖𝒔𝒊𝒏𝒆𝒔𝒔...でも使えるかな？

https://wild-meadow-79c7.windymelt.workers.dev/

なんか一瞬でできた。

やったこと

  • pnpm create cloudflare@latestしてHello, Worldプロジェクトを作成してそのままデプロイ(この時点で https://wild-meadow-79c7.windymelt.workers.dev/ が生える。すげ〜)
  • ディレクトリができるのでそこに入ってpnpm i honoする
  • tsconfig.jsonのcompilerOptionsのjsxまわりをhono向けにいじる
  • index.tsã‚’index.tsxにリネームした
  • コードをベロ〜ッと書く
/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `npm run dev` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `npm run deploy` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
}

import { Hono } from 'hono'
import { jsx } from 'hono/jsx'

const app = new Hono()

app.get('/', (c) => {
    return c.html(
        <html>
            <head><script src="https://unpkg.com/[email protected]"></script></head>
            <body>
                <p>Hono!</p>
                <button hx-get="/api" hx-target="#result">
                    クリックしてAPIを呼ぶ
                </button>
                <pre><code id="result">JSON here...</code></pre>
            </body>
        </html>
    )
})

app.get('/api', (c) => {
    return c.json({ 今日のラッキーナンバー: 666 })
})

export default app

こんだけで良い。wrangler devで動作確認できるので、良さそうならwrangler deployして10秒くらい待つと本番環境にデプロイされている。昔Heroku使ってたときの距離感を思い出した。それが最新のテクノロジーでやってくるという感じでイカす。

htmx 感想

hs-getしかしていないので他の機能とかは全然知らない状態なのでこれから遊んでいくのだけれど、なんか素朴で良さそうなイメージ。素朴だけど、ザクッとなんかやりたいときのユースケースはカバーできてる感じがして、わざわざコード書くのダルいな〜ってときに良い感じがする。

バックエンドはHTMLのフラグメントを返してクライアントでそれを埋める、というのが懐かしい感じがして面白い。

コンポーネントが状態を持ちはじめたりするとどうなるのか？といったことに興味がある。htmxは見ての通りhtmlをDSL代わりにして宣言的にやりますというアプローチなので、そこの屋台骨をうまく逸脱しないようにしつつも、ある程度複雑なことができるのか、ということが気になる。

局所的にhtmxを使えそうなのも面白いポイントで、試しに一部使うとか、デザイナにちょっとペライチ作ってもらうとか、そういうときにも便利なのではないか。hx-targetとかはCSSセレクタなので、デザイナはだいたい知ってると思う。

個人的にこういうサッパリしたライブラリというかフレームワークが好きがちなので、贔屓目に見ている箇所があるかもしれない。honoの思想も好きなので、サッパリしたフレームワークの上に、互いに干渉しない形でサッパリしたフレームワークが載っているという感じで、ダブルサッパリ感が気持ち良いと思う。なんなら、Cloudflare Workersという仕組みも、サッパリしていて面白い。

一方、𝑹𝒆𝒂𝒍 𝑾𝒐𝒓𝒍𝒅 𝑩𝒖𝒔𝒊𝒏𝒆𝒔𝒔...はどうしても複雑になってしまうので、屋台骨となる思想を保ちつつ複雑さをどこまで飲み込めるのか？？？ということが、やはり気になる。多少汚くてもそういうことができるほうが生き残る。前述したように、局所的にhtmx使うということも可能なので、そのポテンシャルはあるように思う。なにやら愉快で、人々が集まってきて、化学反応が発生するような、そういう面白いツールだ。

参考文献

zenn.dev

yusukebe.com

★記事をRTしてもらえると喜びます
Webアプリケーション開発関連の記事を投稿しています．読者になってみませんか？