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
April 14, 2023
Technology
0
760
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
【オフライン@福岡】俺たちのフロントエンド”大”自慢大会
puku0x
April 14, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
1
140
ファインディでのGitHub Actions活用事例
puku0x
9
2.6k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
400
Findyの開発生産性を上げるためにやったこと
puku0x
1
530
Angularコーディングスタイルガイドはいいぞ
puku0x
1
230
Nx CloudでCIを爆速にした話
puku0x
0
700
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.4k
Nxはいいぞ
puku0x
0
710
Other Decks in Technology
See All in Technology
強いチームと開発生産性
onk
PRO
34
11k
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
AGIについてChatGPTに聞いてみた
blueb
0
130
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
200
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
580
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
Platform Engineering for Software Developers and Architects
syntasso
1
510
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
120
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
160
Lexical Analysis
shigashiyama
1
150
Why does continuous profiling matter to developers? #appdevelopercon
salaboy
0
180
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
130
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Bash Introduction
62gerente
608
210k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Faster Mobile Websites
deanohume
305
30k
Embracing the Ebb and Flow
colly
84
4.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fireside Chat
paigeccino
34
3k
Happy Clients
brianwarren
98
6.7k
Transcript
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜 俺たちのフロントエンド”大”自慢大会 @puku0x Noriyuki Shinpuku
@puku0x 2
@puku0x Findyのフロントエンド • React/Next.js + TypeScript + GraphQL • Jest,
Storybook, Chromatic, Autify • ESLint, Prettier, Stylelint, Commitlint • Nxによるモノレポ管理 • CI/CD完備 3
@puku0x 4 Findyのフロントエンドは 最初から充実している訳ではなかった
@puku0x 以前の環境 • Ruby on Rails + Next.js/React 16(Class Component)
◦ バージョンの古いツール・ライブラリ多数 ※入社当時はモノリス解体→Next.js化プロジェクトの後期 • Flowはある、テストは無い • 設計...?? 5
@puku0x 6
@puku0x 7 やっぱつれぇわ
@puku0x 8 開発体験を最高に
@puku0x 9 モダン シンプル 高 速 TL;DR
@puku0x モダンな環境に刷新 • Flow → TypeScript • Class Component →
Function Component • 開発基盤をNx(https://nx.dev/)に移行 ◦ ESLint, Prettier, Jest等が標準で利用可 ◦ 設定はツールに任せ、開発者は価値提供に注力 10
@puku0x シンプルな設計 • 依存の方向を揃える(大事!) • Container/Presentational Component ベース 11 Page
Component Container Component Presentational Component URLパラメータのパース APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook
@puku0x テスト • テストが書けそうなところから着手 ◦ ロジックのユニットテスト中心 ◦ コンポーネントは最低限スナップショットテスト ※コンポーネント or
ロジックどちらかで担保 ※慣れてきたら結合テストを増やしましょう 12
@puku0x 高速なCI • Nx + Nx Cloud の活用 ◦ 影響範囲のみ実行
▪ CI 10分→5分 ◦ 300時間/月 削減 13
@puku0x 開発生産性の変化 • 一人当たりのPR数が向上 14 設計テコ入れ モノリス解体
@puku0x まとめ • モダン・シンプル・高速 ◦ ツールやライブラリを絞る&統一すると楽 ◦ 最初は小さく始めましょう • Findyはいいぞ
15
@puku0x Thank you! @puku0x Noriyuki Shinpuku