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.8k
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
フロントエンドの技術的負債 みんなで学ぶ Lunch LT
puku0x
May 17, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.2k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
230
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
600
Angularコーディングスタイルガイドはいいぞ
puku0x
1
350
Nx CloudでCIを爆速にした話
puku0x
0
880
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
870
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Other Decks in Technology
See All in Technology
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
430
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
220
Skrub: machine-learning with dataframes
gaelvaroquaux
0
110
事業価値と Engineering
recruitengineers
PRO
8
5.4k
サンドボックス技術でAI利活用を促進する
koh_naga
0
150
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
150
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
5
1.4k
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
fujiyamaorange
0
240
生成AI時代のデータ基盤
shibuiwilliam
4
2.3k
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
820
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
150
Kiroと学ぶコンテキストエンジニアリング
oikon48
5
6.7k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Cult of Friendly URLs
andyhume
79
6.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Done Done
chrislema
185
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
The Pragmatic Product Professional
lauravandoore
36
6.8k
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