SWCは、Babelの代わりになるのか

はじめに

プロジェクトが大きくなるにつれて、Babelによるトランスパイルの待ち時間がじわじわとストレスになってきた、という経験はありませんか。ファイルを保存するたびに数秒待たされると、開発のリズムはどんどん崩れていきます。

その課題に対する有力な答えのひとつが、Rustで書かれたコンパイラ「SWC」です。JavaScriptとTypeScriptのコンパイル・変換をネイティブコードとして実行することで、従来のツールとは一線を画す速度を実現しています。この記事では、SWCの特徴から実際の使い方まで、順を追って紹介します。

SWCとは

SWC（Speedy Web Compiler）は、Rustで実装されたJavaScript／TypeScript向けの高速コンパイラです。GitHub上で3万を超えるスターを獲得しており、Next.jsのビルドパイプラインに標準採用されるなど、既にエコシステムの中核を担う存在になっています。

Babelと同様にコード変換やトランスパイルを担いますが、処理系がRustで書かれているためシングルスレッドでもJavaScript実装より大幅に高速で、さらにマルチコアを活かした並列処理にも対応しています。

主な特徴

圧倒的な処理速度 - Rustによるネイティブ実装により、Babelと比較して大幅な高速化が見込めます
Babel互換のAPI設計 - .swcrcの設定やプラグインの考え方がBabelに近く、移行のハードルが低めです
豊富な用途 - トランスパイルだけでなく、Minify（圧縮）、Bundling、TypeScriptの型除去まで幅広くカバーします
エコシステムでの採用実績 - Next.js、Parcel、Deno、Rspackなど多くのツールが内部でSWCを利用しています

インストール

npmを使う場合は以下のコマンドでCLIとコア本体を導入します。

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

yarnやpnpmでも同様にインストールできます。

yarn add -D @swc/cli @swc/core
# または
pnpm add -D @swc/cli @swc/core

Mac（Apple Silicon／x64）、Linux（x86_64／aarch64）、Windowsなど主要なプラットフォーム向けに事前ビルド済みバイナリが提供されているため、追加のビルド環境を用意する必要はありません。

基本的な使い方

インストールが完了したら、CLIから直接ファイルを変換してみましょう。

npx swc ./src/index.js

変換結果は標準出力に表示されます。ファイルとして出力したい場合は -d オプションでディレクトリを指定します。

npx swc ./src -d ./dist

プロジェクトルートに .swcrc を置くことで、変換ルールを細かく設定できます。TypeScriptとJSXをサポートする最小構成は次のようになります。

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "target": "es2020"
  },
  "module": {
    "type": "commonjs"
  }
}

Node.jsのコードから直接呼び出すこともできます。ビルドスクリプトに組み込みたい場合に便利です。

const swc = require("@swc/core");

async function transpile() {
  const output = await swc.transformFile("./src/index.ts", {
    jsc: {
      parser: { syntax: "typescript" },
      target: "es2020",
    },
  });

  console.log(output.code);
}

transpile();

実践的なユースケース

Jestのテストを高速化する

ts-jestの代わりに@swc/jestを使うと、テスト実行前のトランスパイル時間を短縮できます。

npm install -D @swc/jest

// jest.config.js
module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": "@swc/jest",
  },
};

webpackのビルドを高速化する

babel-loaderをswc-loaderに置き換えることで、babelのボトルネックを解消できます。

npm install -D swc-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        exclude: /node_modules/,
        use: "swc-loader",
      },
    ],
  },
};

Next.jsでは設定不要で恩恵を受けられる

Next.jsは内部のコンパイラとしてSWCを標準採用しているため、追加の設定をしなくても高速なビルドとMinifyの恩恵を受けられます。既存のBabel設定（.babelrc）が残っている場合は、それが優先されてSWCが無効化されてしまうため、移行時は不要な設定ファイルを削除しておくのがポイントです。