速さだけじゃない！ VoidZero ツールが移行先に選ばれる理由

2026/06/02 に「フロントエンド開発はどこまで速くなるのか？〜Oxcで考えるツールチェーン〜」というイベントで話した資料です。
https://findy.connpass.com/event/391160/

Transcript

1. 速さだけじゃない！ VoidZero ツールが 移行先に選ばれる理由 id:mizdra 2026/06/02 #oxc_findy 1
2. 自己紹介 • mizdra (みずどら) • インターネット大好き • 株式会社はてな ◦ フロントエンドエキスパート ◦ フロントエンド会 (社内組織) の運営 2
3. 3 今日の話 VoidZero ツールについて
4. VoidZero ツールへの移行が流行ってる • Sentry が Oxfmt, Oxlint に移行 ◦ https://github.com/getsentry/sentry-javascript/pull/19134 • Renovate が Oxlint に移行 ◦ https://github.com/renovatebot/renovate/pull/42384 • v0 が Oxlint, Oxfmt に移行 4 https://x.com/shuding/status/2034228876856209850
5. 移行が流行っている理由 • 速さ、だけじゃない • 他にも理由があって採用されてる (と僕は思ってる) ◦ 従来ツールの問題を解決してる ◦ 互換性があって移行しやすい 5
6. 今日話すこと • (速さ以外の) 従来ツールの問題 • VoidZero ツールがどう解決してるか • 従来ツールとの互換性 6
7. 7 (速さ以外の) 従来ツールの問題
8. (速さ以外の) 従来ツールの問題 • 設定項目が多い • バージョン更新が難しい • 依存関係が多くなりがち 8
9. 問題① 設定項目が多い • TypeScript を使うには... ◦ ESLint: typescript-eslint が必要 ◦ Jest: @babel/preset-typescript or ts-jest が必要 • tsconfig.json の paths を使うには... ◦ ESLint: eslint-import-resolver-typescript が必要 ◦ Jest: moduleNameMapper による設定が必要 9
10. 問題① 設定項目が多い • ちょっとした lint rule を使おうと思うと... ◦ eslint-plugin-node や eslint-plugin-import が必要 • 割とよく使われるものでも、設定を足さないといけない 10
11. 問題② バージョン更新が難しい • ツールのメジャーバージョンを上げようにも... ◦ plugin (eslint plugin, ts-jest など) が対応してなくて上げられない • 例: eslint-plugin-import ◦ ESLint v10 (2026/2 リリース) にまだ対応してない... ◦ ちなみに ESLint v9 (2024/4) の対応は半年掛かってた 11
12. 問題③ 依存関係が多くなりがち • ESLint や Jest などの依存関係もそうだけど... • plugin にも依存関係がある ◦ eslint-plugin-import: 201個 (※1) ◦ ts-jest: 275個 (※2) • plugin をどんどん入れていくと... ◦ 依存関係の数が非常に多くなる 🤯🤯🤯 12 ※1: https://npmgraph.js.org/?q=eslint-plugin-import%402.32.0 ※2: https://npmgraph.js.org/?q=ts-jest%4029.4.11
13. 13 VoidZero ツールが どう解決してるか
14. VoidZero ツールがどう解決してるか • 様々な機能を組み込み (built-in) にすることで解決してる 14
15. TypeScript の組み込みサポート • Vite, Vitest, Oxlint などでデフォルトで対応 ◦ ts-jest や babel は不要 • tsconfig.json の paths や Project References にも対応 15
16. 3rd-party plugin の組み込みサポート • Oxlint ◦ 主要な ESLint plugin の rule を組み込んでる ◦ typescript-eslint / eslint-plugin-{import, react, nextjs, …} • Oxfmt ◦ import 文のソート機能をデフォルトで提供 16
17. これらのおかげで... • plugin をあれこれ入れなくてよい • 依存関係が自然と少なくなる • バージョン上げられない問題も起きにくい • 設定項目も最小限で済む 17
18. 余談: ツール本体の依存関係の数 • 従来ツールは非常に多い ◦ eslint: 68個 (※4) ◦ jest: 264個 (※5) • 一方 VoidZero ツールは少ないように見える ◦ vitest: 41個 ◦ oxlint: 0個 18 ※4: https://npmgraph.js.org/?q=eslint%4010.4.1 ※5: https://npmgraph.js.org/?q=jest%4030.4.2
19. 余談: ツール本体の依存関係の数 • ただしこれは npm パッケージから見た時の数 ◦ VoidZero ツールは内部で Rust バイナリを呼び出す ◦ そのバイナリは多くの crate に依存してる • crate レベルの依存関係の数を見ると... ◦ rolldown_binding: 321個 (※6) ◦ oxlint: 212個 (※7) 19 ※6: cargo tree -p rolldown_binding -e normal --prefix none | sed 's/ (\*)$//' | tail -n +2 | sort -u | wc -l ※7: cargo tree -p oxlint -e normal --prefix none | sed 's/ (\*)$//' | tail -n +2 | sort -u | wc -l
20. 余談: ツール本体の依存関係の数 • ツール本体の依存関係の数は、どっちもどっち • VoidZero ツールは npm パッケージの依存が少ないので... ◦ npm レジストリに対するサプライチェーン攻撃に多少強い、くらい 20
21. 21 従来ツールとの互換性
22. 従来ツールとの互換性 • VoidZero ツールは互換性にも力を入れている • 従来ツールからの移行のしやすさに貢献してる 22
23. Vitest • Jest と API レベルの互換性がある 23
24. Oxfmt • Prettier と出力レベルで互換性がある ◦ Prettier の JS/TS conformance tests を 100% pass してる • Prettier とフォーマット結果が変わらない (※3) 24 ※3: 厳密には Prettier が誤った出力をしていて、Oxfmt が意図的に挙動を変えている ケースがある。(参照: https://github.com/oxc-project/oxc/issues/18717)
25. Oxlint • ESLint の組み込み・3rd-party の rule を実装 • ESLint Plugin を読み込める ◦ eslint-plugin-react-hooks が普通に動く 25
26. マイグレーションツールの提供 • 公式から codemod が提供されてる ◦ npx oxfmt --migrate=prettier ◦ npx @oxlint/migrate • skill もある ◦ npx skills add https://github.com/oxc-project/oxc --skill migrate-oxfmt ◦ npx skills add https://github.com/oxc-project/oxc --skill migrate-oxlint • 互換性があるからできること 26
27. 27 まとめ
28. まとめ • 従来ツールには速さ以外にも問題があった ◦ 設定項目が多い / バージョン更新が難しい / 依存関係が多くなりがち • 対して VoidZero ツールは... ◦ 様々な機能を組み込みにすることで解決 ◦ 従来ツールとの互換性も担保 ▪ 移行のしさすさに貢献 • 様々な工夫のおかげで、移行先として選ばれてる 28
29. はてな サマーインターンシップ 2026!! • はてな京都オフィスでの講義パー ト & オンラインの実践パート！ • 8月17日(月)~9月4日(金) ◦ 前半1週間: 京都オフィス ◦ 後半2週間: オンライン • 応募フォームにたどり着くために はクイズに回答する必要がありま す。腕試しにぜひチャレンジして ください！ 29