Slide 1

Slide 1 text

Oxlint は ESLint / typescript-eslint を置き換えられるか? 株式会社うるる 藤田 翔雅

Slide 2

Slide 2 text

自己紹介 名前 所属  入社 担当領域 趣味 藤田 翔雅 株式会社うるる Govtech事業本部 開発部 4年目(2023年新卒入社) フロントエンド(たまにバックエンド) 映画鑑賞

Slide 3

Slide 3 text

会社紹介 株式会社うるる https://recruit.uluru.biz/

Slide 4

Slide 4 text

今回の発表で伝えたいこと そもそもVoidZero/Oxlintとは? なぜ型解析は重い? ESLintとOxlintの定量的・定性的な比較 今回伝えたいこと 現場への導入判断の一助にできる Oxlintの現状について(ルール網羅率など)

Slide 5

Slide 5 text

VoidZeroとは? VoidZero JavaScriptのための次世代開発ツールを構築して Web開発者の生産性を高めることをミッションに掲げている組織 https://voidzero.dev/

Slide 6

Slide 6 text

Oxlintとは? Oxlint 次世代ツール群「Oxc」の一部として提供される、Rust製の超高速リンター 2025年に安定版がリリースされ、 ベンチマークでは、ESLint比で50〜100倍という圧倒的な実行速度 https://oxc.rs/

Slide 7

Slide 7 text

ESLint(※1) Oxlint(※2) 8.213s Type-Aware Linting 無しでの比較 Oxlint爆速、でも Type-Aware Linting どうする? 0.304s ※1 JS, TS, React, React Hooks の recommended(総ルール数: 105) ※2 correctness, suspicious, pref の categories, TS, React Hooks(総ルール数: 141) 27x

Slide 8

Slide 8 text

実装言語 Type-Aware Linting バージョン ESLint JavaScript ❌ 安定 EsLint + typescript-eslint JavaScript ✅ 安定 Oxlint Rust ❌ 安定(2025) Oxlint + oxlint-tsgolint Rust + Go ✅(59/61) 非安定 現状把握

Slide 9

Slide 9 text

結果 型無しルール 構文解析(Parse) ソースコード 型解析がボトルネックな理由 型なしLint

Slide 10

Slide 10 text

結果 型ありルール 全体の型グラフ構築 (tsc/tsgo) 型無しルール 型解析がボトルネックな理由 Type Aware Linting

Slide 11

Slide 11 text

ESLint における Type-Aware Linting 有無比較 ESLint ※1 ESLint(TAL) ※2 0 5 10 15 20 実行時間 型解析がボトルネックな理由 実行時間 増加 約 +7.9s ※1 JS, TS, React, React Hooks の recommended / ルール数: 105 ※2 ESLint の設定 + recommendedTypeChecked / ルール数: 128 8.213s 16.121s Type-Aware Lintng = TAL で省略表示

Slide 12

Slide 12 text

Oxlint における Type-Aware Linting 有無比較 Oxlint ※1 Oxlint(TAL) ※2 0.0 0.2 0.4 0.6 0.8 1.0 実行時間 型解析がボトルネックな理由 実行時間 増加 + 0.503s ※1 correctness, suspicious, pref の categories, TS, React Hooks / ルール数: 141 ※2 Oxlint の設定 + options.typeAware: true / ルール数: 166 0.304s 0.807s

Slide 13

Slide 13 text

ESLint における Type-Aware Linting 有無比較 ESlint ※1 ESLint(TAL) ※2 0 500 1000 1500 2000 実行時間 型解析がボトルネックな理由 メモリ使用率 増加 約 x2 ※1 JS, TS, React, React Hooks の recommended / ルール数: 105 ※2 ESLint の設定 + recommendedTypeChecked / ルール数: 128 933MiB 1882.7MiB

Slide 14

Slide 14 text

Oxlint における Type-Aware Linting 有無比較 Oxlint ※1 Oxlint(TAL) ※2 0 50 100 150 200 250 300 実行時間 型解析がボトルネックな理由 メモリ使用率 増加 約 x2.2 ※1 correctness, suspicious, pref の categories, TS, React Hooks / ルール数: 141 ※2 Oxlint の設定 + options.typeAware: true / ルール数: 166 116.5MiB 267.4MiB

Slide 15

Slide 15 text

結局 ESLint と Oxlint の比較は? サンプルプロジェクトの定量結果

Slide 16

Slide 16 text

ESLint と Oxlint の比較 Type-Aware Linting なし ESLint ※1 Oxlint ※2 0 2 4 6 8 10 実行時間 サンプルプロジェクトの定量結果 実行時間 短縮 約 x27 ※1 JS, TS, React, React Hooks の recommended / ルール数: 105 ※2 correctness, suspicious, perf の categories, TS, React Hooks / ルール数: 141 8.213s 0.304s

Slide 17

Slide 17 text

ESLint と Oxlint の比較 Type-Aware Linting あり ESlint(TAL) ※1 Oxlint(TAL) ※2 0 5 10 15 20 実行時間 サンプルプロジェクトの定量結果 実行時間 短縮 約 x20 ※1 ESLint の設定 + recommendedTypeChecked / ルール数: 128 ※2 Oxlint の設定 + options.typeAware: true / ルール数: 166 16.212s 0.807s

Slide 18

Slide 18 text

ESLint と Oxlint の比較 Type-Aware Linting なし ESLint ※1 Oxlint ※2 0 200 400 600 800 1000 実行時間 サンプルプロジェクトの定量結果 メモリ使用率 低下 約 x8 ※1 JS, TS, React, React Hooks の recommended / ルール数: 105 ※2 correctness, suspicious, perf の categories, TS, React Hooks / ルール数: 141 933MiB 116.5MiB

Slide 19

Slide 19 text

ESLint と Oxlint の比較 Type-Aware Linting あり ESlint(TAL) ※1 Oxlint(TAL) ※2 0 500 1000 1500 2000 実行時間 サンプルプロジェクトの定量結果 メモリ使用率 低下 約 x7 ※1 ESLint の設定 + recommendedTypeChecked / ルール数: 128 ※2 Oxlint の設定 + options.typeAware: true / ルール数: 166 1882.7MiB 267.4MiB

Slide 20

Slide 20 text

oxlint-tsgolint 導入について oxlint-tsgolint導入のリアル まだ安定版ではない 01.バージョン 02.CLI 03.設定 @oxlint/migrate などの CLIツール が整備されている oxlint-tsgolint を入れて options.typeAware: true で使用できる

Slide 21

Slide 21 text

ESLintとの定性的な比較 ESLint と比べた定性的メリット CI コスト・実行時間の削減 ※ メモリ使用率も低い 01.時間 02.統一性 03.学習コスト Oxc エコシステムの統一性 ESLintルール名との 互換性・学習コスト低

Slide 22

Slide 22 text

非 Type Aware Linting であれば Oxlint 移行 非安定版だが、ルール網羅率も高い カスタムルールがあると移行コストは上がる まとめ とはいえ安定版運用が必須の PJ は ESLint 継続 Oxlint は ESLint / typescript-eslint を置き換えられるか?