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
メルペイのTypeScript活用 / TypeScript practical use in...
Search
naughtLdy
October 02, 2019
Technology
0
320
メルペイのTypeScript活用 / TypeScript practical use in Merpay
naughtLdy
October 02, 2019
Tweet
Share
More Decks by naughtLdy
See All by naughtLdy
What we do for quality as merpay frontend
naughtldy
0
490
Other Decks in Technology
See All in Technology
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
150
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.1k
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.5k
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.2k
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
730
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
Fargateを使った研修の話
takesection
0
110
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
202
24k
GraphQLとの向き合い方2022年版
quramy
43
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Designing Experiences People Love
moore
138
23k
Teambox: Starting and Learning
jrom
132
8.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Rails Girls Zürich Keynote
gr2m
93
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Transcript
メルペイのTypeScript活用 TypeScript meetup #3 2019/10/02 Daiki Sugiura
Daiki Sugiura @naughtLdy • Frontend Engineer • メルペイ CS Tool
None
話すこと • メルペイについて • Nuxt.js + TypeScript • TypeScript活用 /
開発について
メルペイについて
プロダクト パートナー向け C向け •キャンペーン(LP) •クーポン •あと払い •オンライン決済 •加盟店申し込みフォーム •加盟店管理画面 •カスタマーサービス
•加盟店サービス 社内向け
技術スタック Application CI / CD Infra Monitoring
プライベートレジストリ APIClient Validation Rules tsconfig protoc-gen-jsonpb-ts lerna
開発フロー GitHub flow Pull Request Lint / Unit Test Code
Review Approved Build Save Container Image Deploy Container Image Create Container Image
Nuxt.js + TypeScript
Nuxt.js + TypeScript 各プロジェクト共通の機能を package として開発 lerna を使って monorepo にしている
• @merpay/api-client • @merpay/protoc-gen-jsonpb-ts • @merpay/tsconfig-merpay • vuex-typescript-fsa
Nuxt+TypeScriptの事始め NuxtMeetup#2 https://speakerdeck.com/sue71/nuxt-and-typescript
TypeScript活用 / 開発について
TypeScriptで得られるメリット • 人間のうっかりを防いでくれる • Vuex (Store)での型安全 • Component の props
での型安全 • API での型安全
TypeScriptで得られるメリット • 人間のうっかりを防いでくれる • Vuex (Store)での型安全 • Component の props
での型安全 • API での型安全
開発について • エンジニアでAPIの仕様を決める • proto ファイルのレビューを Frontend, Backend 双方からする ◦
全サービスの proto を管理しているリポジトリがあり、プルリクベースでレビューする ◦ proto から README も自動で作成される • proto ファイルを TypeScript に変換して開発する ◦ Frontend は mock API を使用して Backend と平行して開発を進めることができる
protocol buffers メルペイでは API の定義に使用している • gRPC用に API仕様を定義するデータフォーマット • proto
ファイルで API 仕様を定義し、各言語向けに変換して使う • TypeScript に変換することで型安全に開発することが容易になる https://developers.google.com/protocol-buffers/
@merpay/protoc-gen-jsonpb-ts • proto ファイルから TypeScript に変換するライブラリ • Nuxt.js (axios) を使う用に特化している
proto
proto TypeScript
Vuex (Store)
store → vue ここから先の話の補足になる Repository naughtLdy/sandbox-typescript-meetup3 https://github.com/naughtLdy/sandbox-typescript-meetup3
store 定義
store → vue
store → vue any型
store → vue string型
Mapper を作って型がわかるようにする https://github.com/naughtLdy/sandbox-typescript-meetup3/blob/master/src/store/helpers.ts\#L148-L163
store → vue any型 string型
開発について TypeScript の恩恵で • 型安全に Backend とやりとりができる • proto が変更されても気づく仕組みが作れる
ありがとうございました