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

Findyの開発生産性を上げるためにやったこと

puku0x
October 06, 2023

 Findyの開発生産性を上げるためにやったこと

開発生産性LT Night in 福岡

puku0x

October 06, 2023
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. Findyの開発生産性を
    上げるためにやったこと
    開発生産性LT Night in 福岡
    @puku0x
    Noriyuki Shinpuku

    View full-size slide

  2. @puku0x
    バッジ機能リニューアル!
    3
    https://findy-code.io/badges

    View full-size slide

  3. @puku0x 5
    Findyの開発生産性は?

    View full-size slide

  4. @puku0x 6
    直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数

    View full-size slide

  5. @puku0x 7
    PRはだいたい10件/日
    PRオープン後、即レビュー
    その日の内に改修完了
    直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数

    View full-size slide

  6. @puku0x 8
    最初から上手くいっている
    わけではなかった

    View full-size slide

  7. @puku0x
    以前の環境(〜2021)
    9
    ● Ruby on Rails + Next.js/React 16
    ※当時はモノリス解体→Next.js化プロジェクトの後期
    ● バージョンの古いツール・ライブラリ多数
    ● 型(Flow)はある、テストは無い
    ● 見通しの悪い設計 やばい

    View full-size slide

  8. @puku0x
    やったこと:
    技術的負債の返済
    10

    View full-size slide

  9. @puku0x
    開発基盤の刷新
    11
    ● 依存ライブラリのバージョンアップ
    ○ Dependabot導入
    ● モダンな環境に移行
    ○ TypeScript、React v16.8+
    ○ Nx、Jest、ESLint、Prettier

    View full-size slide

  10. @puku0x
    ● 依存の方向を揃える(大事!)
    ● Container/Presentational Componentベースの三層構造
    設計刷新
    12
    Page
    Component
    Container
    Component
    Presentational
    Component
    URLパラメータの解釈 APIとの通信 描画・フォーム制御
    Custom Hook Custom Hook Custom Hook

    View full-size slide

  11. @puku0x
    ● 書けそうなところから着手
    ○ ロジックのユニットテスト
    ○ コンポーネントのスナップショットテスト など
    ● テストを書く→テストを書きやすい設計 の好循環
    ○ Wallaby.jsなどの可視化ツールも有用
    テストの拡充
    13

    View full-size slide

  12. @puku0x
    やったか...!?
    14

    View full-size slide

  13. @puku0x
    新たな課題
    15
    ● CIが遅い
    ○ コード量が増えればCI時間も増える
    ● CIが遅いとどうなる?
    ○ レビューが放置される
    ■ ブランチ生存期間が延びる
    ● コンフリクト多発
    20分後でいいや

    View full-size slide

  14. @puku0x
    やったこと:
    CIの高速化
    16

    View full-size slide

  15. @puku0x
    CIの高速化
    17
    ● 変更検知+キャッシュ活用
    毎月300時間以上を削減
    平均5分でCI完了
    https://nx.app/
    はいいぞ
    その他: ジョブ並列化、仮想マシンのアップグレード等

    View full-size slide

  16. @puku0x 18
    2022年
    2021年 2023年
    一人あたりの開発生産性が約3倍に
    ※2021年〜2023年までの転職サービス「Findy」フロントエンドの4月のデータ

    View full-size slide

  17. @puku0x
    まとめ
    19
    ● 開発生産性を上げるためにやったこと
    ○ 技術的負債の返済
    ○ CIの高速化
    Findy Team+も
    よろしくお願いします

    View full-size slide

  18. @puku0x
    ご清聴ありがとうございました
    @puku0x
    Noriyuki Shinpuku

    View full-size slide