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
ニュースレターつき会員制メディア作成サービス Medy における TypeScript 活用
Search
Satoru Takanami
December 17, 2021
Programming
0
270
ニュースレターつき会員制メディア作成サービス Medy における TypeScript 活用
2021/12/17 Harajuku.ts Meetup #1
Satoru Takanami
December 17, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
22
12k
Catch Up with Swift 5.10
ojun9
1
450
「プログラマーのためのCPU入門」は入り口として丁度よい!
forrep
25
22k
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
5
830
Material 3で Material 2ぽい見た目にする
numeroanddev
2
220
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
110
TypeScript x GraphQLで2年開発してみて
yutank34
8
4.7k
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
4
440
20240301_cocone_EMゆるミートアップvol6_LT資料
cocone
0
250
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
130
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2k
SmartHRにおけるプロダクトエンジニア/product_engineer_in_smarthr_20240227
saitoryc
5
180
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
11
1.4k
Faster Mobile Websites
deanohume
296
30k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Designing Experiences People Love
moore
135
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Transcript
Title yyyy/mm/dd ニュースレターつき会員制メディア作成サービス Medy における TypeScript 活用 2021/12/17 Harajuku.ts Meetup
#1
Spectra, Inc. Spectra, Inc. 自己紹介 2 storz / Satoru Takanami
• スキル: Go, TypeScript, GCP • 経歴 ◦ 2017-2019: メルカリグループ ▪ ソウゾウ • 本に特化した売買アプリ ▪ メルペイ • QR コード決済 ◦ 2020-: Spectra ▪ 自社サービス「Medy」 ▪ DX 支援
Spectra, Inc. Agenda • Medy の話 ◦ サービスの紹介 ◦ アプリケーションアーキテクチャ説明
◦ インフラ構成図解 • Apache Thrift x TypeScript • Next.js x TypeScript • React x TypeScirpt 3
Spectra, Inc. Medy のサービス紹介 4 01
Spectra, Inc. Medy について(宣伝) 5 自分専用のメディアを持ちニュースレター形式で運営できるメディアサービスです。
Spectra, Inc. Medy について(宣伝) 6 ブログ × メルマガのような形態。 ブログ :オープンさ,
ソーシャルとの連携 メルマガ:クローズさ, 直接手元に届ける のメリットを組み合わせ読者と関係性を作る、セミクローズドな発信スタイル・メディアの種類です。 WEB上の記事公開 × メールで記事を直接届け、コミュニティ形成・収益化へ。
Spectra, Inc. アプリケーションアーキテクチャ説明 #1 • モノレポです • 以下のようなモジュールがあります ◦ web
▪ FE アプリケーションサーバ • UA 上で動作するアプリケーションを配布 ◦ backend ▪ Web アプリケーションサーバ • GraphQL I/F • BE アプリケーション ◦ その他 ▪ Apache Thrift 定義 / Cloud Functions コード / MkDocs (ドキュメン ト) 7
Spectra, Inc. アプリケーションアーキテクチャ説明 #2 • 技術スタック ◦ web ▪ TypeScript,
React, Next.js, Apollo Client, Tailwind CSS ◦ backend ▪ Go, gqlgen ◦ その他 ▪ Apache Thrift (TypeScript, Go コード生成) 8
Spectra, Inc. インフラ構成(簡略版) 9 • 主に Google Cloud で構成しています •
Web では Next.js (Server) が 動作しています ◦ SSG / 静的ファイルの配信 ◦ SSR
Spectra, Inc. Medy での TypeScript 活用例 10 02
Spectra, Inc. Apache Thrift x TypeScript • Apache Thrift ◦
Meta (旧 Facebook) で開発されたクロスランゲージな RPC フレームワー ク ▪ https://thrift.apache.org/ • Medy での用途 ◦ モジュールを跨いで共有したい値があるときなどに利用 ◦ 他にもシリアライゼーションの機能など 11
Spectra, Inc. Apache Thrift x TypeScript • モジュールを跨いで共有したい値があるとき ◦ 認証トークンを載せる
HTTP header name ▪ e.g. “X-HOGE-TOKEN” といった文字列 ◦ GraphQL query/mutation が返すエラーコード ▪ 特定のエラーを Web 側でハンドルしたい場合がある 12
Spectra, Inc. Apache Thrift x TypeScript 13 enum の生成例 errors.thrift
errors.js errors.d.ts
Spectra, Inc. Apache Thrift x TypeScript • シリアライゼーション機能の利用 ◦ Identity
Platform で発生したイベントを Cloud Function (TypeScript) で 受けて Backend に伝えたかった • Identity Platform? ◦ ≒ Firebase Authentication ▪ SDK も共通 ◦ SLA が設定されているなどよりエンタープライズ向け 14
Spectra, Inc. Apache Thrift x TypeScript • Identity Platform のイベントを
シリアライズする様子 15 他の言語(e.g Go)で デシリアライズできる
Spectra, Inc. Spectra, Inc. 16 Next.js x TypeScript • プロジェクトルートに
tsconfig.json を設置してビルドするだけで 動作するので導入は楽 • .js を徐々に .tsx に置き換えていけばいい(たぶん) • ビルトインでいくつか type のサポートがある ◦ GetStaticProps, GetStaticPaths, and GetServerSideProps • next.config.js の型チェックができる ◦ ただし IDE 上での動作 https://nextjs.org/docs/basic-features/typescript
Spectra, Inc. Spectra, Inc. 17 React x TypeScirpt • React.ComponentProps
◦ コンポーネントのプロパティを type 定義に再利用できる ◦ Index signatures `T[K]` を 利用してフィールドごとの type を取り出すのも便利
None