swc の使い方 — @swc/cli へのエイリアスパッケージ

一言でいうと

swc は、Rust製の超高速JavaScript/TypeScriptコンパイラである SWC のCLIツール @swc/cli へのエイリアス（転送用）パッケージです。現在は 直接 @swc/cli と @swc/core をインストールすることが推奨 されており、この swc パッケージ自体を使う必要はありません。

どんな時に使う？

このパッケージ自体は基本的に 使うべきではありません。以下のユースケースでは、代わりに @swc/core や @swc/cli を直接利用してください。

• TypeScript/JSXのトランスパイルをBabelより高速に行いたい時 → @swc/core
• CLIからファイルやディレクトリを一括トランスパイルしたい時 → @swc/cli + @swc/core
• Jest・Webpack・Viteなどのツールチェインに組み込みたい時 → @swc/jest, swc-loader など専用パッケージ

⚠️ swc@1.0.11 は単なるエイリアスであり、READMEも存在しません。以降の解説は 実際に使うべき @swc/cli と @swc/core について記述します。

インストール

swc パッケージではなく、公式パッケージを直接インストールしてください。

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

# yarn
yarn add -D @swc/cli @swc/core

# pnpm
pnpm add -D @swc/cli @swc/core

基本的な使い方 — @swc/cli でファイルをトランスパイルする

CLI での利用

# 単一ファイルをトランスパイルして標準出力に表示
npx swc src/index.ts

# src ディレクトリを dist に出力
npx swc src -d dist

# ウォッチモード
npx swc src -d dist --watch

プログラムから利用（@swc/core）

import { transformSync, transform } from "@swc/core";

// 同期的にトランスパイル
const result = transformSync(`
  const greet = (name: string): string => {
    return \`Hello, \${name}!\`;
  };
  export default greet;
`, {
  jsc: {
    parser: {
      syntax: "typescript",
    },
    target: "es2020",
  },
  module: {
    type: "commonjs",
  },
});

console.log(result.code);

// 非同期版
const asyncResult = await transform(`const x: number = 42;`, {
  jsc: {
    parser: { syntax: "typescript" },
    target: "es2020",
  },
});

console.log(asyncResult.code);

設定ファイル（.swcrc）

プロジェクトルートに .swcrc を配置するのが一般的です。

{
  "$schema": "https://swc.rs/schema.json",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    },
    "target": "es2020"
  },
  "module": {
    "type": "es6"
  },
  "minify": false
}

よく使うAPI — @swc/core の主要メソッド

1. transform / transformSync — コード文字列のトランスパイル

import { transformSync } from "@swc/core";

const { code, map } = transformSync("const x: number = 1;", {
  sourceMaps: true,
  jsc: {
    parser: { syntax: "typescript" },
    target: "es5",
  },
});

console.log(code); // "var x = 1;"
console.log(map);  // ソースマップ文字列

2. transformFile / transformFileSync — ファイルを直接トランスパイル

import { transformFileSync } from "@swc/core";

const result = transformFileSync("./src/index.ts", {
  jsc: {
    parser: { syntax: "typescript" },
    target: "es2020",
  },
});

console.log(result.code);

3. parse / parseSync — AST（抽象構文木）の取得

import { parseSync } from "@swc/core";

const ast = parseSync("const x = 1 + 2;", {
  syntax: "typescript",
  target: "es2020",
});

console.log(JSON.stringify(ast, null, 2));

4. minify / minifySync — コードの圧縮

import { minifySync } from "@swc/core";

const { code } = minifySync(`
  function hello(name) {
    const greeting = "Hello, " + name;
    console.log(greeting);
    return greeting;
  }
`, {
  compress: true,
  mangle: true,
});

console.log(code);
// function hello(o){var l="Hello, "+o;return console.log(l),l}

5. bundle（実験的） — バンドル機能

import { bundle } from "@swc/core";

// ⚠️ 実験的機能。本番利用は非推奨
const result = await bundle({
  entry: {
    web: "./src/index.ts",
  },
  output: {
    path: "./dist",
  },
  module: {},
});

console.log(result);

⚠️ bundle APIは実験的ステータスです。バンドルにはWebpackやViteなど専用ツールとの組み合わせが推奨されます。

類似パッケージとの比較

選定の目安:

• 速度最優先 + Babel互換の設定が必要 → SWC
• 速度最優先 + バンドルも一体化したい → esbuild
• 複雑なカスタム変換が必要 → Babel
• 型チェックが必要 → tsc（トランスパイルはSWCに任せるハイブリッド構成が人気）

注意点・Tips

❌ swc パッケージは使わない

# NG: エイリアスパッケージ（非推奨）
npm install swc

# OK: 公式パッケージを直接インストール
npm install -D @swc/cli @swc/core

swc パッケージはバージョン 1.0.11 で更新が止まっており、単に @swc/cli への参照を持つだけです。依存関係の透明性のためにも、公式パッケージを直接指定してください。

型チェックは別途必要

SWCはトランスパイルのみを行い、TypeScriptの型チェックは行いません。CI/CDパイプラインやエディタで tsc --noEmit を併用するのが定番パターンです。

// package.json
{
  "scripts": {
    "build": "swc src -d dist",
    "typecheck": "tsc --noEmit",
    "ci": "npm run typecheck && npm run build"
  }
}

.swcrc の $schema を活用する

.swcrc に $schema を指定すると、VSCodeなどのエディタで入力補完とバリデーションが効くようになります。

{
  "$schema": "https://swc.rs/schema.json"
}

ソースマップの出力

デバッグ時にはソースマップを有効にしましょう。

npx swc src -d dist --source-maps

Jestとの統合

npm install -D @swc/jest

// jest.config.js
module.exports = {
  transform: {
    "^.+\\.(ts|tsx)$": ["@swc/jest"],
  },
};

Babelベースの ts-jest と比較して、テスト実行速度が大幅に改善されるケースが多いです。

まとめ

swc パッケージは @swc/cli への単なるエイリアスであり、現在は @swc/core と @swc/cli を直接インストール するのが正しい方法です。SWC自体はRust製の超高速トランスパイラとして、Babel の代替やJest・Webpackとの統合など幅広い場面で活用されています。型チェックは tsc --noEmit と組み合わせるハイブリッド構成が、現代のTypeScriptプロジェクトにおけるベストプラクティスです。