Oxlintはいいぞ 2026/01/23 React Tokyo ミートアップ #13 Dress Code株式会社 / 山口 祐司 1 

AGENDA ● 自己紹介 / 会社紹介 ● Oxlintとは ● パフォーマンス比較 ● React関連で使えそうなプラグインルール ● react/rules-of-hooks ● react/exhaustive-deps ● まとめ 2 

自己紹介 / 会社紹介 3 

ぷーじ(@yug1224) 4 

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 

● Rust製の超高速JavaScriptリンター ○ 2025年6月にv1.0 Stableリリース ● VoidZeroのプロジェクト ○ Vite/Rolldownと同じエコシステム ● 500以上のESLintルールをサポート ○ React, TypeScript, Jest, Unicornなどの人気プラグインが既に統合済み ● 採用事例 ○ Shopify, Airbnb, Mercedes-Benz, etc Oxlint(/oʊ-ɛks-lɪnt/)とは 7 

● 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 

● eslint : 基本的なJavaScriptのベストプラクティス ● unicorn : モダンなJavaScriptの書き方 ● typescript : TypeScript特有のチェック ● react : Reactコンポーネント・Hooks ● jsx-a11y : アクセシビリティ ● import : import/export文の整理 ● promise : 非同期処理のベストプラクティス ● react-perf : パフォーマンス最適化 ● etx. React関連で使えそうなプラグインルール 9 

● 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 10 

react/rules-of-hooks 11 

● 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 12 

react/exhaustive-deps 13 

まとめ 14 

OxlintはRust製の超高速リンターで、ESLintより50〜100倍高速 ESLintで人気のプラグインから統合されたルールが500以上あり、 rules-of-hooksやexhaustive-depsなど、 React開発者にとって有用なプラグインルールに対応しているのも良い npx oxlint@latest ですぐ試してみよう！ 導入事例ブログもご覧ください！ https://zenn.dev/dress_code/articles/d655cd7a43b936 まとめ 15 

● 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 

Thank you for your attention. We are Hiring! 17