Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Findyの開発生産性を上げるためにやったこと
Search
puku0x
October 06, 2023
Technology
1
590
Findyの開発生産性を上げるためにやったこと
開発生産性LT Night in 福岡
puku0x
October 06, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
200
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
420
Angularコーディングスタイルガイドはいいぞ
puku0x
1
310
Nx CloudでCIを爆速にした話
puku0x
0
840
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
830
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.7k
Nxはいいぞ
puku0x
0
760
Other Decks in Technology
See All in Technology
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
1
1.2k
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
350
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
GitHub Coding Agent 概要
kkamegawa
1
1.7k
ローカル環境でAIを動かそう!
falken
PRO
1
170
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
cohalz
1
490
金融システムをモダナイズするためのAmazon Elastic Kubernetes Service(EKS)ノウハウ大全
daitak
0
120
Digitization部 紹介資料
sansan33
PRO
1
3.8k
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
8
930
Houtou.pm #1
papix
0
660
mnt_data_とは?ChatGPTコード実行環境を深堀りしてみた
icck
0
210
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
Automating Front-end Workflow
addyosmani
1370
200k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Scaling GitHub
holman
459
140k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Gamification - CAS2011
davidbonilla
81
5.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
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年 一人あたりの開発生産性が約3倍に ※2021年〜2023年までの転職サービス「Findy」フロントエンドの4月のデータ
@puku0x まとめ 19 • 開発生産性を上げるためにやったこと ◦ 技術的負債の返済 ◦ CIの高速化 Findy
Team+も よろしくお願いします
@puku0x ご清聴ありがとうございました @puku0x Noriyuki Shinpuku