ホームニューステックニュース最高の TypeScript 開発環境を最速で作っていくよ 2025 秋

最高の TypeScript 開発環境を最速で作っていくよ 2025 秋

By インモビ運営局

2025年9月20日

0

この記事では、TypeScript の開発環境を最速で整えます。単に動く環境ではなく、最低限必要なツールも一通りそろえていきます。(2025 年秋時点の情報です)

この記事で作る開発環境について

この記事のゴール

bun run コマンドで TypeScript ファイルを実行できる
bun repl コマンドで REPL を起動して TypeScript を実行できる
bun tsc --noEmit コマンドで（厳しい）型チェックができる
TypeScript Language Server でコード補完と型チェックができる
bun biome コマンドでフォーマットとリントができる
Biome の拡張機能でリントが開発中にも実行される
Biome の拡張機能でフォーマットと自動修正が保存時に自動で実行される
bun test コマンドでテストコードを実行できる
Bun の拡張機能でテストをソースコードから実行できる
Bun の拡張機能でテストをデバッグモードで実行できる

こんな人におすすめ

とりあえず TypeScript を快適にコーディングできて動かせる環境が欲しい！

こんな人にはあまりおすすめしない

OS？ターミナル？ディレクトリ？概念がまったくわからない～

-> よーく調べて理解しながら進めてください。事故が起きても自己責任です。
英語がまったく読めない～

-> インストールするツールの公式サイトが英語です。翻訳ツールを使ったり日本語の記事を参考にしたりして頑張ってください。
Node.js がいい！ Deno がいい！ ESLint がいい！

-> 入れるツールや手順がちょっと違います。一部は参考になるかもしれませんが、それ用の記事を探した方がいいかもしれません。
Next.js とか Hono とか、特定のフレームワークを使ってみたい！

-> 各フレームワークの公式のクイックスタートをお勧めします。この記事も部分的には参考になるかもしれません。
ビルドしてデプロイまでできるようにしてほしい！

-> ちょっとこの記事には荷が重いです。途中までなら参考になるかもしれません。

なぜ Bun? なぜ Biome?

Bun は JavaScript 実行環境・パッケージマネージャ・TypeScript 実行環境・バンドラー・テストランナーのオールインワンツールです。
- Node.js + pnpm + tsx + vite + vitest のような、個別のパッケージを集めた構成よりも初期構築コストが下がります。
- Bun のパッケージの管理方法やビルトイン API は Node.js 互換なので、 Deno に比べてインターネット上の資産が多く簡単に使えます。
- プロジェクトの安定性に不安があるといわれているようですが、手元でサクッと試すだけなら十分です。
Biome は高速オールインワンのフォーマッター・リンターです。
- Bun にフォーマッターやリンターの機能はありません。さすがにつらいので入れます。
- 従来の ESLint + Prettier をこれ 1 つで置き換えられます。
- ESLint に比べるとカスタマイズ性は劣りますが、なにより設定が簡単です。

1. VS Code をインストール

VS Code がインストールされていない場合、公式サイトから VS Code をインストールしてください。
Cursor など VS Code フォークのエディタがインストールされていればそれを使っても構いません。

https://code.visualstudio.com/

日本語化はお好みで。

2. Bun をインストール

Bun を公式サイトに従ってインストールします。

https://bun.com/docs/installation

3. プロジェクトを作成

お好みの名前の空ディレクトリ (フォルダ) を用意します。
慣習として、プロジェクトのディレクトリ名は小文字英数とハイフン (-) のみにすることをお勧めします。

TERMINAL

mkdir setup-typescript-2025-autumn

用意したディレクトリを VS Code で開きます。

TERMINAL

code setup-typescript-2025-autumn

VS Code 内でターミナルを開きます。
Ctrl + Shift + ` またはウィンドウ上部のツールバーにある Terminal から開けます。

ターミナルが開いたら、bun init を実行して Bun の新規プロジェクトをセットアップします。プロジェクトの種類は Blank を選択してください。

このコマンドが command not found のエラーで実行できない場合、PATH が通っていない可能性があります。公式ドキュメントに従って PATH の設定を試してみてください。

4. TypeScript の設定

bun init で生成される tsconfig.json の型チェック設定は少し緩いので、厳しくしておきましょう。以下のコマンドを実行して、tsconfig/bases の共有プリセットを開発依存にインストールします。

TERMINAL

bun add -D @tsconfig/bun @tsconfig/strictest

tsconfig.json を以下の内容に置き換えます。

tsconfig.json

{
    "extends": ["@tsconfig/bun", "@tsconfig/strictest"],
    "exclude": ["node_modules", "out", "dist"]
}

設定の優先順位は bun strictestです (後勝ち)。

5. Biome の導入

以下のコマンドを実行し、Biome を開発依存にインストールします。

TERMINAL

bun add -D @biomejs/biome

bun biome init コマンドで推奨の設定ファイルを作成します。

作成された設定ファイル biome.json を修正します。
フォーマット対象外のファイルを指定しつつ、癖のある設定があるのでお好みで変更します。

biome.json

  {
    "files": {
-       "ignoreUnknown": false
+       "ignoreUnknown": false,
+       "includes": ["**", "!**/node_modules", "!**/out", "!**/dist"]
    },
      "formatter": {
          "enabled": true,
-         "indentStyle": "tab"
+         "indentStyle": "space",
+         "indentWidth": 4,
+         "lineWidth": 120
       },
       "javascript": {
           "formatter": {
-              "quoteStyle": "double"
+              "quoteStyle": "single"
           }
       },
  }

6. VS Code 拡張機能の導入

Biome の拡張機能 を導入して、開発中にリンターのルール違反を検知できるようにします。以下の VS Code マーケットプレイスからインストールできます。

インストールできたら、さらにファイル保存時に Biome を使って自動フォーマットするように設定します。
今回はプロジェクト配下に .vscode/settings.json を作成しましょう。

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

これで、.ts ファイルなどを編集して Ctrl + S で保存すると自動でフォーマットされるようになります。
VS Code の自動保存設定をオンにしている場合、自動保存ではフォーマットされないので注意してください。

さらに Bun の拡張機能 も導入して、テストコードが簡単に実行できるようにしましょう。以下の VS Code マーケットプレイスからインストールできます。

インストールできたら、さらにテストコードをデバッグ実行できるように設定します。Bun 拡張機能のページの指示に従って、プロジェクト配下に .vscode/launch.json を作成しましょう。

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "bun",
      "request": "launch",
      "name": "Debug Bun",

      
      "program": "${file}",

      
      "args": [],

      
      "cwd": "${workspaceFolder}",

      
      "env": {},

      
      "strictEnv": false,

      
      
      
      "watchMode": false,

      
      "stopOnEntry": false,

      
      "noDebug": false,

      
      "runtime": "bun",

      
      
      "runtimeArgs": [],
    },
    {
      "type": "bun",
      "request": "attach",
      "name": "Attach to Bun",

      
      
      "url": "ws://localhost:6499/",
      
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/app",
    },
  ],
}

7. 動作確認

これで構築の手順は完了です。目標が達成できたかどうか確認してみましょう。

`bun run` コマンドで TypeScript ファイルを実行できる

プロジェクト直下に index.ts を作成しましょう。bun init で既に作成されていると思います。

index.ts

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

この TypeScript ファイルを bun run index.ts で実行してみます。

TERMINAL

bun run index.ts

標準出力に Hello via Bun! と表示されれば目標達成です！

`bun repl` コマンドで REPL を起動して TypeScript を実行できる

bun repl コマンドで REPL を起動します。
REPL はターミナルにソースコードを直接書いて実行することができる機能です。
Bun の REPL はまだ試験的機能のようですが、十分使えると思います。

REPL が起動したら、プロンプトに TypeScript のコードを入力して実行してみます。ソースコードを入力して Enter キーで実行です。

TERMINAL

const msg: string = 'REPL OK';

msg.toLowerCase();

型アノテーションがついた TypeScript コードを REPL で実行できれば目標達成です！

REPL を終了するにはプロンプトに .exit を入力するかキーボードで Ctrl + D を入力します。

`bun tsc --noEmit` コマンドで（厳しい）型チェックができる

index.ts を編集して、以下の行を追加します。

index.ts


const unused = 123;

この状態で bun tsc コマンドを実行してみましょう。

TERMINAL

bun tsc --noEmit

@tsconfig/strictest の設定によって以下のエラーが表示されれば目標達成です！

TERMINAL

index.ts:1:7 - error TS6133: 'unused' is declared but its value is never read.

TypeScript Language Server でコード補完と型チェックができる

index.ts を開いて、TypeScript Language Server のコード補完機能と型チェック機能を体験しましょう。

index.ts

console.log('console.l と入力した時点で log が候補に出てきます。');
const value: number = '数値に文字列を代入しているので、型チェックのエラーが表示されます。';

コード補完と型チェックの動作が確認できれば目標達成です！

`bun biome` コマンドでフォーマットとリントができる

index.ts を開いて、わざとフォーマット崩れとルール違反のあるコードを作成します。Ctrl + S で保存すると自動でフォーマットされてしまうので、Ctrl + K, Ctrl + Shift + S で保存します。

index.ts

const  fixMe:String= 'fix me!'

bun biome check を実行して、フォーマットとリントルールのチェックを実行します。

フォーマット差分とリントルール違反の指摘が表示されれば OK です。
(このコマンドでは自動フォーマットや自動修正はされません)

TERMINAL

  ! This variable fixMe is unused.

  > 1 │ const  fixMe:String= 'fix me!'
      │        ^^^

  ! Don't use 'String' as a type.

  > 1 │ const  fixMe:String= 'fix me!'
      │            ^^^^^^

  × Formatter would have printed the following content:

    1   │ - const··fixMe:String=·'fix·me!'
      1 │ + const·fixMe:·String·=·'fix·me!';
      2 │ +

bun biome format --write を実行して自動フォーマットも試しましょう。

TERMINAL

bun biome format --write

ファイルが整形されることが確認できれば OK です。
(このコマンドではルール違反は自動修正されません)

bun biome lint --write を実行してルール違反の自動修正も試しましょう。

TERMINAL

bun biome lint --write

String が string に修正されることが確認できれば OK です。
(このコマンドでは未使用変数の問題は自動修正されません)

これでフォーマットとリントをコマンドで実行する目標は達成です！

Biome の拡張機能でリントが開発中にも実行される

index.ts を開いて、先ほど同じわざとフォーマットを崩したルール違反のコードを作成します。

index.ts

const  fixMe:String= 'fix me!'

この状態で fixMe や String の部分にホバーしてみてください。
先ほどと同じルール違反のエラーがコマンドなしでも表示されることを確認できれば目標達成です！

Biome の拡張機能でフォーマットと自動修正が保存時に自動で実行される

index.ts を開いて、先ほど同じわざとフォーマットを崩したルール違反のコードを作成します。

index.ts

const  fixMe:String= 'fix me!'

この状態で Ctrl + S で保存してみましょう。
以下のように自動修正されれば目標達成です！

index.ts

const fixMe: string = 'fix me!';

`bun test` コマンドでテストコードを実行できる

テストファイルを 1 つ追加して、テストランナーが動くか確認します。

index.test.ts をプロジェクト直下に作成し、以下のテストコードを追加しましょう。

index.test.ts

import { describe, expect, it } from 'bun:test';

describe('math', () => {
  it('adds numbers', () => {
    const result = 1 + 2;
    expect(result).toBe(3);
  });
});

bun test コマンドでテストを実行します。

テストが実行できて、以下のような結果が表示されれば目標達成です！

TERMINAL

index.test.ts:
✓ math > adds numbers

 1 pass
 0 fail
 1 expect() calls
Ran 1 test across 1 file. [37.00ms]

Bun の拡張機能でテストをソースコードから実行できる

続いてソースコードから直接テストを実行できるか確認します。

index.test.ts を開くと、describe('math' から始まる行の左に再生ボタンが表示されているでしょうか。これをクリックしてみましょう。

画面下部のペインが TEST RESULTS に切り替わり、 先ほどと同じテスト結果が表示されれば目標達成です！

TEST RESULTS

index.test.ts:
✓ math > adds numbers

 1 pass
 0 fail
 1 expect() calls
Ran 1 test across 1 file. [37.00ms]

Bun の拡張機能でテストをデバッグモードで実行できる

続いて VS Code 上でブレークポイントを使ってテストをデバッグできるかを確認します。

index.test.ts を開き、expect(result).toBe(3); の行の行番号の左側をクリックしてブレークポイントを置きます。赤い丸が表示されれば OK です。

この状態で、describe('math' から始まる行の左にあるボタン（先ほどは再生ボタンでしたが、一度テストが成功したので成功マークになっていると思います）を 右クリックして、Debug Test を選択します。

するとテスト実行されますが、ブレークポイントで一時停止します。
左側のペインがデバッグペインに切り替わり、VARUABLES > Locals に変数 result の中身が表示されていれば目標達成です！

Run and Debug > VARUABLES > Locals

  result = 3

一時停止したテストを再開するには、画面上に表示されるデバッグコントローラーの再開ボタンを押します。

そして、お疲れ様でした！これで最高の TypeScript + Bun + Biome 開発環境が完成しました！

おわりに

以上、普段自分が使っている最小構成を紹介しました。多分これが一番早くて便利です。

Bun と Biome のおかげでだいぶセットアップが簡単になった気がします。サクッとコードを書くなら現状は Bun が一番楽ですね。

あとは package.json > scripts に好きなコマンドを定義するもよし、git init で Git リポジトリとして設定するもよし、type-fest や remeda のようなユーティリティライブラリを追加するもよしです。リンターやテストツールが整っているので、Coding Agent と一緒に Vibe Coding を始めることだってできます！

では、よき開発環境でよき開発体験を。Happy Hacking! 🎉

Source link

返事を書く返事をキャンセル

あなたのコメントを入力してください。

ここにあなたの名前を入力してください

間違ったメールアドレスを入力しました。

ここにあなたのEメールアドレスを入力してください

最高の TypeScript 開発環境を最速で作っていくよ 2025 秋

この記事で作る開発環境について

この記事のゴール

こんな人におすすめ

こんな人にはあまりおすすめしない

なぜ Bun? なぜ Biome?

1. VS Code をインストール

2. Bun をインストール

3. プロジェクトを作成

4. TypeScript の設定

5. Biome の導入

6. VS Code 拡張機能の導入

7. 動作確認

`bun run` コマンドで TypeScript ファイルを実行できる

`bun repl` コマンドで REPL を起動して TypeScript を実行できる

`bun tsc --noEmit` コマンドで（厳しい）型チェックができる

TypeScript Language Server でコード補完と型チェックができる

`bun biome` コマンドでフォーマットとリントができる

Biome の拡張機能でリントが開発中にも実行される

Biome の拡張機能でフォーマットと自動修正が保存時に自動で実行される

`bun test` コマンドでテストコードを実行できる

Bun の拡張機能でテストをソースコードから実行できる

Bun の拡張機能でテストをデバッグモードで実行できる

おわりに

いいね:

関連

npm史上最大：自己伝播ワーム「Shai-Hulud」のサプライチェーン攻撃

Go言語でmrubyの静的型検査器を作ってみた💎

「基盤モデルとロボットの融合」読書メモ

返事を書く返事をキャンセル

ABOUT US

FOLLOW US

52歳・高岡早紀、ミニワンピ＆美脚披露！ファン驚愕「若すぎる！」

飽きない！セブンの弁当選手権

「AI画像生成でBOOTHデビュー！初心者でも時短で作品販売！」

最高の TypeScript 開発環境を最速で作っていくよ 2025 秋

この記事で作る開発環境について

この記事のゴール

こんな人におすすめ

こんな人にはあまりおすすめしない

なぜ Bun? なぜ Biome?

1. VS Code をインストール

2. Bun をインストール

3. プロジェクトを作成

4. TypeScript の設定

5. Biome の導入

6. VS Code 拡張機能の導入

7. 動作確認

bun run コマンドで TypeScript ファイルを実行できる

bun repl コマンドで REPL を起動して TypeScript を実行できる

bun tsc --noEmit コマンドで（厳しい）型チェックができる

TypeScript Language Server でコード補完と型チェックができる

bun biome コマンドでフォーマットとリントができる

Biome の拡張機能でリントが開発中にも実行される

Biome の拡張機能でフォーマットと自動修正が保存時に自動で実行される

bun test コマンドでテストコードを実行できる

Bun の拡張機能でテストをソースコードから実行できる

Bun の拡張機能でテストをデバッグモードで実行できる

おわりに

共有:

いいね:

関連

npm史上最大：自己伝播ワーム「Shai-Hulud」のサプライチェーン攻撃

Go言語でmrubyの静的型検査器を作ってみた💎

「基盤モデルとロボットの融合」読書メモ

返事を書く 返事をキャンセル

ABOUT US

FOLLOW US

`bun run` コマンドで TypeScript ファイルを実行できる

`bun repl` コマンドで REPL を起動して TypeScript を実行できる

`bun tsc --noEmit` コマンドで（厳しい）型チェックができる

`bun biome` コマンドでフォーマットとリントができる

`bun test` コマンドでテストコードを実行できる

返事を書く返事をキャンセル