5分でマスターするOxlint：ESLintより50倍速いコードチェックツール（実践チュートリアル）

eslint ./src を実行した後、ターミナルでスクロールするファイルリストを見ながら、数十秒あるいはそれ以上待ったことはありませんか？プロジェクトが大きくなるほど、待ち時間は長くなり、開発リズムを大きく遅らせます。

今日は、この体験を根本から変えるツール「Oxlint」を紹介します。ESLintより50倍以上速く、しかもすぐに使えて、学習コストはほぼゼロです。

コードチェックとは？

Oxlintに入る前に、「コードチェック」（Linting）とは何かを理解しましょう。

なぜLinterが必要なのか？

コードチェックツールはコードの問題を見つけてくれます：

// 一見すると気づかない問題
const name = 'test';
function getName() {
  return nam; // タイプミス！name が正しい
}

if (x = 10) { // === ではなく = が使われている
  console.log('x is 10');
}

var unused = 'I am never used'; // 定義されたが使われていない

コードチェックツールは：

• エラーの発見：タイプミス、構文問題、論理的な落とし穴
• スタイルの統一：チームのコードスタイルを一貫性のあるものに
• 品質の向上：一般的なコード問題を回避

ESLintとは？

ESLintはJavaScriptエコシステムで最も人気のあるコードチェックツールで、ほぼすべてのフロントエンドプロジェクトで使用されています。しかし、パフォーマンスの問題は常に批判されてきました：

• 大規模プロジェクトでのチェック時間が長すぎる
• プラグインの読み込みに多くの時間を消費
• メモリ使用量が高い

Oxlintとは？

OxlintはOXCプロジェクトの一部で、Rustで書かれ、ESLintの代替として設計されています。特徴は：

• 究極の速度：ESLintより50-100倍速い
• 高い互換性：ESLintルールと設定形式をサポート
• すぐに使える：複雑な設定不要、デフォルトで推奨ルールが有効
• 継続的な更新：ESLintエコシステムを急速に追跡中

Oxlintのインストール

Oxlintのインストールは非常にシンプルで、複数の方法から選べます。

方法1：グローバルインストール

# npmを使用
npm install -g oxlint

# yarnを使用
yarn global add oxlint

# pnpmを使用
pnpm add -g oxlint

インストール後、任意のディレクトリで oxlint コマンドを使用できます。

方法2：プロジェクト内インストール

# 開発依存としてインストール
npm install oxlint --save-dev

そして package.json にスクリプトを追加：

{
  "scripts": {
    "lint": "oxlint ./src"
  }
}

方法3：インストール不要で直接使用

# npxで一時的に実行
npx oxlint ./src

この方法は、素早く体験したい場合やグローバルインストールしたくない場合に適しています。

初めての使用

インストールが完了したら、実際に体験してみましょう。

単一ファイルのチェック

src/main.js というファイルがあるとします：

// src/main.js
const unusedVar = 'I am not used';

function greeting(name) {
  console.log('Hello, ' + nam); // タイプミス
  return 'Hello, ' + name;
}

greeting('World');

チェックを実行：

oxlint src/main.js

出力結果：

  ⚠ eslint(no-unused-vars): 'unusedVar' is defined but never used.
    ╭─[src/main.js:2:7]
  2 │   const unusedVar = 'I am not used';
    ·         ─────┬────
    ·              ╰── 'unusedVar' is defined here.
    ╰────────────────────────────────────

  ⚠ eslint(no-undef): 'nam' is not defined.
    ╭─[src/main.js:5:28]
  5 │     console.log('Hello, ' + nam);
    ·                            ─┬─
    ·                             ╰── 'nam' is not defined.
    ╰────────────────────────────────

  Finished in 3ms on 1 file with 0 errors and 2 warnings.

Oxlintが2つの問題を発見したことがわかります：

1. unusedVar は定義されたが使われていない
2. nam 変数は未定義（name が正しい）

プロジェクト全体のチェック

# srcディレクトリの全ファイルをチェック
oxlint ./src

# 複数のファイルタイプをチェック
oxlint "./src/**/*.{js,jsx,ts,tsx,vue}"

出力形式：

  Finished in 12ms on 234 files with 0 errors and 5 warnings.

気づきましたか？12ミリ秒で234ファイルをチェック！

問題の自動修正

Oxlintは一部の問題を自動修正できます：

# 修正可能な問題を自動修正
oxlint ./src --fix

自動修正の内容には以下が含まれます：

• 未使用変数の削除
• シンプルなコードスタイル問題の修正
• コードフォーマットの調整

実践：既存プロジェクトにOxlintを追加

一通り演练してみましょう。プロジェクトにOxlintを追加します。

ステップ1：テストプロジェクトの作成

# プロジェクトディレクトリの作成
mkdir my-project
cd my-project

# npmの初期化
npm init -y

# ソースコードディレクトリの作成
mkdir src

テストファイル src/index.js を作成：

// src/index.js
import React from 'react';

// 未使用の変数
const API_URL = 'https://api.example.com';
const unusedConfig = { debug: true };

// 関数定義
function fetchData(url) {
  // エラーハンドリングが不足
  return fetch(url).then(res => res.json());
}

// var を使用（const/let ではなく）
var data = null;

// メイン関数
async function main() {
  data = await fetchData(API_URL);
  console.log('Data loaded:', data);
}

main();

ステップ2：Oxlintのインストール

npm install oxlint --save-dev

ステップ3：package.jsonにスクリプトを追加

{
  "name": "my-project",
  "scripts": {
    "lint": "oxlint ./src",
    "lint:fix": "oxlint ./src --fix"
  },
  "devDependencies": {
    "oxlint": "^0.15.0"
  }
}

ステップ4：初回チェックの実行

npm run lint

出力例：

  ⚠ eslint(no-unused-vars): 'unusedConfig' is defined but never used.
    ╭─[src/index.js:8:7]
  8 │   const unusedConfig = { debug: true };
    ·         ───────┬──────
    ·                ╰── 'unusedConfig' is defined here.
    ╰───────────────────────────────────────

  ⚠ eslint(no-var): Unexpected var, use let or const instead.
    ╭─[src/index.js:17:3]
 17 │   var data = null;
    ·   ─────┬────
    ·        ╰── Use `let` or `const` instead of `var`.
    ╰───────────────────────────────────────

  Finished in 4ms on 1 file with 0 errors and 2 warnings.

ステップ5：出力結果の理解

Oxlintの出力にはいくつかの重要な情報が含まれています：

1. ルール名：no-unused-vars、no-var など
2. 問題の場所：ファイル名、行番号、列番号
3. 問題の説明：問題の内容を明確に説明
4. 統計情報：チェック時間、ファイル数、エラーと警告数

ステップ6：問題の自動修正

npm run lint:fix

修正後、src/index.js の変更：

// src/index.js
import React from 'react';

// 未使用の変数は削除された
const API_URL = 'https://api.example.com';

// 関数定義
function fetchData(url) {
  // エラーハンドリングが不足
  return fetch(url).then(res => res.json());
}

// var が let に変更された
let data = null;

// メイン関数
async function main() {
  data = await fetchData(API_URL);
  console.log('Data loaded:', data);
}

main();

設定ファイル入門

Oxlintは設定ファイルでルールをカスタマイズできます。

設定ファイルの作成

プロジェクトのルートに oxlint.json を作成：

{
  "rules": {
    "no-unused-vars": "error",
    "no-console": "warn",
    "no-var": "error",
    "prefer-const": "warn"
  }
}

ルールレベル

各ルールは3つのレベルで設定できます：

レベル	説明
"off" または 0	ルールを無効化
"warn" または 1	警告、CIをブロックしない
"error" または 2	エラー、非ゼロの終了コードを返す

よく使うルール設定

{
  "rules": {
    // 変数関連
    "no-unused-vars": "error",
    "no-undef": "error",
    "prefer-const": "warn",

    // コードスタイル
    "no-var": "error",
    "eqeqeq": ["error", "always"],
    "curly": ["warn", "multi-line"],

    // ベストプラクティス
    "no-console": "warn",
    "no-debugger": "error",
    "no-alert": "warn"
  }
}

ファイルの除外

.oxlintignore ファイルを作成して、チェック不要なディレクトリを除外：

# .oxlintignore
node_modules/
dist/
build/
*.min.js
*.d.ts

VS Code統合

エディタでリアルタイムにコードの問題を確認できると、開発効率が大幅に向上します。

プラグインのインストール

1. VS Codeを開く
2. 「oxlint」プラグインを検索
3. Oxlint プラグインをインストール

プラグインの設定

.vscode/settings.json に設定を追加：

{
  "oxlint.enable": true,
  "oxlint.run": "onSave",
  "oxlint.configPath": "./oxlint.json"
}

効果のデモ

プラグインインストール後、ファイル保存時に自動チェック：

// エディタで直接波線のヒントが表示される
const unused = 'I am never used';  // ~~~~~~ 'unused' is defined but never used

var oldStyle = 'use let/const';    // ~~~ Use `let` or `const` instead of `var`.

波線にマウスをホバーすると、詳細な問題説明と修正提案が表示されます。

よくある質問

OxlintはESLintを完全に置き換えられる？

現時点では完全な置き換えはできませんが、多くのシーンで十分使えます。

Oxlintの利点：

• 非常に高速、日常開発に最適
• 一般的なルールのほとんどをサポート
• 設定がシンプル、すぐに使える

現在の制限：

• 一部の高度なルールは未実装
• プラグインエコシステムはESLintほど豊富ではない
• フレームワーク固有のルール（vue-eslint-pluginなど）のサポートは限定的

ESLintからどう移行する？

段階的な移行戦略：

1. 並行実行：ESLintとOxlintを同時に保持

   {
     "scripts": {
       "lint": "oxlint ./src && eslint ./src"
     }
   }

2. 段階的な切り替え：日常開発ではOxlintを使用し、CIではESLintを保持

3. 完全移行：Oxlintがすべてのニーズを満たしたら、ESLintを削除

OxlintとESLintのチェック結果が異なる？

これは正常で、理由は：

• ルールの実装詳細に差異がある可能性
• デフォルトで有効なルールセットが異なる
• 一部のルールは未実装

解決方法：設定ファイルでルールを統一。

どのファイルタイプをサポート？

Oxlintは以下をサポート：

• JavaScript (.js, .mjs, .cjs)
• TypeScript (.ts, .tsx, .mts, .cts)
• JSX (.jsx)
• Vue (.vue)
• Astro (.astro)
• Svelte (.svelte)

パフォーマンス比較の実測

実際のデータで見てみましょう。

テスト環境

• プロジェクト：中規模フロントエンドプロジェクト
• ファイル数：約500個の .ts/.tsx ファイル
• マシン：MacBook Pro M1、16GB メモリ

テスト結果

ツール	初回実行時間	増分実行時間
ESLint	42秒	38秒
Oxlint	0.6秒	0.4秒

OxlintはESLintより約70倍速い！

これは以下を意味します：

• Git pre-commitフックが分単位から秒単位に
• CIパイプラインが大幅に短縮
• 開発フィードバックサイクルが顕著に短縮

まとめ

この記事ではOxlintの核心的な使い方を紹介しました：

内容	説明
インストール	npm install -g oxlint または npx oxlint
ファイルチェック	oxlint ./src
自動修正	oxlint ./src --fix
設定ファイル	oxlint.json でルールを定義
エディタ統合	VS Code Oxlintプラグインをインストール

Oxlintの核心価値：コードチェックを「待つ」から「即座に完了」へ。

次のステップ

Oxlintの高度な設定や完全なルールリストを知りたいですか？**OXC日本語ドキュメント - Oxlintセクション**をご覧ください。

次回の記事では、Oxfmt を学びます — コードフォーマットも高速化しましょう！

---

💡 関連記事：

• 前回：フロントエンドツールが遅すぎる？Rust製OXCで100倍高速化！
• OXC日本語ドキュメント