はじめに

TypeScriptを書いてるとき、「あれ、これってtscで実行するべき？tsx？それともts-nodeで実行するべき？」って迷うことありますよね。

実際のところ、これら3つは全然違う仕組みで動いてるんです。特に最近注目されているtsxは、従来のts-nodeより3倍高速でTypeScriptを直接実行できる次世代ツールです。

この記事では、tsx・ts-node・tscの根本的な違いから、実際のベンチマーク結果、そして場面別の最適な使い分け方法まで、実例とともに詳しく解説していきます。

tsxとは

tsxは、ts-nodeの代替として開発された超高速TypeScript直接実行ツールです。

npm install -D tsx

tsx の仕組み

esbuildを使用した超高速トランスパイル

TypeScript型チェックはスキップ（高速化のため）

ESModules対応

Watch mode内蔵

tsx vs ts-node 実行速度比較

同じサンプルコードでの実行時間測定：

scripts/release.ts

import { execSync } from 'child_process';
import { readFileSync, writeFileSync } from 'fs';

interface ReleaseConfig {
  version: string;
  changelog: string[];
  buildTargets: string[];
}

function parsePackageJson(): any {
  const packageJson = readFileSync('package.json', 'utf-8');
  return JSON.parse(packageJson);
}

function generateChangelog(version: string): string[] {
  // バージョン履歴の生成
  return [
    `## v${version}`,
    '- 新機能の追加',
    '- バグフィックス',
    '- パフォーマンス改善'
  ];
}

function buildProject(targets: string[]): void {
  targets.forEach(target => {
    console.log(`Building ${target}...`);
    execSync(`npm run build:${target}`, { stdio: 'inherit' });
  });
}

function main() {
  console.time('リリース処理時間');
  
  const pkg = parsePackageJson();
  const config: ReleaseConfig = {
    version: pkg.version,
    changelog: generateChangelog(pkg.version),
    buildTargets: ['web', 'node', 'mobile']
  };
  
  console.log(`🚀 リリースv${config.version}を開始...`);
  buildProject(config.buildTargets);
  
  console.timeEnd('リリース処理時間');
}

main();

実行時間比較結果：

実行ツール	初回実行	2回目以降	メモリ使用量
`ts-node scripts/release.ts`	3.2秒	3.1秒	45MB
`tsx scripts/release.ts`	1.1秒	0.9秒	28MB
`node scripts/release.js`（tsc後）	0.4秒	0.4秒	18MB

tsx の実践的な使い方

TypeScriptスクリプトの直接実行

# リリーススクリプトの実行
tsx scripts/release.ts

# デバッグモードで実行
tsx --inspect scripts/release.ts

# ウォッチモードで開発
tsx --watch scripts/release.ts

package.json での設定例

package.json

{
  "scripts": {
    "dev": "tsx --watch src/app.ts",
    "script:release": "tsx scripts/release.ts",
    "script:build": "tsx scripts/build.ts",
    "test:run": "tsx test/runner.ts"
  }
}

ESModules 対応の違い

tsx（完全対応）

modern-script.ts

// ESModules記法が使える
import { promises as fs } from 'fs';
import chalk from 'chalk';

export async function processFiles(): Promise<void> {
  const files = await fs.readdir('./src');
  console.log(chalk.green(`📁 Found ${files.length} files`));
}

// Top-level await が使える
await processFiles();

# 直接実行可能
tsx modern-script.ts

ts-node（設定が必要）

tsconfig.json

{
  "ts-node": {
    "esm": true
  }
}

# ESM対応の実行
node --loader ts-node/esm modern-script.ts

場面別使い分け戦略

TypeScript実行したい
　　　　　　↓
　　開発・スクリプト実行？
　　　　　　↓
　　　　　YES → tsx 🚀
　　　　　　↓
　　　　　NO → 本番環境？
　　　　　　　　　　↓
　　　　　　　　　YES → tsc + node ⚡
　　　　　　　　　　↓
　　　　　　　　　NO → レガシー対応必要？
　　　　　　　　　　　　　　↓
　　　　　　　　　　　　　YES → ts-node 🔧

🔧 開発中のスクリプト実行 → tsx

理由：

ts-nodeより3倍高速

Watch mode内蔵

ESModules完全対応

設定不要

⚡ スクリプト実行（scripts/フォルダ） → tsx

# ビルドスクリプト
tsx scripts/build.ts

# データベースマイグレーション
tsx scripts/migrate.ts

# テストデータ生成
tsx scripts/seed.ts

🚀 本番環境 → tsc + node

理由：

最速の実行速度

事前型チェック完了

依存関係の最小化

推奨開発フロー

# 1. 開発中（最速）
npm run dev     # tsx --watch で自動再実行

# 2. スクリプト実行（高速・直接）
npm run script  # tsx scripts/build.ts

# 3. 型チェック（安全性）
npm run typecheck  # tsc --noEmit で型チェックのみ

# 4. 本番ビルド（最適化）
npm run build   # tsc でコンパイル

# 5. 本番実行（最高速）
npm start       # node dist/app.js で高速実行

package.json設定例

package.json

{
  "scripts": {
    "dev": "tsx --watch src/app.ts",
    "script:build": "tsx scripts/build.ts",
    "script:release": "tsx scripts/release.ts",
    "typecheck": "tsc --noEmit",
    "build": "tsc",
    "start": "node dist/app.js",
    "test": "tsx test/runner.ts"
  },
  "devDependencies": {
    "tsx": "^4.0.0",
    "typescript": "^5.0.0"
  }
}

おまけ：SWC（超高速ビルド）

npm install -D @swc/core @swc/cli

# tscより20倍高速
npx swc src -d dist

おまとめ

用途	ツール	理由	実行速度
開発・デバッグ	tsx	ts-nodeより3倍高速、設定不要	⚡⚡⚡
スクリプト実行	tsx	直接実行、ESM完全対応	⚡⚡⚡
本番環境	tsc + node	最高速、事前型チェック	⚡⚡⚡⚡
レガシー対応	ts-node	豊富なオプション、安定	⚡⚡

結論：2024年の TypeScript 実行なら tsx が第一選択。開発効率と実行速度の両方で ts-node を上回り、設定も不要。本番環境では tsc + node で最高パフォーマンスを実現しましょう！