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