SWC
SWC (Speedy Web Compiler) はRustベースの拡張可能なプラットフォームです。Next.js と Deno の内部コンパイラとして使用されています。
使用すべきタイミング
- 高性能なJavaScript/TypeScriptトランスパイル: BabelをRustベースのコンパイラに置き換え、最大20倍の高速化を実現。
- Next.js および最新バンドラーパイプライン: React JSX、TSX、最新のECMAScript機能、Webpack/Turbopackアセットのトランスパイル。
- プログラムによるAST操作とコード生成:
@swc/coreNode.js APIを使用した高速カスタムビルドツールの構築。 - プロダクションアセットのミニファイ:
@swc/coreミニファイアを使用したJSおよびCSSバンドルの超高速ミニファイ。
クイックスタート
1. 最小限の .swcrc
{
"$schema": "https://json.schemastore.org/swcrc",
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true,
"decorators": true
},
"transform": {
"react": {
"runtime": "automatic"
}
},
"target": "es2022"
},
"minify": false
}
2. CLIでコンパイル
npx @swc/cli src -d dist
コアコンセプト
プロダクション用SWC設定（.swcrc）
最新のTypeScript、React 19 JSXランタイム、モジュールトランスパイルを設定：
{
"$schema": "https://json.schemastore.org/swcrc",
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true,
"decorators": true,
"dynamicImport": true
},
"transform": {
"react": {
"runtime": "automatic",
"refresh": true
}
},
"target": "es2022",
"loose": false,
"externalHelpers": true,
"keepClassNames": true,
"minify": {
"compress": {
"unused": true,
"drop_console": true
},
"mangle": true
}
},
"module": {
"type": "es6"
},
"minify": true,
"sourceMaps": true
}
@swc/core APIによるプログラム的コンパイル
Node.jsスクリプト内でソースファイルを非同期トランスパイル：
import swc from "@swc/core";
import fs from "node:fs/promises";
async function compileTypeScript(filePath) {
const code = await fs.readFile(filePath, "utf-8");
const output = await swc.transform(code, {
filename: filePath,
sourceMaps: true,
jsc": {
parser: { syntax: "typescript", tsx: true },
target: "es2022",
},
module: { type: "commonjs" },
});
console.log("トランスパイルされたコード:\n", output.code);
if (output.map) {
console.log("ソースマップが生成されました");
}
}
compileTypeScript("./src/index.ts");
高速CLIトランスパイル
SWCコマンドラインで直接ディレクトリツリーをコンパイル：
# ソースマップ付きでsrc/からdist/へトランスパイル
npx swc src -d dist --copy-files --source-maps
# swcpackでトランスパイルしてバンドル
npx swc src/index.ts -o dist/bundle.js --minify
一般的なパターン
@swc/jestでJestテストを高速化
問題: ts-jest を使用したTypeScriptトランスパイルによりテストスイートの実行が非常に遅くなる。
解決策: ts-jest を @swc/jest に置き換える。
// jest.config.js
module.exports = {
transform: {
"^.+\\.(t|j)sx?$": [
"@swc/jest",
{
jsc: {
transform: {
react: { runtime: "automatic" },
},
},
},
],
},
};
SWCバンドリング＆ミニファイパイプライン
問題: プロダクションビルドスクリプトの高速なミニファイが必要。
解決策: .swcrc 内で minify オプションを有効にする。
{
"minify": true,
"jsc": {
"minify": {
"compress": {
"drop_console": true
},
"mangle": true
}
}
}
ベストプラクティス（2026年）
- 推奨:
@swc/helpersをインストールしexternalHelpers: trueを有効にして、トランスパイルランナーのヘルパースタブが重複するのを回避する。 - 推奨: CI/CDパイプラインでSWCと
tsc --noEmitを組み合わせる（SWCは型チェックを行わずにコードをトランスパイルするため）。 - 推奨: ネイティブの最新ブラウザ機能を活用するため、
target: "es2022"以降を設定する。 - 推奨:
@swc/jestまたは@swc/registerを使用して単体テストの実行を大幅に高速化する。 - 非推奨: やむを得ない場合を除きBabelプラグインに依存しない。ネイティブのSWCプラグイン（Wasmプラグイン）が存在するか確認する。
- 非推奨:
.swcビルドキャッシュディレクトリをGitリポジトリにコミットしない。 - 非推奨: プロダクションのトラブルシューティングのためにソースマップを生成せずにSWCミニファイを実行しない。
トラブルシューティング
| エラー / 症状 | 原因 | 解決策 |
|---|---|---|
failed to handle: error parsing typescript | .swcrc でフラグを有効にせずにTypeScript構文（JSXやデコレーターなど）を使用している | jsc.parser に "syntax": "typescript"、"tsx": true、"decorators": true が含まれていることを確認。 |
デコレーターのメタデータが出力されない（Reflect.getMetadata が undefined を返す） | transform.legacyDecorator と transform.decoratorMetadata が設定されていない | jsc.transform 内で "legacyDecorator": true と "decoratorMetadata": true を設定。 |
Cannot find module '@swc/core-darwin-arm64' | npm/yarnインストール中にネイティブバイナリのインストールに失敗した | npm install --force @swc/core を実行して対象アーキテクチャのネイティブバイナリを再フェッチ。 |