--- title: "Oxcとは？Rust製JavaScriptツールチェーンの構成と使い方・SWCとの違い" url: "https://www.issoh.co.jp/tech/details/9737/" published: 2025-11-11 updated: 2026-10-28 categories: ["JavaScript"] publisher: "株式会社一創" --- # Oxcとは？Rust製JavaScriptツールチェーンの構成と使い方・SWCとの違い Oxc（オーエックスシー、正式名 JavaScript Oxidation Compiler）は、JavaScriptとTypeScriptを扱うツール群をRustで実装したオープンソースプロジェクトです。リンターのOxlint、フォーマッターのOxfmt、パーサー、トランスフォーマー、ミニファイア、モジュールリゾルバーを同じ基盤の上で提供しており、Vite 8のバンドラーRolldownもこの部品を使っています。この記事では、2026年10月23日時点の各ツールの版と成熟度、GitHubリポジトリの見方、Node.jsから部品を呼ぶ方法、ReactやVueでの対応範囲、VS Code拡張とAIコーディングエージェントとの連携、Vite 8での役割、SWC・Babelとの違いを扱います。コマンドの出力は node v26.5.0 で実行して取得しました。光通信の光クロスコネクト（OXC）や、コンテストサイトのOnline X Contest（OXC）は扱いません。 ## まとめ：Oxcの構成と使いどころの要点 - Oxcは単一のツールではなく、**リンター・フォーマッター・パーサー・トランスフォーマー・ミニファイア・リゾルバー・TypeScriptランナー**をまとめたプロジェクト名で、npmでは部品ごとに別パッケージです。 - 成熟度は部品ごとに違います。Oxlintは安定版の1.89.0、Oxfmtはベータの0.74.0、パーサーなどのNode APIは0.155.0で、ほぼ毎週版が上がります。 - アプリ開発者が直接触るのはOxlintとOxfmtで、VS Codeでは公式拡張 `oxc.oxc-vscode` を入れます。Reactのルールは既定で無効なので、プラグインを有効にします。 - Oxlint 1.66.0以降は、Claude CodeやCodexの中で実行されたことを環境変数で検知し、1件1行のエージェント向け形式で結果を出します。 - Vite 8では本番ビルドの既定ミニファイアがOxcで、意識しなくてもOxcを通っています。 - Node.jsからtypescript.js（約9.1MB）のASTを受け取るまでは、oxc-parserの `experimentalRawTransfer` 有効時が203ms、@babel/parserが1,063ms、oxc-parserの既定設定が1,594msで、既定のままではBabelより遅くなります。 - ESLintやPrettierのプラグインに強く依存しているなら、併用から始めます。 ## Oxcを構成する7つのツールと成熟度 名前の「Oxidation（酸化）」は、錆（rust）を生む化学反応にかけた命名です。公式の「What is Oxc?」は、Oxcを「RustでJavaScriptとTypeScript向けの高性能ツールを集めたもの」と定義し、VoidZero社の統合ツールチェーン構想の一部と位置づけています。VoidZeroはViteの作者Evan You氏が設立した会社で、2026年6月にCloudflareの一部になりましたが、OxcはMITライセンスのまま同じチームが開発を続けています。 ### 各ツールの現行版と段階 | ツール | npmパッケージ | 現行版（2026-10-23） | 段階 | | -------------- | ------------- | --------------- | ---------------- | | リンター | oxlint | 1.89.0 | 安定版（1.0は2025-06） | | フォーマッター | oxfmt | 0.74.0 | ベータ（2026-02-24〜） | | パーサー | oxc-parser | 0.155.0 | 0.x系 | | トランスフォーマー | oxc-transform | 0.155.0 | 0.x系 | | ミニファイア | oxc-minify | 0.155.0 | アルファ | | リゾルバー | oxc-resolver | 11.24.2 | メジャー11 | | TypeScriptランナー | @oxc-node/cli | – | 実験的 | 段階の列は公式の表記に合わせています。公式トップはFormatterに「Beta」、Minifierに「Alpha」を付け、TypeScriptランナーのページは「experimental」と明記しています。パーサー・トランスフォーマー・ミニファイアの版が揃っているのは、Rustのクレート群と同じ `crates_v0.155.0` タグで同時にリリースされるためです。0.x系なので、マイナー版の更新でもAPIが変わることがあります。 ### Oxcが速い理由と公式ベンチマークの読み方 公式の[パーサーのアーキテクチャ解説](https://oxc.rs/docs/learn/architecture/parser)は、速さの理由を4つ挙げています。ASTをメモリアリーナ（bumpalo）にまとめて確保し、まとめて解放すること。短い文字列をCompactStringでインライン化すること。それ以外のヒープ割り当てをしないこと。スコープの束縛やシンボルの解決を、パーサーではなく後段の意味解析に任せることです。公式サイトに転載されている性能解説（初出はRust Magazine）では、ASTをアリーナに載せ替えただけで約20%速くなったと書かれています。リンター・フォーマッター・変換は、どれもこのパーサーとASTの上に作られています。 公式の[ベンチマークページ](https://oxc.rs/docs/guide/benchmarks)は、パーサーがSWCの3倍以上、トランスフォーマーがBabelの40倍、OxlintがESLintの50〜100倍、OxfmtがPrettierの35倍、リゾルバーがwebpackのenhanced-resolveの30倍としています。ただしOxfmtの紹介ページは「Prettierの約30倍」と書いており、ページによって数字がずれています。Node.jsから使ったときの実測は後半に載せました。 ## GitHubリポジトリoxc-project/oxcの構造とリリースの追い方 ソースは `github.com/oxc-project/oxc` にあります。ライセンスはMIT、リポジトリの作成は2023年2月9日、スター数は2026年10月23日時点で23,189です。ディレクトリは役割ごとに分かれていて、目的のコードを探すときは次の3つを押さえておけば足ります。 - `crates/`：Rustの本体です。`oxc_parser`・`oxc_linter`・`oxc_transformer`・`oxc_minifier`・`oxc_formatter`・`oxc_isolated_declarations`・`oxc_react_compiler`・`oxc_language_server` などが並びます。 - `apps/`：コマンドラインツールです。`oxlint` と `oxfmt` の2つがあります。 - `napi/`：Node.js向けのバインディングです。`parser`・`transform`・`minify`・`transform-react` などがnpmパッケージの元になります。 Releasesページには、`oxlint_v1.89.0`・`oxfmt_v0.74.0`・`crates_v0.155.0` のように接頭辞付きのタグが混在します。直近は9月28日、10月5日、10月13日、10月19日と、ほぼ毎週まとめて出ています。Oxlintの更新だけを追うなら、`apps/oxlint/CHANGELOG.md` を見れば足ります。ドキュメントは別リポジトリの `oxc-project/website` にあります。 ## Node.jsからOxcの部品を使う方法 ビルドツールや独自のコード解析ツールを作る人向けに、Oxcは部品をnpmパッケージとして公開しています。次の例では3つのパッケージを入れ、同じTSXファイルをパース・変換・型定義生成・圧縮します。 ``` npm i -D oxc-parser oxc-transform oxc-minify ``` ``` // src/app.tsx（入力） import { useState } from "react"; interface Props { label: string; count?: number } export function Counter({ label, count = 0 }: Props): JSX.Element { const [n, setN] = useState(count); var unused = 1; if (n == null) { debugger; } return ; } export const add = (a: number, b: number): number => a + b; ``` ### oxc-parserによるASTとエラー情報の取得 `parseSync(ファイル名, ソース)` は、ASTとエラーの配列を返します。言語はファイル名の拡張子から推定されるので、`.tsx` を渡せばTypeScriptとJSXの両方が解釈されます。公式によると、Test262のパーサーテストはすべて、BabelとTypeScriptのテストは99%を通過しています。ESMのimport／export情報も一緒に返すので、es-module-lexerを別に入れる必要はありません。 ``` import { parseSync } from "oxc-parser"; import { readFileSync } from "node:fs"; const code = readFileSync("src/app.tsx", "utf8"); const p = parseSync("app.tsx", code); console.log(p.errors.length, p.program.body.length, p.program.body[0].type); // => 0 4 ImportDeclaration ``` ### oxc-transformによる型除去・型定義生成とランタイムヘルパー `transformSync` はTypeScriptの型注釈を取り除き、JSXを関数呼び出しに変換します。`isolatedDeclarationSync` はTypeScriptコンパイラを使わずに型定義ファイルを出力します。前提は、TypeScriptの `isolatedDeclarations` の制約（公開する関数の戻り値型を明示するなど）を満たしたコードであることです。 ``` import { transformSync, isolatedDeclarationSync } from "oxc-transform"; const t = transformSync("app.tsx", code, { typescript: {}, jsx: { runtime: "automatic" }, target: "es2020", }); const d = isolatedDeclarationSync("app.tsx", code); ``` ``` // t.code（抜粋） import { jsxs as _jsxs } from "react/jsx-runtime"; export function Counter({ label, count = 0 }) { const [n, setN] = useState(count); ... return /* @__PURE__ */ _jsxs("button", { onClick: () => setN(n + 1), ... // d.code（抜粋） export declare function Counter({ label, count }: Props): JSX.Element; export declare const add: (a: number, b: number) => number; export {}; ``` 変換は型を外すだけで、`var unused` や `debugger` は残ります。型チェックもしないので、型エラーのあるコードもそのまま出力されます。型の検査は別に `tsc` で行います。 `target` を古い版に下げると、出力に `@oxc-project/runtime` からのimportが入ります。`target: "es2015"` で非同期関数とオブジェクトのスプレッドを含むコードを変換したところ、次の2行が先頭に付きました。`es2017` では非同期関数がそのまま残り、スプレッド用の1行だけになります。 ``` import _objectSpread from "@oxc-project/runtime/helpers/objectSpread2"; import _asyncToGenerator from "@oxc-project/runtime/helpers/asyncToGenerator"; ``` [トランスフォーマーのドキュメント](https://oxc.rs/docs/guide/usage/transformer)によると、`helpers.mode` が `"Runtime"` のとき、ヘルパーを `@oxc-project/runtime` から読み込みます。Babelの `@babel/runtime` にあたるパッケージなので、変換後のコードを配布するなら依存に入れておきます。 ### oxc-minifyによる不要コード除去と圧縮 上の変換結果を `minifySync("app.js", t.code, { mangle: true, compress: true })` に渡すと、未使用の変数と `debugger` が消え、変数名が1文字に短縮されました。 ``` import{useState as e}from"react";import{jsxs as t}from"react/jsx-runtime";export function Counter({label:n,count:r=0}){let[i,a]=e(r);return t(`button`,{onClick:()=>a(i+1),children:[n,`: `,i]})}export const add=(e,t)=>e+t; ``` 文字列リテラルがバッククォートに置き換わっているのは、エスケープが少なく済む引用符を選ぶ仕様によるものです。ミニファイアはコードの書き方に前提を置いて最適化しており、その一覧が `crates/oxc_minifier/docs/ASSUMPTIONS.md` にあります。getterの副作用やグローバルの書き換えに依存するコードでは、先に目を通してください。 ## OxlintとOxfmtをプロジェクトに入れる手順 どちらもRust製のバイナリがnpm経由で入り、Node.js側の依存はほとんど増えません。Oxlintのルール一覧やESLint・Biomeとの細かな比較は[OxlintとESLintの違いとは？読み方・速度実測・移行手順とBiomeとの比較](/tech/details/8351/)で扱っているので、ここでは導入に必要な要点だけを示します。 ### Oxlintの無設定実行と型情報付きルール ``` npm i -D oxlint npx oxlint src // src/app.tsx:5:7: warning eslint(no-unused-vars): Variable 'unused' is declared but never used. ... // src/app.tsx:6:20: warning eslint(no-debugger): `debugger` statement is not allowed ... // Finished in 67ms on 2 files with 96 rules using 16 threads. ``` 設定ファイルが無くても、eslint・typescript・unicorn・oxcの4プラグインの既定ルールが警告として動きます。1.89.0では既定の111本のうち、型情報の要らない96本が実行されました（`oxc` はOxc独自のルール群です）。警告だけなら終了コードは0なので、CIで落とすなら `--deny-warnings` を付けるか、`npx oxlint --init` で `correctness` を `"error"` にした `.oxlintrc.json` を作ります。行単位の除外はESLintと同じ `// oxlint-disable-next-line` です。 型情報が必要なルールは、TypeScript 7（Go製のtsgo）を使う `oxlint-tsgolint` を足すと動きます。2026年7月22日に安定版となり、typescript-eslintの型情報ルール61個のうち59個に対応しています。Oxc傘下では、TypeScript 7のコンパイラをRustへ移植した型チェッカーtsrsも公開されています。導入手順と採用の判断は[tsrsとは：Rust製TypeScript型チェッカーの使い方とCI導入の判断基準](https://www.issoh.co.jp/tech/details/19029/)で解説しています。 ``` async function save(): Promise {} export function run() { save(); } ``` ``` npm i -D oxlint-tsgolint@7 npx oxlint --type-aware src/p.ts // src/p.ts:3:3: warning typescript(no-floating-promises): Promises must be awaited, add void operator to ignore. ``` `--type-aware` を付けないと、このawait漏れは報告されません。 ### Oxfmtの導入とPrettierとの差：既定の行幅は100 ``` npm i -D oxfmt npx oxfmt --check . # 差分があれば終了コード1 npx oxfmt # 書き換え npx oxfmt --migrate prettier # .prettierrc から .oxfmtrc.json を生成 ``` 既定の `printWidth` は、Prettierの80に対してOxfmtは100です。90字の1行を整形すると、Oxfmt 0.74.0は1行のまま残し、Prettier 3.9.10は5行に折り返しました。`--migrate prettier` は `.prettierrc` の `printWidth` などを引き継ぎ、`"sortPackageJson": false` も書き足しました。Oxfmtは既定でpackage.jsonのキーを並べ替えるため、Prettierと結果を揃える設定です。 Prettierとの互換性の書き方は、2026年10月に変わりました。以前の「PrettierのJavaScript・TypeScript適合テストを100%通過」に代わり、現在の[移行ガイド](https://oxc.rs/docs/guide/usage/formatter/migrate-from-prettier)は「Prettierの出力を基準にし、Prettier側の不具合は意図的に変える」と説明し、その違いを「Known divergences」に理由つきで並べています。出力が最も近いのはPrettier 3.9.9です。Prettierプラグインは読み込めませんが、import・Tailwind CSSのクラス・package.jsonの並べ替えとJSDocの整形を組み込みで持っています（既定で有効なのはpackage.jsonだけ）。 [言語サポートの一覧](https://oxc.rs/docs/guide/usage/formatter/language-support)では、JavaScript・TypeScript・JSON・CSS系・GraphQL・TOML・YAML・Markdown（0.72から）をRustでネイティブに整形し、HTML・Vue・Svelte・Astro・MDXなどは同梱のPrettierが処理します。手元でも、Markdown内のTOMLコードブロックの `b = [1,2]` が `b = [1, 2]` に整形されました。 ## React・Vue・SvelteでのOxlintとOxfmtの対応範囲 Reactで使うときに最初につまずくのは、Reactのルールが既定で動かないことです。[組み込みプラグインの一覧](https://oxc.rs/docs/guide/usage/linter/plugins)で既定が有効なのは eslint・typescript・unicorn・oxc の4つだけで、react・nextjs・jsx-a11y・vue・import などは自分で有効にします。 | 対象 | Oxlint | Oxfmt | | ---------------- | ------------------ | ----------------- | | React（.jsx・.tsx） | reactプラグイン（既定は無効） | ネイティブ | | Next.js | nextjsプラグイン（既定は無効） | ネイティブ | | Vue（.vue） | scriptブロックのみ | 同梱Prettier | | Svelte（.svelte） | scriptブロックのみ | 同梱Prettier・追加設定あり | | Astro（.astro） | フロントマター・scriptブロック | 同梱Prettier・追加設定あり | 次のコンポーネントは、条件分岐の中で `useState` を呼び、`map` で作る要素に `key` がありません。 ``` export function Box({ open }) { if (open) { const [v] = useState(0); return
{v}
; } return ; } ``` ``` npx oxlint r # 何も報告されない npx oxlint --react-plugin r # react(jsx-key) の1件だけ npx oxlint --react-plugin -W react/rules-of-hooks r // warning react-hooks(rules-of-hooks): React Hook "useState" is called conditionally. ... ``` プラグインを有効にしても、Hooksの呼び出し規則を見る `rules-of-hooks` は `pedantic` カテゴリに入っているため動きません。`jsx-key` と `exhaustive-deps` は `correctness` カテゴリなので、プラグインを有効にするだけで動きます。Reactのプロジェクトでは、`.oxlintrc.json` の `rules` で `"react/rules-of-hooks": "error"` を明示しておくのが確実です。設定ファイルで `plugins` を書くと既定の4つが外れるので、必要なものはすべて列挙します。 Vue・Svelteのファイルは、Oxlintでは `