Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

自己紹介 / 会社紹介 3

Slide 4

Slide 4 text

ぷーじ(@yug1224) 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

本題 6

Slide 7

Slide 7 text

● 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

Slide 8

Slide 8 text

● 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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

● 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

Slide 11

Slide 11 text

react/rules-of-hooks 11

Slide 12

Slide 12 text

● 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

Slide 13

Slide 13 text

react/exhaustive-deps 13

Slide 14

Slide 14 text

まとめ 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

● 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

Slide 17

Slide 17 text

Thank you for your attention. We are Hiring! 17