Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方

フロントエンドの技術的負債 みんなで学ぶ Lunch LT

Transcript

1. © 2023 Findy Inc. Findyのフロントエンド設計刷新 を通して得られた 技術的負債との向き合い方 Noriyuki Shinpuku @puku0x
2. © 2023 Findy Inc.
3. © 2023 Findy Inc. Findyのフロントエンド • Next.js + TypeScript + GraphQL • Jest, Storybook, Chromatic, Autify • Prettier, ESLint, Stylelint, Commitlint • Nx（モノレポ管理ツール）導入 • CI/CD完備
4. © 2023 Findy Inc. Findyのフロントエンドは 最初から充実している訳ではなかった
5. © 2023 Findy Inc. 以前の環境 • Ruby on Rails + Next.js/React 16 ※当時はモノリス解体→Next.js化プロジェクトの後期 • バージョンの古いツール・ライブラリ多数 • 型（Flow）はある • テストは無い • 設計...?? もちろん Class Component
6. © 2023 Findy Inc. 当時の状況
7. © 2023 Findy Inc. 刷新しよう
8. © 2023 Findy Inc. 環境の刷新 • Flow → TypeScript • ライブラリのバージョンアップ ◦ Class Component → Function Component移行 • 開発基盤をNxに移行 ◦ nx migrateコマンドによる自動更新 開発者が価値提供に注力できる環境に
9. © 2023 Findy Inc. • 依存の方向を揃える（大事！） • Container/Presentational Component ベースの三層構造 設計の改善 Page Component Container Component Presentational Component URLパラメータのパース APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook
10. © 2023 Findy Inc. テストの拡充 • 書けそうなところから着手 ◦ ロジックのユニットテスト ◦ コンポーネントのスナップショットテスト • Wallaby.jsで視覚化 カバレッジ100% 守るテストを書く ユニットテストに慣れたら 結合テストを増やす
11. © 2023 Findy Inc. 刷新できた！
12. © 2023 Findy Inc. 完
13. © 2023 Findy Inc. そんなことはない
14. © 2023 Findy Inc. 将来の技術的負債の発生を抑えるには • 日頃から改善＆整備 ◦ テストを書く ◦ PR粒度を小さく ◦ 定期的なアップデート • 啓蒙活動 3ヶ月かかる大規模リファクタリングをなぜ実行に踏み切れたのか？ https://note.com/hamchance/n/n4a074eb0193c
15. © 2023 Findy Inc. https://twitter.com/ayamakkie/status/1657279013260525568
16. © 2023 Findy Inc. 時間を作る • CIを “可能な限り” 高速化する ◦ 変更検知＋リモートキャッシュ https://nx.app/ 平均5分でCI完了 ※最速で1分未満 毎月300時間以上の削減
17. © 2023 Findy Inc. 改善の効果 2022年4月 2021年4月 2023年4月 一人あたりの開発生産性が約３倍に
18. © 2023 Findy Inc. 技術的負債の返済は１日にしてならず
19. © 2023 Findy Inc. どんなに小さくても良い 日々改善していきましょう
20. © 2023 Findy Inc. ご清聴ありがとうございました Noriyuki Shinpuku @puku0x