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
430
Findyの開発生産性を上げるためにやったこと
開発生産性LT Night in 福岡
puku0x
October 06, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
350
Angularコーディングスタイルガイドはいいぞ
puku0x
1
140
Nx CloudでCIを爆速にした話
puku0x
0
520
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.5k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
700
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
1.8k
Nxはいいぞ
puku0x
0
640
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
250
Scully: Angular SSG
puku0x
0
160
Other Decks in Technology
See All in Technology
Building Dashboards as a Hobby
egmc
0
240
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
330
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
430
Azureの基本的な権限管理の勉強会
yhana
0
730
MapLibreとAmazon Location Service
dayjournal
1
160
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
16k
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
700
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
540
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
400
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
2
150
Featured
See All Featured
Code Review Best Practice
trishagee
55
15k
Gamification - CAS2011
davidbonilla
76
4.6k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
What the flash - Photography Introduction
edds
64
11k
GitHub's CSS Performance
jonrohan
1025
450k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
In The Pink: A Labor of Love
frogandcode
138
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
A Tale of Four Properties
chriscoyier
151
22k
How GitHub (no longer) Works
holman
304
140k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
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