Honoとは

最近、ちまたで人気のWebフレームワークHono🔥
少しづつYoutubeでも取り上げられたりと人気が出てきています。

日々最新のバージョンがリリースされ、色々試していくうちにReactと一緒に開発している日本語での情報が少ないと思い自分の備忘録用に書いていく。

基本的な開発環境構築に関しては、以下の記事を参考にしてもらうと良いと思います。

環境構築

ファイルの作成

npm create hono@latest my-app

設定の選択

? Which template do you want to use?
    aws-lambda
    bun
    cloudflare-pages
❯   cloudflare-workers
    deno
    fastly
    lagon
    nextjs
    nodejs
    vercel

プロダクトが作成されたら、プロダクトのディレクトリへ移動して、以下２点をインストールします。

npm i  react react-dom
npm i --save-dev @types/react @types/react-dom

インストールが完了したら、package.jsonの中身に上記の内容がきちんと保存できているか確認してください。
バージョンに関しては記事を作成した時点での最新のものになっています。

package.json

{
  "scripts": {
    "dev": "wrangler dev src/index.ts",
    "deploy": "wrangler deploy --minify src/index.ts"
  },
  "dependencies": {
    "hono": "^4.3.11",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20240403.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "wrangler": "^3.47.0"
  }
}

今回はファイル名を.tsではなく.tsxを使用したいので、ファイル名を変更します。
それに伴い、package.jsonも併せて変更させてください。

いざ実装へ

前述の変更が終わったら、初期状態のコードから以下のコードに変えてみましょう。

index.tsx

import { Hono } from 'hono'
import { renderToString } from 'react-dom/server'
import React from 'react'


const app = new Hono()

app.get('/', (c) => {
  return c.html(
    renderToString(
    <html>
      <body>
        <h1>Hello</h1>
      </body>
    </html>
    )
  )
})

export default app

上記のコードに変更したら、今度は、npm run devを実行して、http://localhost:8787が立ち上がり以下の挙動が出るか確認しましょう。

画像のように無事Helloと表示されてれば無事実行されていることが確認できます。

補足

今回の内容は下記のようなディレクトリ構成がになります。

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── src
│   └── index.tsx
├── tsconfig.json
└── wrangler.toml

感想

これを行い始めた頃、どうしたことか、npm i --save-dev @types/react @types/react-domの操作を忘れてしまい焦りました　笑
深夜に確認するものじゃ無いですね！

HonoでReactをやる

Honoとは

環境構築

いざ実装へ

補足

感想