Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
by
puku0x
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
© 2023 Findy Inc. Findyのフロントエンド設計刷新 を通して得られた 技術的負債との向き合い方 Noriyuki Shinpuku @puku0x
Slide 2
Slide 2 text
© 2023 Findy Inc.
Slide 3
Slide 3 text
© 2023 Findy Inc. Findyのフロントエンド ● Next.js + TypeScript + GraphQL ● Jest, Storybook, Chromatic, Autify ● Prettier, ESLint, Stylelint, Commitlint ● Nx(モノレポ管理ツール)導入 ● CI/CD完備
Slide 4
Slide 4 text
© 2023 Findy Inc. Findyのフロントエンドは 最初から充実している訳ではなかった
Slide 5
Slide 5 text
© 2023 Findy Inc. 以前の環境 ● Ruby on Rails + Next.js/React 16 ※当時はモノリス解体→Next.js化プロジェクトの後期 ● バージョンの古いツール・ライブラリ多数 ● 型(Flow)はある ● テストは無い ● 設計...?? もちろん Class Component
Slide 6
Slide 6 text
© 2023 Findy Inc. 当時の状況
Slide 7
Slide 7 text
© 2023 Findy Inc. 刷新しよう
Slide 8
Slide 8 text
© 2023 Findy Inc. 環境の刷新 ● Flow → TypeScript ● ライブラリのバージョンアップ ○ Class Component → Function Component移行 ● 開発基盤をNxに移行 ○ nx migrateコマンドによる自動更新 開発者が価値提供に注力できる環境に
Slide 9
Slide 9 text
© 2023 Findy Inc. ● 依存の方向を揃える(大事!) ● Container/Presentational Component ベースの三層構造 設計の改善 Page Component Container Component Presentational Component URLパラメータのパース APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook
Slide 10
Slide 10 text
© 2023 Findy Inc. テストの拡充 ● 書けそうなところから着手 ○ ロジックのユニットテスト ○ コンポーネントのスナップショットテスト ● Wallaby.jsで視覚化 カバレッジ100% 守るテストを書く ユニットテストに慣れたら 結合テストを増やす
Slide 11
Slide 11 text
© 2023 Findy Inc. 刷新できた!
Slide 12
Slide 12 text
© 2023 Findy Inc. 完
Slide 13
Slide 13 text
© 2023 Findy Inc. そんなことはない
Slide 14
Slide 14 text
© 2023 Findy Inc. 将来の技術的負債の発生を抑えるには ● 日頃から改善&整備 ○ テストを書く ○ PR粒度を小さく ○ 定期的なアップデート ● 啓蒙活動 3ヶ月かかる大規模リファクタリングをなぜ実行に踏み切れたのか? https://note.com/hamchance/n/n4a074eb0193c
Slide 15
Slide 15 text
© 2023 Findy Inc. https://twitter.com/ayamakkie/status/1657279013260525568
Slide 16
Slide 16 text
© 2023 Findy Inc. 時間を作る ● CIを “可能な限り” 高速化する ○ 変更検知+リモートキャッシュ https://nx.app/ 平均5分でCI完了 ※最速で1分未満 毎月300時間以上の削減
Slide 17
Slide 17 text
© 2023 Findy Inc. 改善の効果 2022年4月 2021年4月 2023年4月 一人あたりの開発生産性が約3倍に
Slide 18
Slide 18 text
© 2023 Findy Inc. 技術的負債の返済は1日にしてならず
Slide 19
Slide 19 text
© 2023 Findy Inc. どんなに小さくても良い 日々改善していきましょう
Slide 20
Slide 20 text
© 2023 Findy Inc. ご清聴ありがとうございました Noriyuki Shinpuku @puku0x