はじめに
フロントエンド開発、正直なところツールの遅さにイライラすることありませんか。
ESLintの実行を待つ数秒、Prettierがファイルを整形する数秒。1ファイルなら大したことないけど、大規模プロジェクトになると積み重なって結構なストレスになるんですよね。
そんな不満を解消してくれるのが今回紹介するOxcです。Rustで書かれた超高速なJavaScript/TypeScriptツールチェーンで、ESLintより50〜100倍、Prettierより30倍速いという話。これ、意外と本当なんですよ。
Oxcとは
Oxc（The Oxidation Compiler）は、VoidZeroが開発しているRust製の統合JavaScript/TypeScriptツールスイートです。「Oxidation」はRustの酸化という意味で、JavaScript界隈をRustで高速化するぞという意気込みが感じられますね。
個人的にはこの手の「○○より速い」系ツールは眉唾で見ることが多いんですが、Oxcはちゃんと裏付けがあります。GitHubスターは17,700以上、月間250万ダウンロード、そしてNuxt、Preact、Shopify、ByteDanceといった大手も採用しているという実績があります。
特徴・メリット
圧倒的な速度
Oxcの各ツールの速度比較がこちら。
| ツール | 比較対象 | 速度 |
|---|---|---|
| Parser | swc | 3倍高速 |
| Linter | ESLint | 50〜100倍高速 |
| Formatter | Prettier | 30倍高速 |
| Resolver | enhanced-resolve | 28倍高速 |
特にリンターの速度差は衝撃的です。ESLintで数秒かかっていた処理がミリ秒で終わるので、保存のたびにリントを走らせても全くストレスにならない。これはQOLが上がりますね。
統合ツールスイート
Oxcは単体のツールではなく、複数のツールの集合体です。
- Parser - JavaScriptコードの解析（Test262全テスト合格）
- Linter（oxlint） - 610以上のルールを搭載したリンター
- Formatter（oxfmt） - Prettier互換のフォーマッター（アルファ版）
- Transformer - Babel互換のコード変換
- Minifier - コード圧縮（アルファ版）
- Resolver - モジュール解決
1つのプロジェクトで統一されたツールが使えるのは、設定の手間が減って良いですね。
設定不要で即使える
oxlintの場合、設定ファイルなしでそのまま動きます。これがかなり楽。ESLintの設定ファイル地獄から解放されるのは30代エンジニアとして嬉しいポイントです。
Vite/Rolldownとの連携
OxcはViteの次期バンドラーであるRolldownの基盤技術として採用されています。つまり、今後Viteを使う人は自然とOxcの恩恵を受けることになる。早めにキャッチアップしておいて損はないと思います。
インストール方法
oxlint（リンター）
最も手軽なのはnpxで直接実行する方法。
npx oxlint@latest
プロジェクトにインストールする場合はこちら。
npm install -D oxlint
oxc-parser（パーサー）
Node.js APIとして使う場合。
npm install oxc-parser
oxc-transform（トランスフォーマー）
TypeScript/JSX変換に使う場合。
npm install oxc-transform
基本的な使い方
oxlintでプロジェクトをリント
# カレントディレクトリを再帰的にリント
npx oxlint@latest
# 特定のディレクトリを指定
npx oxlint@latest ./src
# ヘルプを表示
npx oxlint@latest --help
# 利用可能なルール一覧
npx oxlint@latest --rules
ESLintと違って設定ファイルがなくてもちゃんと動くのが良いですね。「とりあえず問題のあるコードを見つけたい」というケースでは一択です。
パーサーの使用例
import { parseSync } from 'oxc-parser';
const code = `
function greet(name: string): string {
return \`Hello, \${name}!\`;
}
`;
const result = parseSync(code, { sourceType: 'module' });
console.log(result.program); // AST出力
TypeScriptも問題なくパースできます。ASTを扱うツールを作る場合に重宝しますね。
トランスフォーマーの使用例
import { transform } from 'oxc-transform';
const code = `
const Component: React.FC = () => {
return <div>Hello World</div>;
};
`;
const result = transform('component.tsx', code, {
typescript: true,
jsx: 'react'
});
console.log(result.code);
TypeScriptやJSXの変換がこれだけで完結します。Babelの設定に悩む時間が減るのは時短になりますね。
実践的なユースケース
ESLintとの併用
「いきなり全部置き換えるのは怖い」という人も多いと思います。その場合はESLintと併用する形がおすすめです。
{
"scripts": {
"lint": "oxlint && eslint .",
"lint:fast": "oxlint"
}
}
oxlintを先に実行して明らかな問題を高速検出、その後ESLintで細かいチェックという流れ。日常の開発ではlint:fastを使い、CI/CDではlintを使うという運用ができます。
pre-commitフックでの活用
コミット前のチェックに使う場合、速度は正義です。
# .husky/pre-commit
npx oxlint@latest --deny warnings
ESLintだと「待ち時間が長いからフック外そう」となりがちですが、oxlintなら一瞬で終わるのでストレスなく運用できます。
CIパイプラインでの活用
GitHub Actionsでの例。
- name: Lint
run: npx oxlint@latest --deny warnings
CI時間の短縮は開発効率に直結するので、大規模プロジェクトほど恩恵が大きいです。
まとめ
Oxcは「速い」だけじゃなく、実用性もちゃんとあるツールチェーンです。
個人的には以下の点が特に評価できます。
- 圧倒的な速度で開発体験が向上
- 設定不要ですぐに使い始められる
- Vite/Rolldownとの統合で将来性がある
- 大手企業の採用実績があり信頼できる
30代になって思うのは、ツールの待ち時間って積み重なると馬鹿にならないということ。ESLintの数秒が1日100回あれば数分、1年で何時間にもなる。Oxcを導入してその時間を取り戻せるなら、試してみる価値は十分あると思います。
まだフォーマッターやミニファイヤーはアルファ版ですが、リンターとパーサーは十分実用レベル。まずはoxlintから試してみて、その速さを体感してみてください。
npx oxlint@latest
この1行で、JavaScript開発の快適さが変わるかもしれませんよ。