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
700
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
【オフライン@福岡】俺たちのフロントエンド”大”自慢大会
puku0x
April 14, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
340
Findyの開発生産性を上げるためにやったこと
puku0x
1
430
Angularコーディングスタイルガイドはいいぞ
puku0x
1
140
Nx CloudでCIを爆速にした話
puku0x
0
510
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.5k
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
1.8k
Nxはいいぞ
puku0x
0
640
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
250
Scully: Angular SSG
puku0x
0
160
Other Decks in Technology
See All in Technology
ChatGPT for IT Service Management (IT Pro)
dahatake
5
330
On Your Data を超えていく!
hirotomotaguchi
2
120
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
3.9k
[2024年3月版] Databricksのシステムアーキテクチャ
databricksjapan
8
1.9k
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
110
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
freee
1
740
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
1
180
Algyan イベント振り返り
linyixian
0
190
反実仮想機械学習とは何か
usaito
PRO
7
2.5k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
430
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.2k
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
200
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Automating Front-end Workflow
addyosmani
1355
200k
It's Worth the Effort
3n
180
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Fireside Chat
paigeccino
20
2.6k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
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