はじめに
Honoの使い始めはとても簡単です。プロジェクトをセットアップし、コードを記述し、ローカルサーバーで開発し、迅速にデプロイできます。異なるエントリポイントで、同じコードがどのランタイムでも動作します。Honoの基本的な使い方を見てみましょう。
スターター
各プラットフォームで利用できるスターターテンプレートがあります。次の「create-hono」コマンドを使用します。
npm create hono@latest my-appyarn create hono my-apppnpm create hono@latest my-appbun create hono@latest my-appdeno run -A npm:create-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などを使用して、トランスパイルを意識することなくTypeScriptでコードを記述できます。
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レスポンスを返す例です。
app.get('/api/hello', (c) => {
return c.json({
ok: true,
message: 'Hello Hono!',
})
})リクエストとレスポンス
パスパラメータ、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を返す
htmlヘルパーまたはJSX構文を使用してHTMLを記述できます。JSXを使用する場合は、ファイル名をsrc/index.tsxに変更し、設定を行います（各ランタイムで異なるため、確認してください）。以下はJSXを使用した例です。
const View = () => {
return (
<html>
<body>
<h1>Hello Hono!</h1>
</body>
</html>
)
}
app.get('/page', (c) => {
return c.html(<View />)
})生のレスポンスを返す
生のResponseを返すこともできます。
app.get('/', (c) => {
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!')
})JWTを使用したBearer認証や、CORS、ETagなど、便利な組み込みミドルウェアがあります。Honoは、GraphQL ServerやFirebase Authなどの外部ライブラリを使用したサードパーティミドルウェアも提供しています。そして、独自のミドルウェアを作成することもできます。
アダプター
静的ファイルやWebSocketの処理など、プラットフォームに依存する機能のためのアダプターがあります。たとえば、Cloudflare WorkersでWebSocketを処理するには、hono/cloudflare-workersをインポートします。
import { upgradeWebSocket } from 'hono/cloudflare-workers'
app.get(
'/ws',
upgradeWebSocket((c) => {
// ...
})
)次のステップ
ほとんどのコードはどのプラットフォームでも動作しますが、それぞれにガイドがあります。たとえば、プロジェクトのセットアップ方法やデプロイ方法などです。アプリケーションを作成する際に使用したいプラットフォームのページを参照してください！