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