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

Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~

puku0x
October 25, 2023

Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~

puku0x

October 25, 2023
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. Findyの開発生産性向上への取り組み
    ~Findyフロントエンドの場合~
    Qiita Conference 2023 Autumn
    @puku0x
    Noriyuki Shinpuku

    View full-size slide

  2. 登録ユーザー
    10万人以上
    導入企業
    1,000社以上

    View full-size slide

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

    View full-size slide

  4. Findyの開発生産性は?
    5


    View full-size slide

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

    View full-size slide

  6. PR数 10件/日 超え
    PRオープン後、即レビュー
    その日の内にマージ
    直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数

    View full-size slide

  7. 以前のFindyはどうだった?
    8


    View full-size slide

  8. 2020年のFindy

    View full-size slide

  9. レビューされるまで6日かかる
    PR数 1〜2個/日
    1件の改修に1週間かかる
    2020年のFindy

    View full-size slide

  10. 以前のFindyフロントエンド

    ● Railsモノリス上のReact
    ● バージョンの古いツール・ライブラリ多数
    ● 型(Flow)はある
    ● テストが無い
    ● 見通しの悪い設計
    11


    View full-size slide

  11. 刷新しよう
    12


    View full-size slide

  12. モノリス解体

    View full-size slide

  13. モノリス解体

    ● バックエンド: Ruby on Rails
    ● フロントエンド: Next.js
    ● 「Findyがモノリス環境をやめて得られたユーザへの爆速価値提供」
    https://note.com/ma3tk/n/na502374b6ad6
    ○ リリース回数: 9倍
    ○ マージ回数: 6倍
    ○ PRクローズまでのスピード : 35倍
    ○ GitHub上のアクティビティ数 : 4倍
    14


    View full-size slide

  14. 技術的負債の返済

    View full-size slide

  15. 開発基盤の刷新

    ● 依存ライブラリのバージョンアップ
    ○ Dependabot導入
    ○ メンテされないライブラリの廃止
    ● モダンな環境に移行
    ○ TypeScript
    ○ React 16.8+(現在はReact 18系)
    ○ Nx、Jest、ESLint、Prettier
    ■ nx migrateコマンドによる自動更新
    16


    View full-size slide

  16. 設計の刷新

    ● 依存の方向を揃える
    ● Container/Presentational Componentベース
    ○ データの流入元に合わせた三層構造
    17

    Page
    Component
    Container
    Component
    Presentational
    Component
    URLパラメータの解釈 APIとの通信 描画・フォーム制御
    Custom Hook Custom Hook Custom Hook

    View full-size slide

  17. テストの拡充

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


    View full-size slide

  18. 現在のFindyフロントエンド


    
 ● Next.js v13 / React 18 + TypeScript + GraphQL
    ● Jest, Testing Library, Storybook, Chromatic, Autify
    ● Prettier, ESLint, Stylelint, Commitlint
    ● Nx + Nx Cloud
    ● GitHub Actions
    19

    モダンな環境に刷新できた

    View full-size slide

  19. めでたしめでたし
    20


    View full-size slide

  20. これだけではまだ終わらない
    22


    View full-size slide

  21. 新たな課題

    ● CIが遅い
    ○ コード量が増えるとCI時間も増える
    ● CIが遅いとどうなる?
    ○ レビューが放置される
    ○ ブランチ生存期間が延びる
    ○ コンフリクト多発
    23

    レビューは
    後回しでいいや

    View full-size slide

  22. https://twitter.com/ayamakkie/status/1657279013260525568
    時間が
    無い!

    View full-size slide

  23. CIの高速化

    View full-size slide

  24. CIの高速化

    ● 変更検知+キャッシュ活用
    ○ その他、ジョブ並列化、仮想マシンのアップグレードなど
    26

    平均5分で完了
    毎月300時間以上のCI時間を削減
    https://nx.app/
    はいいぞ

    View full-size slide

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

    View full-size slide

  26. まとめ

    ● Findyの開発生産性向上への取り組み
    ○ モノリス解体
    ○ 技術的負債の返済
    ○ CIの高速化
    ● 日々の改善が大事
    28

    https://findy-team.io/ https://zenn.dev/starfish/books/6966f2e8450a70

    View full-size slide

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

    View full-size slide