JavaScriptではなくTypeScriptで開発することが多く、そのためのセットアップの手間がそれなりに必要となります。BunというNode.jsランタイムがデフォルトでTypeScriptに対応しているので、環境構築してみました。
ついでにBiomeを使ってLinter、Formatterをセットしていきます。
Bunのインストール
macOSにBunをインストールをインストール方法はいくつかありますが、本記事ではHomebrewでインストールしていきます。
$ brew install oven-sh/bun/bunそれ以外のインストール方法については公式の記事を参照してください。
Biomeのインストール
macOSにBiomeをインストールするにはHomebrewを使います。
$ brew install biomebiomeコマンドが使用可能になるため、プロジェクト個別にBiomeパッケージをインストールしません。
プロジェクトの作成
Bunでプロジェクトを作成する方法にはbun initとbun createの2つがあります。テンプレートを元にプロジェクトを作成する場合はbun createを使用し、空のプロジェクトを作成する場合はbun initを使用します。
今回は空のプロジェクトを作成するので、bun initを使用します。
$ mkdir bun-demo
$ cd bun-demo
$ bun init
bun init helps you get started with a minimal project and tries to guess sensible defaults. Press ^C anytime to quit
package name (bun-demo):
entry point (index.ts): src/index.ts
Done! A package.json file was saved in the current directory.
+ index.ts
+ .gitignore
+ tsconfig.json (for editor auto-complete)
+ README.md
To get started, run:
bun run index.ts質問は2つで、パッケージ名（package name）とエントリーポイント（entry point）です。特に変更する必要がなければそのままエンターキーで進めます。
今回はテストケースも作成するので、エントリーポイントはsrc/index.tsにします。
Biomeをセットアップする
Biomeを使用可能にするためのセットアップを行います。Visual Studio Codeで開発する場合、Biomeプラグインを使うのが簡単です。
Preferences>Settingsで設定を開き、Workspaceを選択後に右上のOpen Settings (JSON)をクリックすると、プロジェクトルートに.vscode/settings.jsonが作成されます。
このファイルに以下のように記述します。
{
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
},
"editor.codeActionsOnSave": {
"source.organizeImports.biome": "explicit"
}
}環境によっては一部の設定が不要となる場合がありますが、
"editor.defaultFormatter": "biomejs.biome",で、デフォルトのフォーマッターをBiome拡張機能に変更し、
"editor.formatOnSave": true,で、変更を保存するときにフォーマットするようにします。
これらの設定はTypeScriptのファイルだけに適用したいため、
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
},のように[typescript]内に書くようにしています。
また、変更を保存するときにインポートを再編成するため、
"editor.codeActionsOnSave": {
"source.organizeImports.biome": "explicit"
}の設定を行っています。
プログラムを作成して実行する
実際にプログラムを作成して実行してみます。
この後テストしやすいようにmain関数からロジックを分けておきます。
export function greet(name: string): string {
return `Hello, ${name}!`;
}greet関数をテストしておきます。Bunが提供するテスティングフレームワークを使ってテストします。
import { expect, test } from "bun:test";
import { greet } from "../src/greet";
test("should return hello world", () => {
expect(greet("world")).toBe("Hello, world!");
});テストはbun testコマンドで実行可能です。
$ bun test
bun test v1.1.7 (b0b7db5c)
test/greet.spec.ts:
✓ should return hello world [0.41ms]
1 pass
0 fail
1 expect() calls
Ran 1 tests across 1 files. [57.00ms]MochaやJestと遜色ない感じで使えます。モック機能もあるのでサードパーティ製パッケージを使う必要はなさそうです。
作成したgreet関数を使ってmain関数を書きます。
import { greet } from "./greet";
function main(args: string[] = process.argv.slice(2)): void {
console.log(greet("world"));
}
main();プログラムの実行はbun runコマンドを使用します。
$ bun run src/index.ts
Hello, world!実行するエントリーポイントを指定して実行します。
Lintの実行
フォーマットは変更の保存時に自動で行われるため、Lintを使う必要はほぼないと思いますが、一応Lintコマンドも確認しておきます。
LintはBiomeを使用します。
$ biome lint src/**/*.ts
Checked 2 files in 4ms. No fixes needed.Formatterでフォーマットしているので修正が必要な箇所はありませんでした。
まとめ
Bunを使えば、コマンドのインストールを除けばかなり簡単にプロジェクトをセットアップできます。Biomeもセットアップが簡単なので
速度をウリにしている部分もありますが、もう少し大規模なアプリケーションを使わないとなんとも言えないと思いますし、ネットワークなどの方が大きなボトルネックになるので、Node.jsやDenoなどとそれほど際はないかもしれません。
今回作成したプロジェクトは以下になります。
