お試しで oxlint を導入してみる #vuefes_aftertalk

弁護士ドットコム株式会社 Nobuaki Kambe お試しで oxlint を導入してみる 2025.11.11

© 2025 Bengo4.com, inc. 自己紹介 Nobuaki Kambe 所属弁護士ドットコム株式会社開発本部
担当業務クラウドサインフロントエンド趣味バイク・映画鑑賞・漫画

会社紹介 3

© 2025 Bengo4.com, inc. VISION まだないやり方で、世界を前へ。 Drive a paradigm shift
for the better world. MISSION ｢プロフェッショナル・テック｣で、次の常識をつくる。 Be the Professional-Tech Company. プロフェッショナルだからできること。専門知とテクノロジーで、社会に貢献する。

© 2025 Bengo4.com, inc. 5 5 5 税理士に無料で相談・検索できる日本最大級の税務相談ポータルサイト最新の法改正や実務について分かりやすく解説する
日本最大級の企業法務ポータルサイトクラウドサインは、弁護士ドットコムが運営するサービスです OUR SERVICE AI基盤技術「 LegalBrain 1.0」を組み込んだリーガル特化型 AIエージェント契約の締結から管理までデジタルで完結させる契約マネジメントプラットフォーム時事問題の弁護士解説を中心としたメディア日本最大級の無料法律相談ポータルサイト弁護士事務所、企業法務職向け人材紹介事業

© 2025 Bengo4.com, inc. 9 • OXC という OSS への貢献と、その振り返り
• Introducing Vite DevTools • 最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発個人的には

© 2025 Bengo4.com, inc. INDEX 13 Oxc とは移行方法実装
結果まとめおわりに 1. 2. 3. 4. 5. 6. 本日お話する内容

Oxc とは 14

© 2025 Bengo4.com, inc. Oxc とは Rust で書かれた JavaScript ツールのコレクションのこと 
• ✅ Parser  • ✅ Linter  • ✅ Resolver  • ✅ Transpiler • 🚧 Minifier  • 🚧 Formatter  • 🚧 Rolldown  • 🚧 Nova

© 2025 Bengo4.com, inc. Oxc とは特徴 • Linter（oxlint） ◦
ESLintの50-100倍高速  ◦ CPUのコアに応じてスケール（コア数が増えるほど、処理できるファイルが多くなり高速）   ◦ 600以上のルール（現時点）   • Formatter（oxfmt）  ◦ Prettierより45倍高速  ▪ Evan You san のポストから 👉 

移行方法 18

© 2025 Bengo4.com, inc. 移行方法 oxlint の移行方法は、2種類あります。 • oxlint-migrate
（oxlint に完全移行するパターン）   ◦ ESLint の設定を oxlint に移行できる（ただし、Flat Config 形式のみをサポート）   ◦ 使用方法は、下記のコマンドを実行   ▪ npx @oxlint/migrate <your-eslint-flat-config-path>   ◦ https://github.com/oxc-project/oxlint-migrate     • eslint-plugin-oxlint （ESLint と oxlint を併用するパターン）   ◦ oxlint でカバーしているルールを ESLint 側で無効にできる  ◦ https://github.com/oxc-project/eslint-plugin-oxlint

© 2025 Bengo4.com, inc. 移行方法 eslint-plugin-oxlint は、ルールの重複防止が目的のプラグインです。     仕組みの流れ 
1. oxlint の設定ファイルを読み込み、ルールの解析   2. oxlint でカバーしている ESLint ルールのリストを作成   3. 各ルールを off にした上で ESLint の設定を返す   4. 既存設定を上書きして、適用する  

実装 24

© 2025 Bengo4.com, inc. 実装 1. oxlint と eslint-plugin-oxlint をインストールする
　$ npm install --save-dev oxlint eslint-plugin-oxlint　  

© 2025 Bengo4.com, inc. 実装 2. ESLint の設定ファイルに追記 import oxlint
from 'eslint-plugin-oxlint' export default [ ...,　// other plugins ...oxlint.buildFromOxlintConfigFile('./.oxlintrc.json') ] 配列の最後に oxlint.buildFromOxlintConfigFile 関数を追加する eslint.config.mjs ファイル

© 2025 Bengo4.com, inc. 実装 oxlint.buildFromOxlintConfigFile 関数は、.oxlintrc.json を読み込んで、oxlint がチェックするルールを ESLint
では無効にするためのもの { "rules": { "eqeqeq": "warn", "no-var": "error", "curly": "warn" } } 上記のように、Flat Config 形式の配列を ESLint 側に返している。 name に oxlint の識別名を付与した上で、既存の ESLint の設定を上書きして無効にしている。 [ { "name": "oxlint/from-oxlint-config", "rules": { "eqeqeq": "off", "no-var": "off", "curly": "off" } } ] 返却値例 eslint.config.mjs ファイル .oxlintrc.json ファイル

© 2025 Bengo4.com, inc. 前提 oxlint の設定ファイルは、JSONオブジェクトです。各プロパティの役割は以下 rules 個別にルールを設定する
plugins 特定のフレームワーク、ファイルタイプのプラグインルールを拡張する categories 同様の動作、目的を持つルールのグループを一括管理する ignorePatterns lint の対象から除外するファイルパターンを指定する env 環境に基づいて定義されているグローバル変数を有効化する globals 個別のグローバル変数を読み取り、または書き込み可能にする settings プラグイン用の設定で、複数のルールに共通で適用する https://oxc.rs/docs/guide/usage/linter/config.html#configuration-file-format

© 2025 Bengo4.com, inc. 実装 $schema…エディタ上でプロパティの説明や補完が効くように、 JSONスキーマファイルを指定 categories…カテゴリと重要度のレベルを指定 rules…ESLintで使用していて、 categories
に属していないルールを個別で定義 plugins…基本セット（eslint、typescript、oxc、unicorn）を上書きするため、pluginsフィールドの指定をする場合は、有効にしたいプラグインを全て明示的に列挙する必要があります。明示的に指定をしてあげることで、 eslint-plugin-oxlint プラグインにより、ESLint側でルールが off になります。 { "$schema": "./node_modules/oxlint/configuration_schema.json", "categories": { "correctness": "error", "suspicious": "warn", "perf": "warn" }, "rules": { 　　// categories に属していないルールを明示的に列挙　　（68個ほどありました） }, "plugins": [ "eslint",　// eslint (コア)のルール "typescript",　// @typescript-eslintのルール "oxc",　// oxc独自のカスタムルール "import", // eslint-plugin-importのルール "promise", // eslint-plugin-promiseのルール "vitest", // eslint-plugin-vitestのルール "vue" // <script>タグで動作する eslint-plugin-vueのルール ], } .oxlintrc.json ファイル

© 2025 Bengo4.com, inc. categories の概念 oxlint の各ルールは、それぞれカテゴリに属している。このカテゴリは、 Rust の標準リンターである
Clippy の基準に基づいています。https://github.com/rust-lang/rust-clippy Correctness 明らかに間違っている、または無意味なコード Perf コードのパフォーマンス向上を目的として、より高速に実行できるコード Restriction 特定のパターン、構文、機能の使用を禁止するルール Suspicious おそらく間違っている、または無意味な可能性があるコード Pedantic 厳格だけれども厳しすぎるかもしれないルール Style より慣用的な方法で記述する必要があるコード Nursery まだ開発中の新しいルール

© 2025 Bengo4.com, inc. 実装 3. package.json にスクリプトを追加 ESLint の前に
oxlint を実行するようにします。oxlint の実行には数秒しかかからないため、先に oxlint を実行させることでフィードバックを早めることが目的です。 "scripts": { ... "lint": "npx oxlint && npx eslint", ... },

結果 34

© 2025 Bengo4.com, inc. 結果元々、ESLint 単体の実行時間：21秒ほど   ↓  ESLint
＋ oxlint の実行時間：20秒ほどになりました。   （ESLint 18.1秒 + oxlint 1.5秒ほど）     トータルでの実行時間の削減に加えて、 oxlint を先に実行することで数秒で oxlint の結果が得られ、 ESLint の完了を待たずに早期にフィードバックを受け取ることができるようになったので開発体験が向上しました。      oxlint のみの実行結果（早すぎる🥹！）

© 2025 Bengo4.com, inc. 出力結果の差異 ESLint oxlint ESLint がシンプルなテキスト、行番号の表示に対し、 oxlint
は視覚的にわかりやすい状態でリッチになっている。また、具体的なヘルプメッセージがあるので修正がしやすくなっている。

まとめ 38

© 2025 Bengo4.com, inc. • oxlint の移行は、 eslint-plugin-oxlint を使用 ◦
併用することで早期フィードバックを得ることができ、開発体験が向上しました。 • Oxc の理解 ◦ 今回はお試しで oxlint を導入したことで、少し理解が進みました。今回は、Linter だけ試してみましたが、他のツールも試して理解を深めていきたい。 39 まとめ（個人的な感想）まとめ

© 2025 Bengo4.com, inc. 補足 • script タグはサポート済みで、template タグは一部のルールをサポートしている •
導入したプロジェクトの例でいうと Vue ファイルには、237個のルールが適用 ◦ その内、111個を oxlint がカバーしていました（46.8%のカバレッジ） oxlint の Vue サポート状況（現状） https://github.com/oxc-project/oxc/issues/11440 ルールの追加は、順次対応をしていただいている状況（圧倒的感謝！）

おわりに 42

お試しで oxlint を導入してみる #vuefes_aftertalk

お試しで oxlint を導入してみる #vuefes_aftertalk

More Decks by 弁護士ドットコム

Other Decks in Technology

Featured

Transcript