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
ファインディにおけるフロントエンド技術選定の歴史
Search
puku0x
October 07, 2024
Technology
2
160
ファインディにおけるフロントエンド技術選定の歴史
React×GraphQL特集 フロントエンド技術選定の裏側と、直面する技術的課題
puku0x
October 07, 2024
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディでのGitHub Actions活用事例
puku0x
9
2.9k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
400
Findyの開発生産性を上げるためにやったこと
puku0x
1
550
Angularコーディングスタイルガイドはいいぞ
puku0x
1
250
Nx CloudでCIを爆速にした話
puku0x
0
740
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
770
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.5k
Nxはいいぞ
puku0x
0
720
Other Decks in Technology
See All in Technology
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
プロダクト組織で取り組むアドベントカレンダー/Advent Calendar in Product Teams
mixplace
0
660
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
410
OPENLOGI Company Profile for engineer
hr01
1
17k
ZOZOTOWN の推薦における KPI モニタリング/KPI monitoring for ZOZOTOWN recommendations
rayuron
1
910
機械学習を「社会実装」するということ 2025年版 / Social Implementation of Machine Learning 2025 Version
moepy_stats
3
170
【令和最新版】ロボットシミュレータ Genesis x ROS 2で始める快適AIロボット開発
hakuturu583
2
1.4k
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
26
7.1k
Azureの開発で辛いところ
re3turn
0
200
mixi2 の技術スタックを探ってみる (アプリ編)
ichiki1023
0
110
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
830
20241125 - AI 繪圖實戰魔法工作坊 @ 實踐大學
dpys
1
440
Featured
See All Featured
The Language of Interfaces
destraynor
155
24k
A Tale of Four Properties
chriscoyier
157
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Faster Mobile Websites
deanohume
305
30k
Rails Girls Zürich Keynote
gr2m
94
13k
Raft: Consensus for Rubyists
vanstee
137
6.7k
What's in a price? How to price your products and services
michaelherold
244
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
230
It's Worth the Effort
3n
183
28k
Statistics for Hackers
jakevdp
797
220k
A Philosophy of Restraint
colly
203
16k
Transcript
ファインディにおける フロントエンド技術選定の歴史 1 2024/10/08 React×GraphQL特集 フロントエンド技術選定の裏側と、直⾯する技術的課題 ファインディ株式会社 フロントエンド テックリード 新福
宜侑 @puku0x
2 今年で7歳!
3 Findyのフロントエンド • Next.js + TypeScript + GraphQL • Jest、Testing
Library、Playwright(検証中) • Prettier、ESLint、Stylelint、Commitlint • Storybook、Style Dictionary、Figma • Nx(モノレポ管理ツール) • GitHub Actions
以前のフロントエンド構成 4
5 以前(〜2020年)のフロントエンド構成 • Railsモノリス上のReact ◦ React 16 ◦ バージョンの古いツール‧ライブラリ多数 ◦
クラスコンポーネント ◦ 型(Flow)はある、テストは無い ◦ 設計...? • モノリスのデメリット ◦ 軽微な修正でも⻑時間のCI待ちが発⽣ → 開発スピード低下
6 モノリス解体
7 解体後のフロントエンドはNext.jsを採⽤
8 Next.jsの採⽤理由 • 既存のReactの資産を活かしたい • SSRしたい • ビルド周りを任せたい • 最適化周りも任せたい
モノリス解体完了! (〜2021年5⽉) 9
GitHub上のアクティビティ数: 4倍 リリース回数: 9.1倍 PRクローズまでの速度: 35倍 10 Findyがモノリス環境をやめて得られたユーザへの爆速価値提供 https://note.com/ma3tk/n/na502374b6ad6
11 モノリス解体後のフロントエンドの課題 • バージョンの古いツール‧ライブラリ多数 • 型(Flow)はある、テストは無い
12 依存を減らす • 不要なパッケージの削除 • styled-components + classnames → Emotionに統⼀
• Redux関連 → @reduxjs/toolkit → に統⼀
13 開発基盤にNxを採⽤
14 Nxの採⽤理由 • 他のツールの設定を任せたい ◦ ESLintやJestなどがすぐに使える ◦ nx migrate による⾃動更新
• 今後の⼤規模化に備えたい ◦ nx affected による変更検知 ◦ Nx Cloudのリモートキャッシュ
15 Flow → TypeScript に移⾏ Flowの型注釈を削除 ↓ TypeScript(allowJs: true) ↓
TypeScript(strict: true)
16 TypeScriptの採⽤理由 • 型が欲しい • 移⾏のしやすさ • エディタとの相性 • 情報の豊富さ
開発基盤の刷新で フロントエンドが最⾼になっ... 17
...てない! 18
19 モノリス解体後のREST APIの課題 • そのページに使うデータ全部盛り ◦ マスタデータ ◦ ユーザーデータ パフォーマンスの懸念
• レスポンスが⼀定でない ◦ 同じ名称で型が全く異なる場合も ◦ TypeScript導⼊時は⼿動で型付け → つらい
20 REST API → GraphQLに移⾏ 社内ツールにGraphQL導⼊‧検証 ↓ プロダクトを⼀部GraphQL化 ↓ プロダクトを全GraphQL化
↓ 他のプロダクトに展開
21 GraphQLの採⽤理由 • 効率的なデータ通信 • スキーマ駆動 • graphql-codegenを含むエコシステム
22 フロントエンド共通の技術スタックたち ※SSRの要件の有無により使い分けています ※
23 今後のFindyフロントエンド • App Router(React Server Components) ◦ 新しいコンポーネント設計 ◦
ランタイム CSS-in-JS からの脱却 EmotionからCSS Modulesへの移⾏!React Server ComponentsのCSS対応 https://tech.findy.co.jp/entry/2024/09/09/090000
24 技術選定を振り返る • ユーザーのため ◦ 最速で価値を届けられるか? ◦ 良いユーザー体験が実現できるか? • ⾃分達のため
◦ チームに受け⼊れられるか? ◦ 良い開発者体験が期待できるか? • プロダクトのため ◦ 持続的な開発ができるか?
25 まとめ • 何のための技術選定か ◦ プロダクトとプロダクトに関わる⼈達のため • 重要なマインド ◦ 「当時はそれが正解だった」
• ⼩さくはじめる
技術選定に歴史あり 26
リスペクトを忘れずに 27
28 ツール選定といえば...
ツール選定のお供に 29 https://findy-tools.io/
We’re hiring! https://careers.findy.co.jp/ 30