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

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

Transcript

1. © 2023 Findy Inc.
   Findyのフロントエンド設計刷新
   を通して得られた
   技術的負債との向き合い方
   Noriyuki Shinpuku
   @puku0x
   

   View Slide

2. © 2023 Findy Inc.
   

   View Slide

3. © 2023 Findy Inc.
   Findyのフロントエンド
   ● Next.js + TypeScript + GraphQL
   ● Jest, Storybook, Chromatic, Autify
   ● Prettier, ESLint, Stylelint, Commitlint
   ● Nx（モノレポ管理ツール）導入
   ● CI/CD完備
   

   View Slide

4. © 2023 Findy Inc.
   Findyのフロントエンドは
   最初から充実している訳ではなかった
   

   View Slide

5. © 2023 Findy Inc.
   以前の環境
   ● Ruby on Rails + Next.js/React 16
   ※当時はモノリス解体→Next.js化プロジェクトの後期
   ● バージョンの古いツール・ライブラリ多数
   ● 型（Flow）はある
   ● テストは無い
   ● 設計...??
   もちろん
   Class Component
   

   View Slide

6. © 2023 Findy Inc.
   当時の状況
   

   View Slide

7. © 2023 Findy Inc.
   刷新しよう
   

   View Slide

8. © 2023 Findy Inc.
   環境の刷新
   ● Flow → TypeScript
   ● ライブラリのバージョンアップ
   ○ Class Component → Function Component移行
   ● 開発基盤をNxに移行
   ○ nx migrateコマンドによる自動更新
   開発者が価値提供に注力できる環境に
   

   View Slide

9. © 2023 Findy Inc.
   ● 依存の方向を揃える（大事！）
   ● Container/Presentational Component
   ベースの三層構造
   設計の改善
   Page
   Component
   Container
   Component
   Presentational
   Component
   URLパラメータのパース APIとの通信 描画・フォーム制御
   Custom Hook Custom Hook Custom Hook
   

   View Slide

10. © 2023 Findy Inc.
    テストの拡充
    ● 書けそうなところから着手
    ○ ロジックのユニットテスト
    ○ コンポーネントのスナップショットテスト
    ● Wallaby.jsで視覚化
    カバレッジ100% 守るテストを書く
    ユニットテストに慣れたら
    結合テストを増やす
    

    View Slide

11. © 2023 Findy Inc.
    刷新できた！
    

    View Slide

12. © 2023 Findy Inc.
    完
    

    View Slide

13. © 2023 Findy Inc.
    そんなことはない
    

    View Slide

14. © 2023 Findy Inc.
    将来の技術的負債の発生を抑えるには
    ● 日頃から改善＆整備
    ○ テストを書く
    ○ PR粒度を小さく
    ○ 定期的なアップデート
    ● 啓蒙活動
    3ヶ月かかる大規模リファクタリングをなぜ実行に踏み切れたのか？
    https://note.com/hamchance/n/n4a074eb0193c
    

    View Slide

15. © 2023 Findy Inc.
    https://twitter.com/ayamakkie/status/1657279013260525568
    

    View Slide

16. © 2023 Findy Inc.
    時間を作る
    ● CIを “可能な限り” 高速化する
    ○ 変更検知＋リモートキャッシュ
    https://nx.app/
    平均5分でCI完了
    ※最速で1分未満
    毎月300時間以上の削減
    

    View Slide

17. © 2023 Findy Inc.
    改善の効果
    2022年4月
    2021年4月 2023年4月
    一人あたりの開発生産性が約３倍に
    

    View Slide

18. © 2023 Findy Inc.
    技術的負債の返済は１日にしてならず
    

    View Slide

19. © 2023 Findy Inc.
    どんなに小さくても良い
    日々改善していきましょう
    

    View Slide

20. © 2023 Findy Inc.
    ご清聴ありがとうございました
    Noriyuki Shinpuku
    @puku0x
    

    View Slide