Hono のクイックスタート: 簡単なセットアップガイド (一口サイズの記事)-jsチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-10-12 06:20:02

オリジナル

339 人が閲覧しました

導入

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

Quick Start with Hono: Simple Setup Guide (Bite-sized article)

ホノって何？

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

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

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

Quick Start with Hono: Simple Setup Guide (Bite-sized article)

設定

環境をセットアップする際、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
})

ログイン後にコピー

Quick Start with Hono: Simple Setup Guide (Bite-sized article)