2021/12/17 Harajuku.ts Meetup #1
Titleyyyy/mm/ddニュースレターつき会員制メディア作成サービスMedy における TypeScript 活用2021/12/17 Harajuku.ts Meetup #1
View Slide
Spectra, Inc.Spectra, Inc.自己紹介2storz / 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 TypeScirpt3
Spectra, Inc.Medy のサービス紹介401
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 活用例1002
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 TypeScript13enum の生成例errors.thrifterrors.jserrors.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. 16Next.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. 17React x TypeScirpt● React.ComponentProps○ コンポーネントのプロパティをtype 定義に再利用できる○ Index signatures `T[K]` を利用してフィールドごとのtype を取り出すのも便利