Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.

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

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

Avatar for mizdra

mizdra PRO

June 01, 2026

More Decks by mizdra

Other Decks in Technology

Transcript

  1. 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
  2. 問題① 設定項目が多い • TypeScript を使うには... ◦ ESLint: typescript-eslint が必要 ◦

    Jest: @babel/preset-typescript or ts-jest が必要 • tsconfig.json の paths を使うには... ◦ ESLint: eslint-import-resolver-typescript が必要 ◦ Jest: moduleNameMapper による設定が必要 9
  3. 問題① 設定項目が多い • ちょっとした lint rule を使おうと思うと... ◦ eslint-plugin-node や

    eslint-plugin-import が必要 • 割とよく使われるものでも、設定を足さないといけない 10
  4. 問題② バージョン更新が難しい • ツールのメジャーバージョンを上げようにも... ◦ plugin (eslint plugin, ts-jest など)

    が対応してなくて上げられない • 例: eslint-plugin-import ◦ ESLint v10 (2026/2 リリース) にまだ対応してない... ◦ ちなみに ESLint v9 (2024/4) の対応は半年掛かってた 11
  5. 問題③ 依存関係が多くなりがち • 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
  6. TypeScript の組み込みサポート • Vite, Vitest, Oxlint などでデフォルトで対応 ◦ ts-jest や

    babel は不要 • tsconfig.json の paths や Project References にも対応 15
  7. 3rd-party plugin の組み込みサポート • Oxlint ◦ 主要な ESLint plugin の

    rule を組み込んでる ◦ typescript-eslint / eslint-plugin-{import, react, nextjs, …} • Oxfmt ◦ import 文のソート機能をデフォルトで提供 16
  8. 余談: ツール本体の依存関係の数 • 従来ツールは非常に多い ◦ 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
  9. 余談: ツール本体の依存関係の数 • ただしこれは 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
  10. Oxfmt • Prettier と出力レベルで互換性がある ◦ Prettier の JS/TS conformance tests

    を 100% pass してる • Prettier とフォーマット結果が変わらない (※3) 24 ※3: 厳密には Prettier が誤った出力をしていて、Oxfmt が意図的に挙動を変えている ケースがある。(参照: https://github.com/oxc-project/oxc/issues/18717)
  11. Oxlint • ESLint の組み込み・3rd-party の rule を実装 • ESLint Plugin

    を読み込める ◦ eslint-plugin-react-hooks が普通に動く 25
  12. マイグレーションツールの提供 • 公式から 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
  13. まとめ • 従来ツールには速さ以外にも問題があった ◦ 設定項目が多い / バージョン更新が難しい / 依存関係が多くなりがち •

    対して VoidZero ツールは... ◦ 様々な機能を組み込みにすることで解決 ◦ 従来ツールとの互換性も担保 ▪ 移行のしさすさに貢献 • 様々な工夫のおかげで、移行先として選ばれてる 28
  14. はてな サマーインターンシップ 2026!! • はてな京都オフィスでの講義パー ト & オンラインの実践パート! • 8月17日(月)~9月4日(金)

    ◦ 前半1週間: 京都オフィス ◦ 後半2週間: オンライン • 応募フォームにたどり着くために はクイズに回答する必要がありま す。腕試しにぜひチャレンジして ください! 29