Oxcを導入して開発体験が向上した話

Transcript

1. Oxcを導入して 開発体験が向上した話 2026/06/02 #oxc_findy Dress Code株式会社 / 山口 祐司 1
2. • オープニング（自己紹介／会社紹介） • Oxcについて復習 • 導入の経緯／モチベーション • マイグレーションの苦労 • 当時の効果と最近の状況 • 今後の展望／まとめ AGENDA 2
3. 自己紹介 3
4. • 業務 ◦ プロダクトエンジニア・エンジニア採用・技術広報 • 経歴 ◦ 1987/12 埼玉県本庄市生まれ ◦ 2011/04 ソフトバンクモバイル株式会社 ◦ 2016/01 株式会社サイバーエージェント ◦ 2016/10 株式会社リクルートライフスタイル ◦ 2021/09 株式会社ラクス ◦ 2022/08 株式会社HRBrain ◦ 2025/07 Dress Code株式会社 • プライベート ◦ マンガ・アニメ・ゲーム・映画 ◦ 三児の父（中3, 中1, 年中） 自己紹介 山口 祐司 ぷーじ(@yug1224) 4
5. 会社紹介 5
6. CONFIDENTIAL | © Dress Code Inc . All rights reserved. 14.1億円　 資金調達を実施 Pre Seed&Seed Round 200+社 が利用中　 Number of companies Number of countries 5カ国 で事業を展開　 会社概要 Company Name / 会社名 Dress Code 株式会社 2024年9月　正式創業：2025年4月 43名 東京都中央区築地2-1-4 銀座PREX East 8F CEO / 代表取締役 Date of establishment / 設立年月 Location / 所在地 江尻 祐樹 Member / メンバー数 6
7. CONFIDENTIAL Copyright © DressCode Inc. All rights reserved. 7
8. 挑戦する事業ドメイン/マーケット Dress Codeが初めに挑戦するのは、グローバル（まずアジア）のWorkforce Management 領域全体 Asia to Global Workforce Management領域 労務 管理 育成/ 定着 人事/ 配置 採用 管理 拠点/ 環境 プロ ジェ クト 福利 厚生 ITツール /備品 外部 人材 活用 セキュ リティ /ガバナ ンス 【Entry】 入社/入場 【Retire】 退職/退場 ライフサイクル × 8
9. 本題の前に 9
10. 想定視聴者 と Learning Outcome 10 • 想定視聴者 ◦ 開発体験・ビルド速度に課題がある方 ◦ 大規模 TypeScript の lint / format / typecheck に悩んでいる方 ◦ Oxc やツールチェーン再設計に興味がある方 • Learning Outcome ◦ 他社事例の使い方・捉え方の気づきが得られる ◦ 自分の環境と照らした「試すならここ」がわかる ◦ 一度触ってみようと思える
11. Oxcについて 11
12. • The JavaScript Oxidation Compiler • Rust で書かれた JS/TS 向けの高性能ツール群 ◦ Oxidation（酸化）とはRust（錆）を生み出す化学反応 • Philosophy ◦ Performance is a feature ◦ One toolchain, shared building blocks ◦ Correctness with clear boundaries ◦ Practical developer experience Oxcについて 12
13. 導入の経緯／モチベーション 13
14. • 2025年末当時は TypeScript だけで1万ファイル以上 ◦ 2026年6月現在は約1.9万ファイル（+80%程度） • 規模が大きくなるほど、lint / typecheck が CI のボトルネック • 導入前の体感待ち時間は約1~2分 ◦ BE: ESLint 実行に 約37秒〜52秒、typecheck に 約90秒〜105秒 • AWS Self-Hosted Runner（Graviton4 / r8gd.2xlarge）でも 遅いと感じてしまう 当時の規模と Lint 待ちの壁 14
15. • Backend（ESLint + Prettier） ◦ eslint, typescript-eslint, eslint-config-prettier, eslint-plugin-xxx など、依存が分散している • Frontend（Biome） ◦ 非常に速いが、ESLintほど豊富なプラグインエコシステムがない • FE/BE のツールチェーンを揃えたいという動機 FE と BE でツール構成がバラバラだった 15
16. マイグレーションの苦労 16
17. 既存ルールの再現 17 • 既存のルールを oxlint / oxfmt でどう再現するか が作業の中心 • Backend（ESLint + Prettier → oxlint + oxfmt） ◦ ESLint / Prettier とは互換を意識した設計 があり、ルールの多くは ほぼそのまま移行できた ◦ 依存パッケージの整理（6本 → oxlint 1本）と合わせて、BE は比較的スムーズ だった印象 • Frontend（Biome → oxlint + oxfmt） ◦ Biome とはルールに互換性がない ◦ 「設定をコピペして終わり」にはできず、同等の品質を出すまでルール設計からほぼやり直し • oxlint / oxfmt の対応待ち ◦ アルファ版ならではの不安定さ ◦ コードコメントがあるとsort-importsが対応できない不具合 • 現状は公開されているマイグレーションツールや Skills を使うのが良さそう
18. • oxlint 移行より tsgo + type-aware の導入の方が負荷が大きかった • tsgo は tsc より 型チェックが厳格 ◦ FE で 150箇所以上 のエラーが一気に出て「本当に移行するの…？」となった • 一括修正は現実的でない ◦ Lintエラーは、warn に落とし、段階的に error へ ◦ 型エラーは、@ts-expect-error で一時抑制 ◦ 新規コードの違反は防ぎつつ、既存コードは別 PR で漸進的に直す判断 tsgo の同時導入 18
19. 当時の効果と最近の状況 19
20. 導入直後（2025-12） 20 • Backend ◦ Lint: 52s → 4s（-92%） ◦ Typecheck: 105s → 36s（-65%） • Frontend ◦ Lint: Biome 2s → oxlint + type-aware 14s ◦ Typecheck: 以前は build 内 → 48s ▪ 独立ジョブに分離し、lint / format / build と 並列 • ESLint / Prettier からの移行では劇的に速くなった ◦ さすがに 50x から 100x 速くはならなかったｗ
21. 現在の状況（2026-06） 21 • ※GitHub Actionsのジョブの計測なので導入時との計測粒度に差 • Backend ◦ Lint: 39s, Format: 1s, Typecheck: 69s • Frontend ◦ Lint: 72s, Format: 2s, Typecheck: 14s • Oxc自体の不具合を踏むことはほとんどなくなった印象 • --type-aware の常時 ON や jsPlugins の導入等によってまた遅くなっている ◦ eslint-plugin-react-hooks とか ◦ 2026年6月現在は約1.9万ファイル（+80%程度）と増加 • ローカルでは変更差分チェック、CIではフルチェックと使い分け
22. 今後の展望／まとめ 22
23. • --type-aware --type-check のルール拡充・安定化 ◦ oxlint（lint）と tsgo（typecheck）を oxlint（lint + typecheck）に一本化？ • tsgo 正式版による性能向上 • configのメンテナンスとアップデートへの追従 ◦ 無駄なルールの整理 ◦ 導入時に一時的に off や warn にしたルールの error 化 ◦ アップデートで追加変更されるルールへの追従 期待していることや課題 23
24. まとめ 24 • 速さは正義 • バラバラだった開発環境が整理されたのが良かった • Oxcの登場初期は導入障壁が高かったが、マイグレーションツールやSkillsによっ て、現在は導入しやすくなっている • ESLint + Prettier の環境であれば、移行するのがオススメ • --type-aware --type-check など型周りのルール拡充に期待 • アップデートへの追従などの手間はまだ少しありそう
25. Thank you for your attention. We are Hiring! 25