🔥

bunとhonoで諸々の検証をやるための下準備をした話

2025/08/03に公開

最初はhonoについて気になってhonoを使おうと思い、honoについて調べてたらほかにもORMであればKyselyやDrizzle ORMなどいろいろ出てきたり、bunが出てきたりいろいろしたので、手始めにbun+honoで環境構築でもしてみようかなという感じです。
ただ「Hello world!」までやってもあれなので、それっぽくテンプレートのように作ります。なので、以下の項目をざっくり満たそうかなという感じです。

bun+honoでコードがかける
DB(Postgres)用にcompose.yamlを用意
テスト関連の簡単なコード
Lintとコードフォーマット

使用しているOSはWindows11です。
以下のリポジトリに今回作ったものを置いています。

bunをインストール & プロジェクトの用意

miseを使ってbunをインストールします。

mise install bun@latest
mise use -g bun@latest

バージョン確認 & インストール確認

bun --version

以下のコマンドでhonoベースのプロジェクトを作成します。

bun create hono@latest api

create-hono version 0.19.2
✔ Using target directory … api
✔ Which template do you want to use? bun
✔ Do you want to install project dependencies? Yes
✔ Which package manager do you want to use? bun
✔ Cloning the template
✔ Installing project dependencies
🎉 Copied project files
Get started with: cd api

DB(Postgres)用にcompose.yamlを用意

以下のようにcompose.yamlを生成AIに書いてもらってコマンドを叩くだけです。

version: "3.9"

services:
  postgres:
    image: postgres:16-alpine
    container_name: local-postgres
    restart: unless-stopped
    environment:
      POSTGRES_USER: app_user
      POSTGRES_PASSWORD: secret
      POSTGRES_DB: app_db
      TZ: Asia/Tokyo
    ports:
      - "5432:5432"
    volumes:
      - pg_data:/var/lib/postgresql/data

volumes:
  pg_data:

動作確認をします。

docker compose up -d
docker compose logs -f postgres
docker compose down -v

テスト関連の簡単なコード

あらかじめ用意しておくとそのあとが楽なのでここで準備してしまいます。
今回はvitestは導入しません。

まずは雑にAPIを作成します。

次にテストを書きます。

Lintとコードフォーマット

本当はBiomeを利用したいのですが、@hono/eslint-config相当のものが見つからないのでいったんはESLintとPrettierで無難にやることにしました。
Biomeへ@hono/eslint-configの設定を移植するのはどこか別の機会にやろうかなという感じです。

以下のコマンドでeslint、prettier関連のものをインストールします。

bun add -d eslint @hono/eslint-config prettier eslint-plugin-prettier eslint-config-prettier

eslintの設定ファイルeslint.config.mjsとprettierの設定ファイル.prettierrc.jsonを生成AIに雑に生成させます。

// eslint.confih.mjs
import hono from '@hono/eslint-config';
import tsPlugin from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import prettier from 'eslint-plugin-prettier';
import pluginJs from '@eslint/js';

export default [
  ...hono,
  pluginJs.configs.recommended,
  {
    files: ['**/*.ts'],
    languageOptions: { parser: tsParser },
    plugins: { '@typescript-eslint': tsPlugin },
    rules: {
      '@typescript-eslint/explicit-function-return-type': 'error',
      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
    },
  },
  {
    plugins: { prettier },
    rules: { 'prettier/prettier': 'warn' },
  },
];

# .prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 120
}

eslintに読ませる用のtsconfig.eslint.jsonを作成します。(生成AIにやってもらう)

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "noEmit": true
  },
  "include": [
    "src/**/*",
    "tests/**/*",
    "eslint.config.mjs"
  ]
}

package.jsonに追加するスクリプトも生成AIに雑に生成させます。

{
  "scripts": {
    "lint":   "bun x eslint . --ext .ts,.tsx --cache",
    "lint:fix": "bun run lint -- --fix",
    "format": "bun x prettier . --check",
    "format:write": "bun x prettier . --write"
  }
}

実行するとエラーになりました。

$ bun x eslint . --ext .ts,.tsx --cache
=============


WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.


* @typescript-eslint/typescript-estree version: 8.38.0
* Supported TypeScript versions: >=4.8.4 <5.9.0
* Your TypeScript version: 5.9.2


Please only submit bug reports when using the officially supported version.


=============

Oops! Something went wrong! :(

ESLint: 9.32.0

Error: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://typescript-eslint.io/getting-started/typed-linting for enabling linting with type information.
Parser: typescript-eslint/parser
Occurred while linting C:\Users\ybaba\git-repos\bun-hono-template\api\eslint.config.mjs
    at throwError (C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\@typescript-eslint\utils\dist\eslint-utils\getParserServices.js:38:11)
    at getParserServices (C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\@typescript-eslint\utils\dist\eslint-utils\getParserServices.js:27:9)
    at create (C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\@typescript-eslint\eslint-plugin\dist\rules\await-thenable.js:60:55)
arserServices.js:27:9)
    at create (C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\@typescript-eslint\eslint-plugin\dist\rules\await-thenablearserServices.js:27:9)
arserServices.js:27:9)
arserServices.js:27:9)
arserServices.js:27:9)
    at create (C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\@typescript-eslint\eslint-plugin\dist\rules\await-thenable.js:60:55)
    at Object.create (C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\@typescript-eslint\utils\dist\eslint-utils\RuleCreator.js:31:20)
    at createRuleListeners (C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\eslint\lib\linter\linter.js:1020:15)
    at C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\eslint\lib\linter\linter.js:1152:7
    at Array.forEach (<anonymous>)
    at runRules (C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\eslint\lib\linter\linter.js:1086:31)
    at #flatVerifyWithoutProcessors (C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\eslint\lib\linter\linter.js:2102:4) 
    at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (C:\Users\ybaba\git-repos\bun-hono-template\api\node_modules\eslint\lib\linter\linter.js:2190:43)

TypeScriptのバージョンを下げちゃいます。

bun rm typescript
bun add -d -E typescript@5.8.3

現状のコードに対して以下のコマンドを叩いて確認します。

bun run lint:fix
bun run format:write

最後に

かなり雑にやったので、本当は1つ1つちゃんとみたいですが今回はざっくり触れたのでこれで良しとします。

bunをインストール & プロジェクトの用意

DB(Postgres)用にcompose.yamlを用意

テスト関連の簡単なコード

Lintとコードフォーマット

最後に

Discussion