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の操作を忘れてしまい焦りました 笑
深夜に確認するものじゃ無いですね！