Nxはいいぞ！ monorepoプロジェクトにおける 差分検知を活用した型チェック最適化

1. © Findy Inc. 2025.11.23 TSKaigi Hokuriku Nxはいいぞ！ monorepoプロジェクトにおける 差分検知を活⽤した型チェック最適化 1 甲斐 和基 ファインディ株式会社 フロントエンドエンジニア @karukan029
2. © Findy Inc. ファインディが展開するエンジニアプラットフォーム サービス紹介 2
3. © Findy Inc. ファインディが展開するエンジニアプラットフォーム サービス紹介 3
4. © Findy Inc. ファインディが展開するエンジニアプラットフォーム サービス紹介 4
5. © Findy Inc. 突然ですが... 5 みなさん 今回の申込‧受付の体験 いかがでしたか？
6. © Findy Inc. Findy Conferenceは... 6 テックカンファレンス管理に特化した ワンストップ イベント管理プラットフォーム
7. © Findy Inc. 7
8. © Findy Inc. Findy Conference 3つの特徴 8 1. 集客数UP ⽇本のテックカンファレンスを キュレートしたサイトにより、 カンファレンスの集客に貢献。 (Findy Conference) 2. All in One ⾃由なフォーム作成‧複数ト ラック‧オンライン配信‧当⽇ 受付管理など、カンファレンス に必要な機能が集約。 3. 管理⼯数の削減 企業ごとのスポンサーポータル など、運営関わる様々な⼯数を 削減すること可能。 申込‧スポンサー管理‧データ 活⽤までを⼀気通貫して利⽤。
9. © Findy Inc. 9 技術コミュニティの皆様には 無料で利⽤解放！
10. © Findy Inc. 受付近くに         がいますのでお声掛けください！ お問い合わせはこちらから
11. © Findy Inc. CIの実⾏時間が⻑すぎて⾟いという 悩みはありませんか？ 11
12. © Findy Inc. 12 CIの実⾏時間が⻑すぎて⾟いという悩み • ファイルが増加するほど、CIの実⾏時間が増加する • 型チェックの⾼速化やライブラリの性能改善、マシンスペックの向上な どシングルスレッド性能向上でもCI⾼速化は実現できるが... ◦ コード量が増加するにつれて、単純に性能を⾼めるだけでは改善が 難しくなる • 仕組みで改善できないか？
13. © Findy Inc. 13 CIの実⾏時間が⻑すぎて⾟いという悩み • ファイルが増加するほど、CIの実⾏時間が増加する • 型チェックの⾼速化やライブラリの性能改善、マシンスペックの向上な どシングルスレッド性能向上でもCI⾼速化は実現できるが... ◦ コード量が増加するにつれて、単純に性能を⾼めるだけでは改善が 難しくなる • 仕組みで改善できないか？ そんなあなたに
14. © Findy Inc. Nxとは？ 14
15. © Findy Inc. 15 Nxとは？ • モノレポやアプリケーションのビルド、テストの実⾏、コード⽣成など の機能を備えた統合的なツール ◦ 弊社の多くのフロントエンドで採⽤されている • タスク実⾏の並列化、変更検知とキャッシュ活⽤により、CI実⾏の効率 化を実現 • https://nx.dev/
16. © Findy Inc. 16 変更検知とキャッシュ活⽤ • 変更があったプロジェクトと依存関係のあるプロジェクトのみを対象 に、npm-scriptsやCIで実⾏するコマンドを実⾏できる ◦ プロジェクトの依存関係を適切に管理することで、不要な実⾏をス キップできる ▪ typecheckなど低速なタスクの実⾏をスキップできる ▪ プロジェクトの構成を継続的に改善することが重要 ◦ 依存関係が⼩さい変更ほどCIが早く終わる ▪ 変更を適切な粒度に保ち、影響範囲を管理することがCIの⾼速 化にも結びつく
17. © Findy Inc. 17 変更検知とキャッシュ活⽤
18. © Findy Inc. 18 変更検知とキャッシュ活⽤
19. © Findy Inc. 19 変更検知とキャッシュ活⽤
20. © Findy Inc. 20 変更検知とキャッシュ活⽤
21. © Findy Inc. 21 変更検知とキャッシュ活⽤
22. © Findy Inc. 22 変更検知とキャッシュ活⽤ • 変更があったプロジェクトと依存関係のあるプロジェクトのみを対象 に、npm-scriptsやCIで実⾏するコマンドを実⾏できる ◦ プロジェクトの依存関係を適切に管理することで、不要な実⾏をス キップできる ▪ typecheckなど低速なタスクの実⾏をスキップできる ▪ プロジェクトの構成を継続的に改善することが重要 ◦ 依存関係が⼩さい変更ほどCIが早く終わる ▪ 変更を適切な粒度に保ち、影響範囲を管理することがCIの⾼速 化にも結びつく
23. © Findy Inc. 23 変更検知とキャッシュ活⽤ • Nxには実⾏されたタスクをキャッシュし、同じタスクの再実⾏をス キップする仕組みがある • ローカルキャッシュに加え、リモートキャッシュの機能も備えており、 CIで実⾏したタスクの実⾏結果をキャッシュして活⽤できる ◦ CI、ローカルでの不要なコマンド実⾏をスキップ
24. © Findy Inc. まとめ 24
25. © Findy Inc. 25 まとめ • Nxは、モノレポやアプリケーションのビルド、テストの実⾏、コード⽣ 成などの機能を備えた統合的なツール • 変更検知とキャッシュ活⽤により、依存関係のあるプロジェクトのみを 対象にコマンドを実⾏ • Nxの恩恵を最⼤限受けるためには、プロジェクトの依存関係を適切に 整理することが重要 • コード量の増加によるCI実⾏時間の増加‧開発体験低下に課題感を感じ たらNxのことを思い出してください！
26. © Findy Inc. 26 はいいぞ！
27. © Findy Inc. 17時30分までブースやっています！
28. © Findy Inc. ご清聴ありがとうございました！ 28