Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ニュースレターつき会員制メディア作成サービス Medy における TypeScript 活用
Satoru Takanami
December 17, 2021
Programming
0
180
ニュースレターつき会員制メディア作成サービス Medy における TypeScript 活用
2021/12/17 Harajuku.ts Meetup #1
Satoru Takanami
December 17, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
T3 Stack and TypeScript ecosystem
quramy
3
740
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
340
Git Rebase
bkuhlmann
10
1.2k
Workshop on Jetpack compose
aldefy
0
140
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
状態ってなに?🙃
taro28
0
270
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
240
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
180
フロントエンドで学んだことをデータ分析で使ってみた話
daichi_igarashi
0
180
Quarto Tips for Academic Presentation
nicetak
0
910
僕が考えた超最強のKMMアプリの作り方
spbaya0141
0
180
低レイヤーから始める GUI
fadis
18
9.3k
Featured
See All Featured
Docker and Python
trallard
30
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Git: the NoSQL Database
bkeepers
PRO
419
60k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
How STYLIGHT went responsive
nonsquared
89
4.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
Designing with Data
zakiwarfel
91
4.2k
Why Our Code Smells
bkeepers
PRO
326
55k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
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