はじめに

皆さんはDenoでWebサーバを立てるとき、どんなライブラリを使っているでしょうか。
スタンダードライブラリを使う人もいるでしょうし、Freshなどのフルスタックフレームワークを利用する人もいるでしょう。
また、OakやHonoなどをつかう人もいると思います。
今回はそのHonoの使い方について解説します

インストール

あら不思議、Denoではインストールは必要ありません。
適当なディレクトリを作ってmain.js とかの名前でファイルを作成してください。
そして、以下のように書いてみましょう。

@js
import { serve } from 'https://deno.land/std/http/server.ts'
import { Hono } from 'https://deno.land/x/hono/mod.ts'

const app = new Hono()

app.get('/', (c) => c.text('Hello, world!'))

serve(app.fetch)

では、シェルを開いてdeno run -A main.jsと入力してみましょう。
すると、HTTPサーバが立ち上がったと思いますので、http://localhost:8000/ などにアクセスしてみましょう。
すると、Hello, world! と表示されましたね。
では、このコードを解説していきます。

@js
import { serve } from 'https://deno.land/std/http/server.ts'

このラインでは、スタンダードライブラリのHTTPサーバをインポートしています。
これを使ってHTTPサーバを立ち上げるわけです。

@js
import { Hono } from 'https://deno.land/x/hono/mod.ts'

このラインでは、Honoをインポートしています。
これを使って簡単にルーティングを記述できます。

@js
const app = new Hono()

app という変数でHonoのクラスを作成しています。

@js
app.get('/', (c) => c.text('Hello, world!'))

では、Honoで、GET / のようなリクエストが来たときのハンドラを記述しています。
アロー関数が見にくいという方もいらっしゃると思うので、これを書き換えると

@js
app.get('/', function (c) {
  return c.text('Hello, world!')
})

こうなるとわかりやすいですが、ハンドラでは、第一引数にc 、つまりコンテキストをとっています。
そして、テキストを戻り値にしているわけです。
簡単なコードですね。

@js
serve(app.fetch)

このラインではHonoをサーバに渡しています。
これでサーバが立ちますね。

Honoのコンテキストについて解説

c.text

単にテキストを返します。

@js
return c.text(/* your text here */)

c.json

オブジェクトをJSONに変換して出力してくれます。もちろんヘッダも勝手に書いてくれます。

@js
return c.json(/* your object here */)

c.html

HTMLを返します。ヘッダも変えます。

@js
return c.html(/* your html here */)

c.req

c.req.header(HEADER_NAME)

ヘッダを取得。

c.req.param(PARAM_NAME)

パラメータを取得。
例えば/:id/comments の:id が欲しい時はc.req.param('id')

c.req.query(QUERY_NAME)

クエリを取得。
/?hello=world
みたいなやつのことです。

あとはHonoのドキュメントを読んでくだされ。

Honoのイベントハンドラ

app.use()

ミドルウェアなどに使う。

@js
app.use('*', async(_, next) => await next())

app.all()

POSTやGETなどの全メソッドで働くハンドラ。

app.get()

GETリクエストの時に働くハンドラ。

app.post()

POSTリクエストの時に働くパンドラ。

などなど…

終わりに

Honoにはまだまだたくさん機能があります。
ぜひみなさんも使って見てください。

Hono.dev