Oxlintはいいぞ

Transcript

1. Oxlintはいいぞ 2026/01/23 React Tokyo ミートアップ #13 Dress Code株式会社 / 山口 祐司 1
2. 2 AGENDA • 自己紹介 / 会社紹介 • Oxlintとは • パフォーマンス比較 • React関連で使えそうなプラグインルール • react/rules-of-hooks • react/exhaustive-deps • まとめ
3. 自己紹介 / 会社紹介 3
4. • 業務 ◦ プロダクトエンジニア • 経歴 ◦ 1987/12 埼玉県本庄市生まれ ◦ 2011/04 ソフトバンクモバイル株式会社 ◦ 2016/01 株式会社サイバーエージェント ◦ 2016/10 株式会社リクルートライフスタイル ◦ 2021/09 株式会社ラクス ◦ 2022/08 株式会社HRBrain ◦ 2025/07 Dress Code株式会社 • 好きなもの ◦ フロントエンドや新しいものが好き ◦ ゲーム（オープンワールドやアクション系が好き） 自己紹介 ぷーじ(@yug1224) 4
5. CONFIDENTIAL | © Dress Code Inc . All rights reserved. 14.1億円　 資金調達を実施 Pre Seed&Seed Round 200+社 が利用中　 Number of companies Number of countries 5カ国 で事業を展開　 Dress Code　会社概要 Company Name / 会社名 Dress Code 株式会社 2024年9月　正式創業：2025年4月 29名 東京都中央区築地2-1-4 銀座PREX East 8F CEO / 代表取締役 Date of establishment / 設立年月 Location / 所在地 江尻 祐樹 Member / メンバー数 5
6. 本題 6
7. • Rust製の超高速JavaScriptリンター ◦ 2025年6月にv1.0 Stableリリース • VoidZeroのプロジェクト ◦ Vite/Rolldownと同じエコシステム • 500以上のESLintルールをサポート ◦ React, TypeScript, Jest, Unicornなどの人気プラグインが既に統合済み • 採用事例 ◦ Shopify, Airbnb, Mercedes-Benz, etc 7 Oxlintとは
8. • VSCode ◦ Oxlint: 128.6ms (2.7x ~ 62x) ◦ Biome: 377.2ms ◦ ESLint: 31.0s • vuejs/core ◦ Oxlint + Type-Aware: 2.5s (8.2x) ◦ ESLint + typescript-eslint: 20.8s • Sentry ◦ Oxlint + Type-Aware: 4.4s (12.4x) ◦ ESLint + typescript-eslint: 55.0s 8 パフォーマンス比較
9. 9 • eslint : 基本的なJavaScriptのベストプラクティス • unicorn : モダンなJavaScriptの書き方 • typescript : TypeScript特有のチェック • react : Reactコンポーネント・Hooks • jsx-a11y : アクセシビリティ • import : import/export文の整理 • promise : 非同期処理のベストプラクティス • react-perf : パフォーマンス最適化 • etx. React関連で使えそうなプラグインルール
10. 10 • https://oxc.rs/docs/guide/usage/linter/rules/react/rules-of-hooks • Hooksのルールを強制 • 検出できる違反パターン ◦ 条件分岐内 : if (condition) { useState() } ◦ ループ内 : for (...) { useState() } ◦ 早期リターン後 : if (!user) return; useState() ◦ イベントハンドラ内: onClick={() => { useState() }} ◦ ネストされた関数内: function inner() { useState() } ◦ try/catch/finally内 : try { useState() } catch {} react/rules-of-hooks
11. 11 react/rules-of-hooks
12. 12 • https://oxc.rs/docs/guide/usage/linter/rules/react/exhaustive-deps • useEffectの依存配列の不足を検出 • 対応するHooks ◦ useEffect ◦ useLayoutEffect ◦ useCallback ◦ useMemo ◦ useImperativeHandle ◦ カスタムHooks（additionalHooksオプションで設定可能） • 依存配列が不足すると起こる問題 ◦ 古い値を参照（stale closure） : コールバック内の変数が古いままになる ◦ 再実行されない : propsやstateが変わってもeffectが実行されない ◦ 無限ループ : 依存配列を正しく設定しないと無限ループになることも react/exhaustive-deps
13. 13 react/exhaustive-deps
14. まとめ 14
15. OxlintはRust製の超高速リンターで、ESLintより50〜100倍高速 ESLintで人気のプラグインから統合されたルールが500以上あり、 rules-of-hooksやexhaustive-depsなど、 React開発者にとって有用なプラグインルールに対応しているのも良い npx oxlint@latest ですぐ試してみよう！ 導入事例ブログもご覧ください！ https://zenn.dev/dress_code/articles/d655cd7a43b936 15 まとめ
16. • Oxlint公式: https://oxc.rs/docs/guide/usage/linter • ルール一覧: https://oxc.rs/docs/guide/usage/linter/rules.html • rules-of-hooks: https://oxc.rs/docs/guide/usage/linter/rules/react/rules-of-hooks • exhaustive-deps: https://oxc.rs/docs/guide/usage/linter/rules/react/exhaustive-deps • Linter Product Plan and Progress: https://github.com/oxc-project/oxc/issues/481 • Benchmark: https://github.com/oxc-project/bench-linter • Type-Aware Linting Alpha: https://oxc.rs/blog/2025-12-08-type-aware-alpha.html • Oxlint v1.0 Stable: https://oxc.rs/blog/2025-06-10-oxlint-stable.html • Oxlint General Availability: https://oxc.rs/blog/2023-12-12-announcing-oxlint.html • ブログ: https://zenn.dev/dress_code/articles/d655cd7a43b936 16 参考リンク
17. Thank you for your attention. We are Hiring! 17