Bun+Honoは今日初めて触ったので備忘録を残します。
Reactはほとんど触ってないのでちょっとしたことに躓いて牛歩状態です。
この記事はチュートリアルなコードと、参照したドキュメントへのリンクを含めて後で辿れるように書きました。
試した環境
- MacOS Sonoma 14.3
- Bun 1.0.6
- Hono 4.0.4
Bun インストール
コマンドラインからインストールしました。
sudoは使わないのでたぶん怖くない筈です。
$ curl -fsSL https://bun.sh/install | bash
削除したい時はホームフォルダの.bunを削除すれば良いそうです。
$ rm -rf ~/.bun
Project作成
ドキュメントに習ってHonoのプロジェクトを作成
$ bunx create-hono my-app
何も知らずにコマンドを叩くと12からあるTemplateを選べと言われてドン引きしました。
今回はbunを選択。
$ bunx create-hono my-app
create-hono version 0.4.0
✔ Using target directory … my-app
✔ Which template do you want to use? › bun
cloned honojs/starter#main to /Users/o2/work/tmp/my-app
✔ Copied project files
VSCodeでプロジェクトを開くとあちこちアンダーラインが引かれます。
最初にライブラリ導入しないとね。
無事Hello Hono!と表示できました。👏
$ code my-app
$ cd my-app
$ bun i
$ bun run dev
$ bun run --hot src/index.ts
Started server http://localhost:3000
SSGを試す
ドキュメントにあるようにSSGを設定。
import app from "./src/index";と設定。
(なお、この書き方だとindex.*, index/* と様々なファイルを参照するそうです。)
import { toSSG } from "hono/bun";
import app from "./src/index";
toSSG(app)
実行するとstaticフォルダにファイルが出力できました。
$ bun build.ts
$ tree --gitignore
.
├── README.md
├── build.ts
├── bun.lockb
├── package.json
├── src
│ └── index.ts
├── static
│ └── index.txt
└── tsconfig.json
3 directories, 7 files
ssgParamsで複数のページを出力する
同ページのドキュメントのssgParamsを試していきます。
ここでは静的ページの作成にはコードに直書きのコンテンツデータを利用します。
最初にjsxを利用しますので現在のindex.tsのファイルの拡張子を変更します。
$ mv index.ts index.tsx
import { Hono } from 'hono'
import { ssgParams } from 'hono/ssg'
const app = new Hono()
const ShopsData = [
{ id: "1", name: "hoge",},
{ id: "2", name: "fuga" }
]
function getShop(id: string){
return ShopsData.filter(shop => id == shop.id)
}
app.get(
'/shops/:id',
ssgParams(async () => {
return ShopsData.map((shop) => ({ id: shop.id }))
}),
async (c) => {
const shops = await getShop(c.req.param('id'))
if (shops.length < 1) {
return c.notFound()
}
const shop = shops[0]
return c.render(
<div>
<h1>{shop.name}</h1>
</div>
)
}
)
export default app
package.jsonの.tsを.tsxに修正して実行
{
"scripts": {
"dev": "bun run --hot src/index.ts"
↓
"dev": "bun run --hot src/index.tsx"
},
...
$ bun run dev
localhost:3000/shops/2にアクセス
shops/[id]にIDを指定してページにアクセスできることが確認できます。
再度SSGを出力しなおします。
$ bun build.ts
$ tree --gitignore
.
├── README.md
├── build.ts
├── bun.lockb
├── package.json
├── src
│ └── index.tsx
├── static
│ ├── index.txt
│ └── shops
│ ├── 1.html
│ └── 2.html
└── tsconfig.json
staticフォルダに設定した[id].htmlのファイルが出力できていることが確認できました。
上記の出力まで見れば何を行う処理なのか解りやすいですね。
const ShopsData = [
{ id: "1", name: "hoge",},
{ id: "2", name: "fuga" }
]
app.get(
'/shops/:id',
ssgParams(async () => {
return ShopsData.map((shop) => ({ id: shop.id }))
}),
ここでの肝ですが、
-
/shops/:idではapp.getにパラメータidを取得するように指定 -
ssgParamsに生成するページのIDをShopsDataを展開して与えています
これによりstaticフォルダに出力するファイルを制御できます。
静的ファイルへのリンクに対応する
import { Hono } from 'hono'
import { ssgParams } from 'hono/ssg'
const app = new Hono()
const ShopsData = [
{ id: "1", name: "hoge",},
{ id: "2", name: "fuga" }
]
function getShop(id: string){
return ShopsData.filter(shop => id == shop.id)
}
app.get(
'/shops/:id',
ssgParams(async () => {
return ShopsData.map((ShopsData) => ({ id: ShopsData.id }))
}),
async (c) => {
const shops = getShop(c.req.param('id'))
if (shops.length < 1) {
return c.notFound()
}
const shop = shops[0]
const contents = (
<ul>
{ ShopsData.map( shop => (<li><a href={
Bun.env.NODE_ENV === "development" ? `/shops/${shop.id}` : `/shops/${shop.id}.html`
}>{shop.name}</a></li> )) }
</ul>
)
return c.html(`
<div>
<h1>${shop.name}</h1>
</div>
${contents}
`)
}
)
export default app
package.jsonにbuildコマンドを追記
{
"scripts": {
"dev": "bun run --hot src/index.tsx",
"build": "NODE_ENV='production' bun build.ts"
},
...
ここではコマンドをbuild.tsではなくpackage.jsonに追記したbuildコマンドを実行します。
この修正により出力するファイルとbun run devで実行時と静的ページを閲覧してもリンクが機能します。
$ bun run build
$ bun run dev
これでSSGマスター
まだまだ機能は沢山ありますが基本のループとIF文が書けるようになりました。
Bun+Honoを試した感想としては、随分簡単に静的ファイルの出力処理が書けるのだなと思いました。
これでとっかかりが出来たのであとはドキュメントを読み進めるだけです。
初学者ですのでもっと良い方法等あれば是非コメントを残していただければ幸いです。