Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

puku0x
May 17, 2023

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

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

puku0x

May 17, 2023
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

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

    View full-size slide

  2. © 2023 Findy Inc.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. © 2023 Findy Inc.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide