💡

Honoを実食

に公開

目的

Xでカンファレンスがあることを知りそろそろ軽く触ってみる

結論

物凄いシンプルで分かりやすかった。
初見殺し感がない。

ルーティング

こんなんで書けちゃう。

// index.ts
// import文省略
const app = new Hono()

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

Express使ったことある方ならほぼ同じじゃんって思うだろう。
それはそうなんだがreq,res無いだけで分かりやすくはないだろうか。
returnで返すっていうね、分かりやすい。
今後の規模が大きくなるにつれてパス単位で分割する方法が推奨されている。
後述するがインライン定義にするメリットも併せて享受できるので良いらしい。
https://hono.dev/docs/guides/best-practices#building-a-larger-application

パラメータ

こんなんで書けちゃう。

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

queryとparamで分けるっていうね、分かりやすい。
型推論しやすいようにインライン定義にしているらしい、なるほど。
TypeScriptならではの強みを活かそうとされている、良い。
https://hono.dev/docs/guides/best-practices#don-t-make-controllers-when-possible

レスポンス形式

こんなんで色々返せちゃう。

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

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

// HTML
// JSX形式で定義できる
const View = () => {
  return (
    <html>
      <body>
        <h1>Hello Hono!</h1>
      </body>
    </html>
  )
}

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

シンプルで分かりやすい。
静的なWebサイトならHonoだけでチョチョイとできそう。

目指すこと

ここからは俺の勝手な妄想。
ずばり開発者体験の向上ではないか。

下記理由からそう思っている。

  • 型推論による不整合の防止
  • シンプルな定義

この体験を享受するにはモノリポであることが前提になりそう。
Zodを使えば型安全性は強化できるしシンプルに定義できて良さそう。
https://hono.dev/docs/guides/rpc

まだまだ出来ることは多いみたいなので追っていくぜぇぇぇ!!ぎゃああああ!!

Discussion