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
770
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
【オフライン@福岡】俺たちのフロントエンド”大”自慢大会
puku0x
April 14, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
160
ファインディでのGitHub Actions活用事例
puku0x
9
2.8k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
400
Findyの開発生産性を上げるためにやったこと
puku0x
1
540
Angularコーディングスタイルガイドはいいぞ
puku0x
1
240
Nx CloudでCIを爆速にした話
puku0x
0
730
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.5k
Nxはいいぞ
puku0x
0
720
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2024年12月度サービス・アップデート
oracle4engineer
PRO
0
200
なぜCodeceptJSを選んだか
goataka
0
160
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
350
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
560
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
390
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
130
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.3k
生成AIのガバナンスの全体像と現実解
fnifni
1
190
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
270
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
180
DevFest 2024 Incheon / Songdo - Compose UI 조합 심화
wisemuji
0
110
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
480
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Speed Design
sergeychernyshev
25
670
How to train your dragon (web standard)
notwaldorf
88
5.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Adopting Sorbet at Scale
ufuk
73
9.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Cult of Friendly URLs
andyhume
78
6.1k
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