SWCの使い方完全ガイド【インストールから応用まで】
Web開発の世界では、JavaScriptやTypeScriptのコードは日々複雑化しています。プロジェクトが大規模になるにつれて、コードのビルドにかかる時間は無視できない問題となります。
例えば、大規模なフロントエンドプロジェクトで開発を進めているとします。ほんの小さな変更を加えただけでも、ビルドが完了するまでに数分かかる。この待ち時間は開発者の集中力を削ぎ、作業の流れを寸断します。コーヒーを淹れて戻ってきても、まだビルドが終わっていない、といった経験があるかもしれません。
もし、このビルド時間が劇的に短縮されたらどうでしょうか。コードの変更を保存した瞬間、ほぼリアルタイムで変更が反映される世界。開発者は待ち時間から解放され、より多くの時間を創造的なコーディングに費やせます。CI/CDパイプラインも高速化され、デプロイまでの時間が短縮されるでしょう。
この夢のような世界を実現するツールの一つが「SWC」です。SWCは、その驚異的な速度でWeb開発の風景を一変させつつあります。
SWCとは — 30秒で分かる概要・誕生した背景
SWCは「Speedy Web Compiler」の略称です。その名の通り、非常に高速なTypeScriptおよびJavaScriptのコンパイラとして知られています。Rust言語で開発されており、既存のJavaScriptコンパイラであるBabelと比較して20〜70倍もの速度で動作します。
なぜこれほど高速なのでしょうか。SWCは、JavaScriptエコシステムの肥大化とそれに伴うビルド時間の増大という課題に応えるために誕生しました。Rustの持つパフォーマンス特性と、効率的な並列処理を最大限に活用しています。これにより、大規模なコードベースでも瞬時にコードを変換できます。
SWCの主な役割は、新しいJavaScript/TypeScriptの構文を、より古いJavaScript環境で動作するように変換することです。例えば、ESNextで書かれたコードをES2015（ES6）などの古いバージョンに変換します。また、TypeScriptの型情報を除去してJavaScriptに変換する機能も持ちます。
単なるトランスパイラとしてだけでなく、SWCはコードの圧縮（ミニファイ）やバンドルといった機能も提供します。これにより、開発者はビルドプロセス全体をSWCに集約し、さらなる高速化を図ることが可能です。
インストール方法
SWCはNode.js環境で利用できるため、特別なOSごとのインストールは不要です。npmまたはYarnを使ってプロジェクトに導入できます。SWCを利用するには、Node.js v10以上が必要です。開発用途の場合はNode.js v20以上が推奨されます。
SWCのCLI（コマンドラインインターフェース）ツールとコアライブラリをインストールしましょう。
# npm を使用する場合
npm install --save-dev @swc/cli @swc/core
# または yarn を使用する場合
yarn add --dev @swc/cli @swc/core
これにより、プロジェクトのnode_modulesディレクトリにSWCがインストールされます。--save-devオプションは、開発時のみに必要な依存関係であることを示します。
基本的な使い方 — 最低限これだけ知れば使えるコマンド3〜5個
SWCをインストールしたら、次は実際にコードをコンパイルしてみましょう。ここでは、SWC CLIの基本的な使い方を3つのステップで紹介します。
1. 単一のファイルをコンパイルする
まず、TypeScriptファイルを用意します。例えば、src/index.tsというファイルを作成してください。
// src/index.ts
const greet = (name: string): string => {
return `Hello, ${name}!`;
};
console.log(greet('SWC User'));
このファイルをSWCでコンパイルします。出力先をdist/index.jsと指定してみましょう。
npx swc src/index.ts -o dist/index.js
npxは、node_modules/.bin内のコマンドを実行するのに便利です。
上記のコマンドを実行すると、distディレクトリが作成され、その中にindex.jsファイルが出力されます。
// dist/index.js (出力例)
const greet = (name) => {
return `Hello, ${name}!`;
};
console.log(greet('SWC User'));
TypeScriptの型情報が除去され、純粋なJavaScriptに変換されていることが分かります。
2. ディレクトリ内の複数のファイルを一括でコンパイルする
次に、複数のTypeScriptファイルをコンパイルする例です。srcディレクトリにいくつかのファイルがあるとします。
src/
├── app.ts
└── utils.ts
app.tsの内容:
// src/app.ts
import { add } from './utils';
console.log('2 + 3 =', add(2, 3));
utils.tsの内容:
// src/utils.ts
export const add = (a: number, b: number): number => {
return a + b;
};
これらをまとめてdistディレクトリに出力するには、npx swc <入力ディレクトリ> -d <出力ディレクトリ>コマンドを使います。
npx swc src -d dist
実行すると、distディレクトリ内にapp.jsとutils.jsが生成されます。
// dist/app.js (出力例)
import { add } from './utils';
console.log('2 + 3 =', add(2, 3));
// dist/utils.js (出力例)
export const add = (a, b) => {
return a + b;
};
3. ファイルの変更を監視して自動で再コンパイルする
開発中は、コードを変更するたびに手動でコンパイルコマンドを実行するのは手間です。SWCには、ファイルの変更を監視し、自動で再コンパイルするウォッチャーモードがあります。
npx swc src -d dist --watch
このコマンドを実行すると、SWCはsrcディレクトリ内のファイルの変更を監視し続けます。srcディレクトリ内のいずれかのファイルを編集して保存すると、自動的にdistディレクトリに再コンパイルされます。
これは、開発サーバーと組み合わせて使うことで、非常に快適な開発体験を提供します。
便利な使い方・応用例 3選 — 実際の開発シーンに落とし込む
SWCは単にTypeScriptをJavaScriptに変換するだけでなく、様々な開発シーンでその真価を発揮します。ここでは、3つの応用例を紹介します。
1. ReactプロジェクトでのJSX/TSXトランスパイル
Reactプロジェクトでは、JSX（またはTypeScriptを使う場合はTSX）構文が頻繁に利用されます。SWCはこれらの構文を通常のJavaScript関数呼び出しに変換する機能を内蔵しています。Babelの@babel/preset-reactのような役割をSWCが果たします。
まず、src/App.tsxファイルを作成します。
// src/App.tsx
import React from 'react';
const App = () => {
return (
<div>
<h1>Hello, SWC with React!</h1>
<p>This is a React component compiled by SWC.</p>
</div>
);
};
export default App;
このTSXファイルをSWCでコンパイルするには、設定ファイル.swcrcが必要です。プロジェクトのルートに.swcrcファイルを作成し、Reactの変換設定を記述します。
// .swcrc
{
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true
},
"transform": {
"react": {
"runtime": "automatic",
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
"throwIfNamespace": true,
"useBuiltins": true
}
},
"target": "es2018"
}
}
この設定では、jsc.parserでTypeScriptとTSXの構文解析を有効にしています。jsc.transform.reactでReactのJSX変換をautomaticランタイムで行うように指定します。automaticランタイムでは、JSXを_jsxなどの特別な関数に変換し、import React from 'react';の記述が不要になります。
この設定ファイルがあれば、先ほどのコンパイルコマンドでTSXファイルも変換されます。
npx swc src -d dist
出力されたdist/App.jsには、JSXがReactの関数呼び出しに変換されたJavaScriptコードが含まれます。
2. Node.jsプロジェクトでの実行時コンパイル
Node.js環境でTypeScriptプロジェクトを開発する際、ts-nodeのようなツールを使って実行時コンパイルを行うことがあります。SWCにも同様の機能を提供する@swc/registerパッケージがあります。これにより、事前にコンパイルすることなくTypeScriptファイルを直接Node.jsで実行できます。
まず、@swc/registerをインストールします。
npm install --save-dev @swc/register
# または
yarn add --dev @swc/register
次に、src/server.tsというシンプルなサーバーファイルを作成します。
// src/server.ts
import http from 'http';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello from SWC-powered Node.js server!\n');
});
server.listen(port, () => {
console.log(`Server running at http://localhost:${port}/`);
});
このファイルをSWCで実行時コンパイルして起動するには、nodeコマンドの--requireオプションを使います。
node --require @swc/register src/server.ts
このコマンドを実行すると、src/server.tsがSWCによってオンザフライでJavaScriptに変換され、Node.jsで実行されます。開発時のサーバー起動やスクリプト実行が高速化されます。
3. ビルドツールとの連携（Webpackの例）
SWCは単体で使うだけでなく、既存のビルドツールと組み合わせることで、その高速性を既存のワークフローに組み込めます。Webpack、Rollup、Viteなど、主要なバンドラーにはSWC用のローダーやプラグインが提供されています。
ここでは、Webpackとswc-loaderを組み合わせる例を見てみましょう。
まず、必要なパッケージをインストールします。
npm install --save-dev webpack webpack-cli swc-loader @swc/core
# または
yarn add --dev webpack webpack-cli swc-loader @swc/core
次に、webpack.config.jsファイルを作成し、swc-loaderを設定します。
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development', // または 'production'
entry: './src/index.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'swc-loader',
options: {
jsc: {
parser: {
syntax: 'typescript',
tsx: true
},
transform: {
react: {
runtime: 'automatic'
}
},
target: 'es2018'
}
}
},
},
],
},
};
この設定では、.ts, .tsx, .js, .jsxファイルをswc-loaderで処理するように指定しています。options内でSWCの設定を直接記述することも可能です。jscの設定は、前述の.swcrcファイルの内容とほぼ同じです。
この設定でWebpackを実行すると、SWCがファイルのトランスパイルを担当し、Webpackがそれらのファイルをバンドルします。
npx webpack
これにより、Babelを使うよりもはるかに高速なビルドが実現します。
他ツールとの組み合わせ — 相性のよいツールと組み合わせ方
SWCはその高速性から、既存のJavaScript/TypeScript開発エコシステムに深く統合されつつあります。ここでは、SWCと相性の良いツールやフレームワーク、その組み合わせ方を紹介します。
1. Next.js
Next.jsは、ReactベースのWebアプリケーションフレームワークです。バージョン12以降、Next.jsは内部的にSWCをJavaScriptトランスパイラとして採用しています。これにより、Babelを使用するよりも大幅にビルドとリフレッシュの速度が向上しました。
Next.jsプロジェクトを開発している場合、特別な設定なしにSWCの恩恵を受けられます。Next.jsが自動的にSWCを利用してコードをコンパイルします。
2. Jest
Jestは、JavaScriptのテスティングフレームワークです。SWCとjest-transform-swcを組み合わせることで、テストの実行速度を劇的に向上させられます。Babelを使ったトランスフォームよりも高速にテストファイルを処理できます。
まず、jest-transform-swcをインストールします。
npm install --save-dev jest-transform-swc
# または
yarn add --dev jest-transform-swc
次に、jest.config.jsファイルにトランスフォーム設定を追加します。
// jest.config.js
module.exports = {
transform: {
'^.+\\.(t|j)sx?$': ['jest-transform-swc', {
jsc: {
parser: {
syntax: 'typescript',
tsx: true
},
transform: {
react: {
runtime: 'automatic'
}
}
}
}],
},
testEnvironment: 'jsdom',
};
これにより、Jestがテストファイルを実行する際に、SWCを使ってTypeScriptやJSXファイルを高速にJavaScriptに変換します。
3. Vite
Viteは、モダンなフロントエンドビルドツールです。開発サーバーではネイティブESモジュールを利用し、ビルド時にはRollupをベースとしています。Viteは、トランスパイルにESBuildをデフォルトで利用していますが、SWCをトランスパイラとして利用するプラグインも存在します。
例えば、vite-plugin-swc-reactのようなプラグインを使うことで、ViteのビルドプロセスにSWCを組み込めます。これにより、開発サーバーの起動やHMR（Hot Module Replacement）の速度、プロダクションビルドの速度をさらに向上させることが期待できます。
4. Babelとの併用・移行
SWCはBabelの代替として機能することが多いですが、Babelにしかない特定のプラグインが必要な場合は、部分的に併用することも可能です。ただし、SWCの速度メリットを最大限に活かすためには、Babelからの完全な移行が推奨されます。
SWCの公式ドキュメントには、Babelからの移行ガイドが用意されています。既存のBabel設定をSWCの設定に変換する方法や、互換性の問題について詳しく説明されています。
よくある設定・カスタマイズ — dotfilesや設定ファイルの例
SWCの動作は、プロジェクトルートに配置する.swcrcファイルで詳細にカスタマイズできます。このファイルはJSON形式で記述し、SWCのコンパイルオプションを定義します。
以下に、一般的なプロジェクトでよく使われる設定の例を紹介します。
// .swcrc
{
"$schema": "https://json.schemastore.org/swcrc.json",
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true,
"decorators": true,
"dynamicImport": true
},
"target": "es2020",
"transform": {
"react": {
"runtime": "automatic",
"development": true,
"refresh": true
},
"legacyDecorators": true,
"decoratorMetadata": true
},
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"module": {
"type": "es6",
"strict": true,
"strictMode": true,
"lazy": false,
"noInterop": false
},
"minify": false,
"sourceMaps": true,
"env": {
"targets": "defaults"
}
}
この設定ファイルについて、主要な項目を解説します。
$schema: JSONスキーマのURLを指定することで、エディタでのオートコンプリートやバリデーションが有効になります。jsc: JavaScript Compilerの設定を定義します。parser: コードの解析方法を指定します。syntax:typescriptまたはecmascript（JavaScript）を指定します。tsx: JSX/TSX構文を解析するかどうかをtrue/falseで指定します。decorators: デコレーター構文を解析するかどうかをtrue/falseで指定します。dynamicImport: 動的インポート構文を解析するかどうかをtrue/falseで指定します。
target: 出力するJavaScriptのECMAScriptバージョンを指定します。例えば、es2020やes5などです。transform: コード変換に関する設定です。react: ReactプロジェクトでのJSX変換に関する設定です。runtime:automaticまたはclassicを指定します。development: 開発モードかどうかをtrue/falseで指定します。refresh: React Fast Refreshを有効にするかどうかをtrue/falseで指定します。
legacyDecorators: 従来のデコレーター構文をサポートするかをtrue/falseで指定します。decoratorMetadata: デコレーターのメタデータを生成するかをtrue/falseで指定します。
baseUrl, paths: TypeScriptのパスエイリアス（tsconfig.jsonのpaths）をSWCで解決するための設定です。module: 出力するJavaScriptモジュールの形式を定義します。type:es6（ES Modules）、commonjs、umd、amdなどを指定します。
minify: 出力コードを圧縮するかどうかをtrue/falseで指定します。開発時はfalse、プロダクションビルド時はtrueにすることが多いです。sourceMaps: ソースマップを生成するかどうかをtrue/falseで指定します。デバッグに役立ちます。env: 環境に応じた設定を行う項目です。targets: ターゲットとするブラウザ環境などを指定します。browserslistの設定を読み込むことも可能です。
この.swcrcファイルをプロジェクトの要件に合わせて調整することで、SWCの動作を細かく制御できます。
今日からできる実行プラン — 3ステップで始める
SWCの導入は、既存のプロジェクトにも比較的簡単に行えます。ここでは、今日からSWCを使い始めるための3ステップを紹介します。
ステップ1: プロジェクトへのSWC導入と基本設定
まずは、既存のJavaScript/TypeScriptプロジェクトにSWCをインストールしましょう。package.jsonのdevDependenciesに@swc/cliと@swc/coreを追加します。
npm install --save-dev @swc/cli @swc/core
次に、プロジェクトのルートに.swcrcファイルを作成します。最初はシンプルな設定から始め、TypeScriptとターゲットのESバージョンを指定します。Reactを使っている場合は、JSX/TSXの変換設定も追加しましょう。
// .swcrc の初期設定例
{
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true
},
"target": "es2018",
"transform": {
"react": {
"runtime": "automatic"
}
}
},
"module": {
"type": "es6"
}
}
ステップ2: ビルドスクリプトのSWCへの切り替え
package.jsonのscriptsセクションにある既存のビルドコマンドをSWCに切り替えます。例えば、tscやbabelを使っていた場合は、npx swcコマンドに置き換えます。
// package.json (scriptsの例)
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"build": "npx swc src -d dist",
"build:watch": "npx swc src -d dist --watch",
"start:dev": "node --require @swc/register src/index.ts"
},
"devDependencies": {
"@swc/cli": "^x.x.x",
"@swc/core": "^x.x.x",
"@swc/register": "^x.x.x"
}
}
これで、npm run buildやnpm run build:watchを実行すると、SWCがコードのコンパイルを行います。
ステップ3: ビルドツールとの連携と効果の確認
WebpackやViteなどのビルドツールを使っている場合は、対応するSWCローダーやプラグインに切り替えます。
- Webpackの場合:
swc-loaderを導入し、webpack.config.jsを更新します。 - Viteの場合:
vite-plugin-swcなどのプラグインを導入し、vite.config.tsを更新します。 - Jestの場合:
jest-transform-swcを導入し、jest.config.jsを更新します。
切り替え後、ビルド時間や開発サーバーの起動時間、HMRの速度を測定し、SWC導入によるパフォーマンス改善の効果を実感しましょう。特にCI/CD環境でのビルド時間を比較すると、その恩恵を明確に確認できます。
SWCは、Web開発の生産性を向上させる強力なツールです。ぜひ今日から導入を検討し、その驚異的な速度を体験してみてください。
参考文献
- SWC (Speedy Web Compiler) GitHubリポジトリ
- SWC公式ドキュメント
- SWC公式ドキュメント: Migrating from Babel
- SWC公式ドキュメント: Benchmarks
- TypeScript + SWC: An Introduction
- SWC公式ドキュメント: .swcrc