Oxlintはいいぞ（続）

Transcript

1. Oxlintはいいぞ（続） 2026/08/21 React Tokyo ミートアップ #19 Dress Code株式会社 / 山口 祐司 1
2. 自己紹介 2
3. 自己紹介 • 業務 ◦ プロダクトエンジニア・エンジニア採用・技術広報 • 経歴 ◦ ◦ ◦ ◦ ◦ ◦ ◦ 1987/12 埼玉県本庄市生まれ 2011/04 ソフトバンクモバイル株式会社 2016/01 株式会社サイバーエージェント 2016/10 株式会社リクルートライフスタイル 2021/09 株式会社ラクス 2022/08 株式会社HRBrain 2025/07 Dress Code株式会社 • プライベート ◦ ◦ マンガ・アニメ・ゲーム・映画 三児の父（中3, 中1, 年中） 山口 祐司 ぷーじ(@yug1224) 3
4. 会社紹介 4
5. 会社概要 Company Name / 会社名 Dress Code 株式会社 CEO / 代表取締役 江尻 祐樹 Date of establishment / 設立年月 2024年9月 正式創業：2025年4月 Location / 所在地 東京都中央区築地2-1-4 銀座PREX East 8F Member / メンバー数 47名 Pre Seed&Seed Round Number of companies Number of countries 14.1億円 250+社 5カ国 資金調達を実施 が利用中 で事業を展開 CONFIDENTIAL | © Dress Code Inc . All rights reserved. 5
6. CONFIDENTIAL Copyright © DressCode Inc. All rights reserved. 6
7. AGENDA • • • • • はじめに（自己紹介・会社紹介） Type-Aware Linting が Stable になった React Compiler Support が入った Dress Code では TypeCheck も有効化している まとめ 7
8. 前回のふりかえり https://speakerdeck.com/yug1224/2026-01-23 8
9. Type-Aware Linting が Stable になった 🎉 9
10. Type-Aware Linting Stable • 2026年7月、Type-Aware Linting が Stable になった • 型情報が必要な lint ルールを、設定から正式にオンにできるようになった • エンジンは oxlint-tsgolint@7 で、TypeScript 7.0.2 に追従している • ref: https://oxc.rs/blog/2026-07-22-type-aware-linting-stable.html 10
11. 設定はこれだけ • oxlint.config.ts の options でオンにすることができる • typeAware: 未処理の Promise など、型を見ないと分からない違反を検知 • typeCheck: 型エラーも、oxlint の実行で報告する（experimental） • 公式ベンチでは、ESLint + typescript-eslint より 12〜18 倍速い 11
12. React Compiler Support が入った 🎉 12
13. React Compiler Support • 2026年8月、Oxc が React Compiler Supportを公開 • Reactのルール違反を検知するルールが 22 本 • 以前は nursery の react/react-compiler が 1 本だった • ref: https://oxc.rs/blog/2026-08-18-react-compiler-support.html 13
14. 以前は jsPlugin で recommended をハック • 以前は oxlint 組み込みだけでは React Compiler 由来のルールが足りなかった • eslint-plugin-react-hooks v7 を jsPlugin として読んで補っていた • recommended は 17 個あるが、oxlint では一括でオンにできなかった • 一覧から重複を除き、プレフィックスを付け替えて rules に渡していた 14
15. 以前は jsPlugin で recommended をハック 15
16. 今は categories で同等のルールがオンにできる • recommended の大半は、categories.correctness で一括 error にできる • jsPlugin で recommended を組み立てる必要はなくなった • React Compiler の lint を足すだけなら、この設定から始められる 16
17. Dress Code では TypeCheck も有効化している 🎉 17
18. Dress Code では TypeCheck も有効化 • options.typeCheck: true をオンにしている • oxlint を走らせると、lint の指摘に加えて TypeScript の型エラーも出る • experimentalなので、型チェックの正はまだ TypeScript 7 の tsc にしている 18
19. pre-commit 時に差分ファイルの型エラーが分かる • pre-commit フックには Lefthook を使っている • 型を壊したファイルをステージして commit すると型エラーで止まる • pre-commit 時に差分ファイルの型エラーを早期検知できる 19
20. まとめ 20
21. まとめ • Type-Aware Linting が Stable になった ◦ • • • typeAware: true で、型情報が必要な lint が使える React Compiler Support が入った ◦ jsPlugin で recommended を組み立てなくてもよい ◦ categories.correctness でオンにできる Dress Code では typeCheck（experimental）もオンにしている ◦ CI の Lint でも走るが、正は tsc の typecheck である ◦ pre-commit フックで差分ファイルの型エラーが分かる みんなやってみてね • 21
22. 宣伝 22
23. 技術発信に力を入れています！！ • ref: https://marmalade-aardwolf-939.notion.site/Dress-Code-2733844e68a3807e9719fba4f2bb0c9f ref: https://marmalade-aardwolf-939.notion.site/Dress-Code-Advent-Calendar-2026-07-e07f067a594f4401a707c2de1ba805b4 23
24. Meetup #3 -完全招待制イベント - Product Engineering is Dead or Alive @ Dress Code株式会社 19:30 START 生成AIで「実装」のハードルが下がる今、 プロダクトエンジニアリングは死にゆく概念（Dead）なのか、 真の価値を発揮する新たな時代（Alive）なのか。 エンジニアとPdMの垣根を越えて議論します。 前半 セッション 後半 OST（オープンスペーステクノロジー）形式のパネルディスカッション 詳細・申し込みはこちら
25. Thank you for your attention. We are Hiring! 25