🚀

TypeScript + Biome + Bun + Zod + Vitestのボイラーテンプレートを作成

2024/09/13に公開

TypeScript

TypeScript + Biome + Bun + Zod + Vitestを利用したボイラーテンプレートを作成しました。

きっかけ

これまでNode.js上でプログラムを作成していたのですが、Bunの存在を知り、他のランタイム環境も試してみたくなったため、今回のテンプレートを作成しました。

各バージョン

プログラミング言語：TypeScript@5.6.2
静的解析ツール：Biome@1.8.3
JavaScriptラインタイム：Bun@1.1.27
スキーマバリデーション：Zod@3.23.8
テストフレームワーク：Vitest@2.0.5

環境構築

Bunのインストール

公式サイトにインストール方法が記載されています。今回はHomebrewを利用しました。

alt text

TypeScriptのインストール

bun init コマンドを実行して環境を作成します。entry pointとして src/index.ts を指定しました。

bun init
bun init helps you get started with a minimal project and tries to guess sensible defaults. Press anytime to quit

package name (your project name):
entry point (index.ts): src/index.ts

Done! A package.json file was saved in the current directory.
 + src/index.ts
 + .gitignore
 + tsconfig.json (for editor auto-complete)
 + README.md

To get started, run:
  bun run src/index.ts

作成されたファイルを確認します。

tree -I node_modules -L 2 ./
./
├── README.md
├── bun.lockb
├── package.json
├── src
│   └── index.ts
└── tsconfig.json

tsconfig.json の内容も確認します。公式にBunのベストプラクティスとして紹介されていた設定をそのまま利用しています。

{
  "compilerOptions": {
    // Enable latest features
    "lib": ["ESNext", "DOM"],
    "target": "ESNext",
    "module": "ESNext",
    "moduleDetection": "force",
    "jsx": "react-jsx",
    "allowJs": true,

    // Bundler mode
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,

    // Best practices
    "strict": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": true,

    // Some stricter flags (disabled by default)
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noPropertyAccessFromIndexSignature": false
  }
}

実行してみる

成功しました。

Bun src/index.ts
Hello via Bun!

生成されたコードは以下の通りです。

console.log("Hello via Bun!");

Bun init でインストールしたTypeScriptのバージョンは5.0.0でしたので、最新バージョンにアップデートします。

bun add typescript@latest

installed typescript@5.6.2 with binaries:
 - tsc
 - tsserver

[142.00ms] done

package.jsonのTypeScriptのバージョンが ^5.6.2 になっていることを確認しました。バージョンが変更されても困るので、^を削除して5.6.2に固定しました。

また、TypeScriptの定義ファイルもインストールします。

# To install the TypeScript definitions for Bun's built-in APIs, install @types/bun.
bun add -d @types/bun

Biomeのインストール

公式を確認するとbunコマンドでのインストール方法があったのでこれを利用します。

alt text

VSCodeでBiomeを検索し拡張機能をインストールします。

biome.jsonを作成するために bunx biome initを実行

bunx biome init

Welcome to Biome! Let's get you started...

Files created

  - biome.json
    Your project configuration. See https://biomejs.dev/reference/configuration

Next Steps

  1. Setup an editor extension
     Get live errors as you type and format when you save.
     Learn more at https://biomejs.dev/guides/integrate-in-editor/

  2. Try a command
     biome check  checks formatting, import sorting, and lint rules.
     biome --help displays the available commands.

  3. Migrate from ESLint and Prettier
     biome migrate eslint   migrates your ESLint configuration to Biome.
     biome migrate prettier migrates your Prettier configuration to Biome.

  4. Read the documentation
     Find guides and documentation at https://biomejs.dev/guides/getting-started/

  5. Get involved with the community
     Ask questions and contribute on GitHub: https://github.com/biomejs/biome
     Seek for help on Discord: https://discord.gg/BypW39g6Yc

biome.jsonが生成された。

{
	"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}

Biomeのデフォルトの設定はこちららしい

"indentStyle": "tab" なのですが、個人的には "space" なので変更しました。

{
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "ignore": [],
    "attributePosition": "auto",
    "indentStyle": "tab",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "arrowParentheses":"always",
      "bracketSameLine": false,
      "bracketSpacing": true,
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "semicolons": "always",
      "trailingCommas": "all"
    }
  },
  "json": {
    "formatter": {
      "trailingCommas": "none"
    }
  }
}

コマンドについてはREADME.mdを参考にしてください。

Biomeの設定をVSCodeの設定を追加します。
設定を追加することで複数人での開発の際に役にたちます。

// .vscode/settings.json
{
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit",
    "quickfix.biome": "explicit"
  }
}

// .vscode/extensions.json
{
  "recommendations": ["biomejs.biome"]
}

VSCodeの拡張機能を共有する目的についてはこちらの記事が参考になります。

Zodをインストール

こちらもbunでのインストール方法が紹介されていたのでこれを採用します。

alt text

導入だけなので簡単ですね。
Zodもバージョンを固定するために ^3.23.8 → 3.23.8 に修正

Vitestをインストール

こちらもbunでのインストール方法が紹介されていたのでこれを採用します。

alt text

バージョンを固定にするために ^2.0.5 → 2.0.5 に修正

Vitestの検証とZodの検証をするために src/index.tsのコードを修正します。

実コード

// src/index.ts
import { z } from 'zod'

// 引数のスキーマを定義します。数値であることを検証します。
const numberSchema = z.number();

export function sum(a: number, b: number): number {
  // 引数が数値であるかを検証します
  numberSchema.parse(a);
  numberSchema.parse(b);

  // 検証が成功した場合、合計を計算します
  return a + b;
}

テストコード

// src/index.test.js
import { expect, test } from 'vitest'
import { sum } from './sum.js'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

テストも問題なく実行できました。

$ bun run vitest 

 DEV  v2.0.5 ../typescript-biome-bun-zod-vitest

 ✓ src/index.test.ts (1)
   ✓ adds 1 + 2 to equal 3

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  00:06:53
   Duration  190ms (transform 49ms, setup 0ms, collect 44ms, tests 1ms, environment 0ms, prepare 43ms)


 PASS  Waiting for file changes...
       press h to show help, press q to quit