始めましょう!
Hono を使うのはとても簡単です。 プロジェクトを作成し、コードを書き、開発サーバーを立ち上げ、素早くデプロイ出来ます。 エントリポイントが違うだけの同じコードが全てのランタイムで動作します。 では基本的な Hono の使い方を見ていきましょう!
スターター
それぞれのプラットフォームでスターターテンプレートが用意されており、 "create-hono" コマンドで使用できます。
npm create hono@latest my-appyarn create hono my-apppnpm create hono@latest my-appbun create hono@latest my-appdeno init --npm hono@latest my-app次にどのテンプレートを使用するか質問があります。 ここでは Cloudflare Workers 向けのサンプルを選びました。
? Which template do you want to use?
aws-lambda
bun
cloudflare-pages
❯ cloudflare-workers
deno
fastly
nextjs
nodejs
vercelテンプレートが my-app に展開されたので依存関係をインストールします。
cd my-app
npm icd my-app
yarncd my-app
pnpm icd my-app
bun iパッケージのインストールが完了したら、開発サーバーを起動してみましょう。
npm run devyarn devpnpm devbun run devHello World
Cloudflare Workers 開発ツールの "Wrangler" 、 Deno 、 Bun などを使用しトランスパイルを意識することなくコードを書けます。
src/index.ts に Hono を使用した最初のアプリケーションを作っていきます。 以下の例は Hono スターターアプリケーションです。
import と 最後の export default はランタイムによって違うことがあります。 しかし、全てのアプリケーションのコードはどこでも同じです。
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => {
return c.text('Hello Hono!')
})
export default app開発サーバーを起動し、ブラウザで http://localhost:8787 にアクセスします。
npm run devyarn devpnpm devbun run devJSON を返す
JSON を返すのは非常に簡単です。 以下は /api/hello の GET リクエストを処理して application/json の Response を返す例です。
app.get('/api/hello', (c) => {
return c.json({
ok: true,
message: 'Hello Hono!',
})
})Request / Response
パスパラメータ、 URL クエリを取得し、レスポンスヘッダを追加する例です。
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}`)
})GET のみならず POST 、 PUT 、 DELETE も簡単に処理できます。
app.post('/posts', (c) => c.text('Created!', 201))
app.delete('/posts/:id', (c) =>
c.text(`${c.req.param('id')} is deleted!`)
)HTML を返す
You can write HTML with the html Helper or using JSX syntax. If you want to use JSX, rename the file to src/index.tsx and configure it (check with each runtime as it is different). Below is an example using JSX.
const View = () => {
return (
<html>
<body>
<h1>Hello Hono!</h1>
</body>
</html>
)
}
app.get('/page', (c) => {
return c.html(<View />)
})生の Response を返す
生の Response を返すことも出来ます。
app.get('/', () => {
return new Response('Good morning!')
})ミドルウェアを使う
ミドルウェアが面倒な作業を肩代りしてくれます。 例えば、 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!')
})Bearer や JWT 認証、 CORS や ETag などの便利なミドルウェアが含まれています。 また、 GraphQL サーバーや Firebase Auth などの外部ライブラリを使用したサードパーティのミドルウェアも提供します。 そして、ミドルウェアを作ることも出来ます。
アダプタ
静的ファイルや WebSocket の処理など、プラットフォームによって異なる機能を実装するためのアダプタがあります。 例えば、 WebSocket を Cloudflare Workers で扱うためには hono/cloudflare-workers をインポートします
import { upgradeWebSocket } from 'hono/cloudflare-workers'
app.get(
'/ws',
upgradeWebSocket((c) => {
// ...
})
)次のステップ
ほとんどのコードはどのプラットフォームでも動きますが、それぞれのガイドがあります。 例えば、プロジェクトのセットアップ方法やデプロイ方法です。 アプリケーションの作成に使用したいプラットフォームを参照してください。