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の開発生産性向上への取り組み ~Findyフロントエンドの場合~
Search
puku0x
October 25, 2023
Technology
0
420
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
https://increments.connpass.com/event/294310/
puku0x
October 25, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
190
ファインディでのGitHub Actions活用事例
puku0x
9
3.2k
Findyの開発生産性を上げるためにやったこと
puku0x
1
570
Angularコーディングスタイルガイドはいいぞ
puku0x
1
290
Nx CloudでCIを爆速にした話
puku0x
0
810
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
820
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.7k
Nxはいいぞ
puku0x
0
750
Other Decks in Technology
See All in Technology
CloudWatch 大好きなSAが語る CloudWatch キホンのキ
o11yfes2023
0
180
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
9
1.5k
CBになったのでEKSのこともっと知ってもらいたい!
daitak
1
160
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
0
300
AWSのマルチアカウント管理 ベストプラクティス最新版 2025 / Multi-Account management on AWS best practice 2025
ohmura
4
300
コスト最適重視でAurora PostgreSQLのログ分析基盤を作ってみた #jawsug_tokyo
non97
0
200
Would you THINK such a demonstration interesting ?
shumpei3
1
220
Porting PicoRuby to Another Microcontroller: ESP32
yuuu
4
410
CodePipelineのアクション統合から学ぶAWS CDKの抽象化技術 / codepipeline-actions-cdk-abstraction
gotok365
5
190
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
310
Road to Go Gem #rubykaigi
sue445
0
490
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
6
5.9k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Making Projects Easy
brettharned
116
6.1k
RailsConf 2023
tenderlove
30
1.1k
Agile that works and the tools we love
rasmusluckow
328
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Navigating Team Friction
lara
184
15k
The World Runs on Bad Software
bkeepers
PRO
67
11k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Building Adaptive Systems
keathley
41
2.5k
Transcript
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~ Qiita Conference 2023 Autumn @puku0x Noriyuki Shinpuku
登録ユーザー 10万人以上 導入企業 1,000社以上
バッジ機能リニューアル! https://findy-code.io/badges
4
Findyの開発生産性は? 5
直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数
PR数 10件/日 超え PRオープン後、即レビュー その日の内にマージ 直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数
以前のFindyはどうだった? 8
2020年のFindy
レビューされるまで6日かかる PR数 1〜2個/日 1件の改修に1週間かかる 2020年のFindy
以前のFindyフロントエンド • Railsモノリス上のReact • バージョンの古いツール・ライブラリ多数 • 型(Flow)はある • テストが無い •
見通しの悪い設計 11
刷新しよう 12
モノリス解体
モノリス解体 • バックエンド: Ruby on Rails • フロントエンド: Next.js •
「Findyがモノリス環境をやめて得られたユーザへの爆速価値提供」 https://note.com/ma3tk/n/na502374b6ad6 ◦ リリース回数: 9倍 ◦ マージ回数: 6倍 ◦ PRクローズまでのスピード : 35倍 ◦ GitHub上のアクティビティ数 : 4倍 14
技術的負債の返済
開発基盤の刷新 • 依存ライブラリのバージョンアップ ◦ Dependabot導入 ◦ メンテされないライブラリの廃止 • モダンな環境に移行 ◦
TypeScript ◦ React 16.8+(現在はReact 18系) ◦ Nx、Jest、ESLint、Prettier ▪ nx migrateコマンドによる自動更新 16
設計の刷新 • 依存の方向を揃える • Container/Presentational Componentベース ◦ データの流入元に合わせた三層構造 17 Page
Component Container Component Presentational Component URLパラメータの解釈 APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook
テストの拡充 • 書けそうなところから着手 ◦ ロジックのユニットテスト ◦ コンポーネントのスナップショットテスト など ◦ 慣れてきたら結合テストを増やす
• Wallaby.jsなどの可視化ツールも有用 • テストを書く→テストを書きやすい設計 の好循環 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 モダンな環境に刷新できた
めでたしめでたし 20
完 21
これだけではまだ終わらない 22
新たな課題 • CIが遅い ◦ コード量が増えるとCI時間も増える • CIが遅いとどうなる? ◦ レビューが放置される ◦
ブランチ生存期間が延びる ◦ コンフリクト多発 23 レビューは 後回しでいいや
https://twitter.com/ayamakkie/status/1657279013260525568 時間が 無い!
CIの高速化
CIの高速化 • 変更検知+キャッシュ活用 ◦ その他、ジョブ並列化、仮想マシンのアップグレードなど 26 平均5分で完了 毎月300時間以上のCI時間を削減 https://nx.app/ はいいぞ
2022年 2021年 2023年 一人あたりの開発生産性が約3倍に ※2021年〜2023年までの転職サービス「Findy」フロントエンドの4月のデータ
まとめ • Findyの開発生産性向上への取り組み ◦ モノリス解体 ◦ 技術的負債の返済 ◦ CIの高速化 •
日々の改善が大事 28 https://findy-team.io/ https://zenn.dev/starfish/books/6966f2e8450a70
ご清聴ありがとうございました @puku0x Noriyuki Shinpuku