Zenn
Open12

Hono

high-ghigh-g

モチベーション

  • Bun + Honoの環境構築
  • Hello World
  • Honoのドキュメントに一通り触れる
  • CSS in JS系、UIライブラリ系はどれが良いか調べる
  • Cloudflare Workersとの連携

参考

https://hono.dev/

high-ghigh-g

Hono は、Express に似た、フロントエンドのないシンプルな Web アプリケーション フレームワークです。

Web APIの構築
バックエンドサーバーのプロキシ
CDN の前面
エッジアプリケーション
ライブラリのベースサーバー
フルスタックアプリケーション

high-ghigh-g

ミドルウェア、ヘルパー

Basic Authentication
Bearer Authentication
Cache
Compress
Cookie
CORS
ETag
html
JSX
JWT Authentication
Logger
Pretty JSON
Secure Headers
Streaming
GraphQL Server
Firebase Authentication
Sentry

このあたりを学んでいけばHonoに対する解像度が上がる

high-ghigh-g

こういう記述が出来る。
apiと関数コンポーネントが同居できるのがすごい

app.get('/api/hello', (c) => {
  return c.json({ ok: true, message: 'Hello Hono!' })
})

app.get('/post/:id', (c) => {
  const page = c.req.query('page')
  const id = c.req.param('id')
  c.header('X-Message', 'Hi!')
  return c.json({ ok: true, message: 'Hello Hono!' })
})

app.post('/posts', (c) => c.text('Created!', 201))
app.delete('/posts/:id', (c) => c.text(`${c.req.param('id')} is deleted`))

const View = () => {
  return (
    <html>
      <body>
        <h1>Hello Hono</h1>
      </body>
    </html>
  )
}

app.get('/page', (c) => {
  return c.html(<View />)
})
high-ghigh-g

app.useでミドルウェアを利用する。
basic認証を利用した開発をしたい場合、以下のように定義できる

import { basicAuth } from 'hono/basic-auth'

app.use(
  '/admin/*',
  basicAuth({
    username: 'admin',
    password: 'secret',
  })
)

app.get('/admin', (c) => {
  return c.text('You are authorized!')
})
high-ghigh-g
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Cloudflare Workers!!')
})

export default app

bun run deployで実行ok

high-ghigh-g

Cloudflare Workersを利用するために、構文が2つ
Service Worker モードとModule Worker モード
Honoでは両方利用可能

// Service Worker
app.fire()

// Module Worker
export default app

※バインディング変数がローカライズされるため、いまいまはModule Workerを利用