はじめに

Cloudflare Workersやネットの技術記事で、定期的にhonoを見るようになりました。
せっかくなので、Honoのチュートリアルを触ってみます。

スターターテンプレートでプロダクトを作成します

$ npm create hono@latest my-app

cloudflare-workersを利用します。

? Which template do you want to use?
    aws-lambda
    bun
    cloudflare-pages
❯   cloudflare-workers
    deno
    fastly
    lagon
    nextjs
    nodejs
    vercel

プロダクトが作成されたら、プロダクトのディレクトリへ移動して、npm iします。

$ cd my-app
$ npm i

下記のようなディレクトリ構成が展開されています。

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── src
│   └── index.ts
├── tsconfig.json
└── wrangler.toml

npm iが終わったら、下記のコマンドでローカルサーバーを立ち上げます。

$ npm run dev

> dev
> wrangler dev src/index.ts

 ⛅️ wrangler 3.22.1
-------------------
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:1234
[wrangler:inf] GET / 200 OK (33ms)
[wrangler:inf] GET /favicon.ico 404 Not Found (8ms)

表示されるlocalhostへアクセスすると、下記のようにHello Hono!が表示されます。

JSONを返す処理の実装

GET リクエストを処理し、レスポンスを返す例です。

import { Hono } from 'hono'

const app = new Hono()

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

http://localhost:1234/api/hello へアクセスすると、

リクエストとレスポンスの実装

パスパラメーター、URL クエリ値を取得し、Response ヘッダーを追加する手順は次のように記述されます。

app.get('/posts/:id', (c) => {
  const page = c.req.query('page')
  const id = c.req.param('id')
  c.header('X-Message', 'Hi!')
  return c.text(`You want see ${page} of ${id}`)
})

http://localhost:1234/posts/123?page=1などにアクセスすると、下記のように渡した値に合わせて表示が返ってきます。

HTMLを返す

src/index.tsをsrc/index.tsxに変更します。

src/index.tsx

import { Hono } from 'hono'

const app = new Hono()

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

app.get('/page', (c) => {
  return c.html(<View />)
})
export default app

ファイル名の変更に合わせてpackage.jsonのscriptsで、index.tsを指定している箇所をindex.tsxに修正します。

{
  "scripts": {
    "dev": "wrangler dev src/index.tsx",
    "deploy": "wrangler deploy --minify src/index.tsx"
  },

上記の変更を終えたら、$ npm run devし直し、localhost:1234/pageにアクセスすると、HTMLが表示されます。

生のResponseを返す実装

Responseを返すこともできます。

app.get('/', (c) => {
  return new Response('Good morning!')
})

Middlewareの実装

チュートリアルでは、Basic認証の例です。
Firebase Auth などの外部ライブラリを使用したサードパーティのミドルウェアも提供されているとのことで、便利にログイン処理の実装ができそうです。

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


const app = new Hono()

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

app.get('/admin', (c) => {
  return c.text('Your are authorized!')
})

export default app

実際にアクセスするとBasic認証が可能です。

終わりに

とりあえず、Honoのチュートリアルを走ってみました。
CloudflareWorkerを個人開発に使いだしているのですが、Workers+JSだけだと面倒な部分をHonoが良い感じに吸収してくれそうです。次のプロダクトではHonoを使ってみようかな？と思います。