Hono のクイック スタート: 簡単なセットアップ ガイド (一口サイズの記事)

導入

Hono という Web フレームワークについて聞いたことがありますか?
最近、さまざまなメディアで「ほの」という名前を見かけ、自分でも試してみることにしました。
今回は、自分用のメモも兼ねて、Hono の概要と簡単な初期設定ガイドを紹介します。

ホノって何？

Hono は、TypeScript 上に構築された軽量で高速な Web フレームワークです。
私はまだ初心者で、そのすべての機能をまだ調べていませんが、Hono の主な強みは、高速かつ軽量のルーティングとマルチランタイムのサポートのようです。同じコードベースを使用して、Cloudflare、Deno、Bun、AWS、Node.js などのさまざまな JavaScript ランタイム間でシームレスに動作します。

通常の Web 開発作業では、MERN スタックをよく使用し、バックエンド フレームワークとして主に Express に依存しています。ただし、Hono は Express に比べて TypeScript の互換性と柔軟性が優れているようで、近い将来主要なフレームワークの 1 つになる有望な候補となっています。

さらに、Web フレームワークの分野では比較的新しいプレイヤーである Hono には多くの可能性があり、今後数年間でさまざまなプラットフォームや環境で使用される次世代フレームワークとしての地位を確立する可能性が十分にあります。

設定

環境をセットアップする際、Hono は簡単に開始できる便利なテンプレートを提供します。今回は、npm を使用して始めましょう。

まず、次のコマンドを実行します:

npm create hono@latest hono-myapp

コマンドを実行すると、テンプレートを選択するように求められます。プロジェクトの環境に最も適したものを選択してください。この記事では、nodejs テンプレートを選択します。

インストールが完了すると、必要最低限​​の項目が含まれたプロジェクトファイルが作成されるので、cdしてnpm run devを実行します。

エラーや問題がない場合は、localhost を開いて Hello World が表示されるかどうかを確認してください。

単純なルートの追加

これまではテンプレート ファイルを実行しただけなので、少しコードを追加してプロジェクトを強化しましょう。次に、Hono を使用して、動的パラメーターを受け入れるルートを作成します。先ほど作成したディレクトリの src フォルダー内に、index.ts ファイルがあるはずです。このファイルを編集し、app.get('/hello/:name') のようなルートを追加して、name というパス パラメーターを処理し、その値を応答で返します。

次のコード スニペットを既存のコードに追加します:

app.get('/branches/:name', (c) => {
  const name = c.req.param('name')
  return c.text(`Hello, ${name}!`)
});

:name 部分は、URL 内の値を動的に取得できるようにするパス パラメーターです。 c.req.param('name') を使用すると、:name の値を抽出し、それを応答に Hello, {name}!.

として表示できます。

サーバーが実行されている状態で、次の URL にアクセスしてみてください:

http://localhost:3000/branches/John → 表示: こんにちは、ジョン!
http://localhost:3000/branches/Alice → 表示: こんにちは、アリス!

このようにして、名前の部分を動的に変更して、入力に基づいて異なるメッセージを表示できます。

完全なコードの最終バージョンは次のとおりです:

import { serve } from '@hono/node-server'
import { Hono } from 'hono'

const app = new Hono()

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

app.get('/branches/:name', (c) => {
  const name = c.req.param('name')
  return c.text(`Hello, ${name}!`)
})

const port = 3000
console.log(`Server is running on port ${port}`)

serve({
  fetch: app.fetch,
  port
})

結論

当初は Hono についてもう少し深く掘り下げる予定でしたが、この記事は Hono の概要とセットアップ プロセスに焦点を当てて短く簡潔にすることにしました。そのため、内容が少し中途半端に感じられるかもしれません。

ただし、私は Hono の実験を継続し、将来新しい洞察やヒントを発見した場合は、必ずフォローアップの投稿で共有するつもりです。

最後まで読んでいただきありがとうございました。今後の記事もよろしくお願いします。今後ともよろしくお願いいたします!

以上がHono のクイック スタート: 簡単なセットアップ ガイド (一口サイズの記事)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。