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
May 17, 2023
Technology
1
1.7k
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
フロントエンドの技術的負債 みんなで学ぶ Lunch LT
puku0x
May 17, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
180
ファインディでのGitHub Actions活用事例
puku0x
9
3.1k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
420
Findyの開発生産性を上げるためにやったこと
puku0x
1
570
Angularコーディングスタイルガイドはいいぞ
puku0x
1
280
Nx CloudでCIを爆速にした話
puku0x
0
800
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
810
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.7k
Nxはいいぞ
puku0x
0
750
Other Decks in Technology
See All in Technology
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
Proxmox VE超入門 〜 無料で作れるご自宅仮想化プラットフォームブックマークする
devops_vtj
0
160
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
510
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
7
1.2k
チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから / How to deal with ADR depends on the characteristics of the team
mh4gf
4
340
Restarting_SRE_Road_to_SRENext_.pdf
_awache
0
170
非エンジニアにも伝えるメールセキュリティ / Email security for non-engineers
ykanoh
13
4k
RAGの基礎から実践運用まで:AWS BedrockとLangfuseで実現する構築・監視・評価
sonoda_mj
0
440
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
290
モノリスの認知負荷に立ち向かう、コードの所有者という思想と現実
kzkmaeda
0
110
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
460
Road to SRE NEXT@仙台 IVRyの組織の形とSLO運用の現状
abnoumaru
0
400
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
GraphQLとの向き合い方2022年版
quramy
45
14k
The Invisible Side of Design
smashingmag
299
50k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Transcript
© 2023 Findy Inc. Findyのフロントエンド設計刷新 を通して得られた 技術的負債との向き合い方 Noriyuki Shinpuku @puku0x
© 2023 Findy Inc.
© 2023 Findy Inc. Findyのフロントエンド • Next.js + TypeScript +
GraphQL • Jest, Storybook, Chromatic, Autify • Prettier, ESLint, Stylelint, Commitlint • Nx(モノレポ管理ツール)導入 • CI/CD完備
© 2023 Findy Inc. Findyのフロントエンドは 最初から充実している訳ではなかった
© 2023 Findy Inc. 以前の環境 • Ruby on Rails +
Next.js/React 16 ※当時はモノリス解体→Next.js化プロジェクトの後期 • バージョンの古いツール・ライブラリ多数 • 型(Flow)はある • テストは無い • 設計...?? もちろん Class Component
© 2023 Findy Inc. 当時の状況
© 2023 Findy Inc. 刷新しよう
© 2023 Findy Inc. 環境の刷新 • Flow → TypeScript •
ライブラリのバージョンアップ ◦ Class Component → Function Component移行 • 開発基盤をNxに移行 ◦ nx migrateコマンドによる自動更新 開発者が価値提供に注力できる環境に
© 2023 Findy Inc. • 依存の方向を揃える(大事!) • Container/Presentational Component ベースの三層構造
設計の改善 Page Component Container Component Presentational Component URLパラメータのパース APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook
© 2023 Findy Inc. テストの拡充 • 書けそうなところから着手 ◦ ロジックのユニットテスト ◦
コンポーネントのスナップショットテスト • Wallaby.jsで視覚化 カバレッジ100% 守るテストを書く ユニットテストに慣れたら 結合テストを増やす
© 2023 Findy Inc. 刷新できた!
© 2023 Findy Inc. 完
© 2023 Findy Inc. そんなことはない
© 2023 Findy Inc. 将来の技術的負債の発生を抑えるには • 日頃から改善&整備 ◦ テストを書く ◦
PR粒度を小さく ◦ 定期的なアップデート • 啓蒙活動 3ヶ月かかる大規模リファクタリングをなぜ実行に踏み切れたのか? https://note.com/hamchance/n/n4a074eb0193c
© 2023 Findy Inc. https://twitter.com/ayamakkie/status/1657279013260525568
© 2023 Findy Inc. 時間を作る • CIを “可能な限り” 高速化する ◦
変更検知+リモートキャッシュ https://nx.app/ 平均5分でCI完了 ※最速で1分未満 毎月300時間以上の削減
© 2023 Findy Inc. 改善の効果 2022年4月 2021年4月 2023年4月 一人あたりの開発生産性が約3倍に
© 2023 Findy Inc. 技術的負債の返済は1日にしてならず
© 2023 Findy Inc. どんなに小さくても良い 日々改善していきましょう
© 2023 Findy Inc. ご清聴ありがとうございました Noriyuki Shinpuku @puku0x