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

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

@puku0x 2

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

@puku0x 4

@puku0x 5 Findyの開発生産性は？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

puku0x

More Decks by puku0x

Other Decks in Technology

Featured

Transcript