ニュースレターつき会員制メディア作成サービス Medy における TypeScript 活用

2021/12/17 Harajuku.ts Meetup #1

Transcript

1. Title
   yyyy/mm/dd
   ニュースレターつき会員制メディア作成サービス
   Medy における TypeScript 活用
   2021/12/17 Harajuku.ts Meetup #1
   

   View Slide

2. Spectra, Inc.
   Spectra, Inc.
   自己紹介
   2
   storz / Satoru Takanami
   ● スキル: Go, TypeScript, GCP
   ● 経歴
   ○ 2017-2019: メルカリグループ
   ■ ソウゾウ
   ● 本に特化した売買アプリ
   ■ メルペイ
   ● QR コード決済
   ○ 2020-: Spectra
   ■ 自社サービス「Medy」
   ■ DX 支援
   

   View Slide

3. Spectra, Inc.
   Agenda
   ● Medy の話
   ○ サービスの紹介
   ○ アプリケーションアーキテクチャ説明
   ○ インフラ構成図解
   ● Apache Thrift x TypeScript
   ● Next.js x TypeScript
   ● React x TypeScirpt
   3
   

   View Slide

4. Spectra, Inc.
   Medy のサービス紹介
   4
   01
   

   View Slide

5. Spectra, Inc.
   Medy について（宣伝）
   5
   自分専用のメディアを持ちニュースレター形式で運営できるメディアサービスです。
   

   View Slide

6. Spectra, Inc.
   Medy について（宣伝）
   6
   ブログ × メルマガのような形態。

   

   ブログ　：オープンさ, ソーシャルとの連携 

   メルマガ：クローズさ, 直接手元に届ける

   のメリットを組み合わせ読者と関係性を作る、セミクローズドな発信スタイル・メディアの種類です。
   WEB上の記事公開 × メールで記事を直接届け、コミュニティ形成・収益化へ。
   

   View Slide

7. Spectra, Inc.
   アプリケーションアーキテクチャ説明 #1
   ● モノレポです
   ● 以下のようなモジュールがあります
   ○ web
   ■ FE アプリケーションサーバ
   ● UA 上で動作するアプリケーションを配布
   ○ backend
   ■ Web アプリケーションサーバ
   ● GraphQL I/F
   ● BE アプリケーション
   ○ その他
   ■ Apache Thrift 定義 / Cloud Functions コード / MkDocs (ドキュメン
   ト)
   7
   

   View Slide

8. Spectra, Inc.
   アプリケーションアーキテクチャ説明 #2
   ● 技術スタック
   ○ web
   ■ TypeScript, React, Next.js, Apollo Client, Tailwind CSS
   ○ backend
   ■ Go, gqlgen
   ○ その他
   ■ Apache Thrift (TypeScript, Go コード生成)
   8
   

   View Slide

9. Spectra, Inc.
   インフラ構成（簡略版）
   9
   ● 主に Google Cloud
   で構成しています
   ● Web では Next.js (Server) が
   動作しています
   ○ SSG / 静的ファイルの配信
   ○ SSR
   

   View Slide

10. Spectra, Inc.
    Medy での TypeScript 活用例
    10
    02
    

    View Slide

11. Spectra, Inc.
    Apache Thrift x TypeScript
    ● Apache Thrift
    ○ Meta (旧 Facebook) で開発されたクロスランゲージな RPC フレームワー
    ク
    ■ https://thrift.apache.org/
    ● Medy での用途
    ○ モジュールを跨いで共有したい値があるときなどに利用
    ○ 他にもシリアライゼーションの機能など
    11
    

    View Slide

12. Spectra, Inc.
    Apache Thrift x TypeScript
    ● モジュールを跨いで共有したい値があるとき
    ○ 認証トークンを載せる HTTP header name
    ■ e.g. “X-HOGE-TOKEN” といった文字列
    ○ GraphQL query/mutation が返すエラーコード
    ■ 特定のエラーを Web 側でハンドルしたい場合がある
    12
    

    View Slide

13. Spectra, Inc.
    Apache Thrift x TypeScript
    13
    enum の生成例
    errors.thrift
    errors.js
    errors.d.ts
    

    View Slide

14. Spectra, Inc.
    Apache Thrift x TypeScript
    ● シリアライゼーション機能の利用
    ○ Identity Platform で発生したイベントを Cloud Function (TypeScript) で
    受けて Backend に伝えたかった
    ● Identity Platform？
    ○ ≒ Firebase Authentication
    ■ SDK も共通
    ○ SLA が設定されているなどよりエンタープライズ向け
    14
    

    View Slide

15. Spectra, Inc.
    Apache Thrift x TypeScript
    ● Identity Platform のイベントを
    シリアライズする様子
    15
    他の言語（e.g Go）で
    デシリアライズできる
    

    View Slide

16. 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
    

    View Slide

17. Spectra, Inc.
    Spectra, Inc. 17
    React x TypeScirpt
    ● React.ComponentProps
    ○ コンポーネントのプロパティを
    type 定義に再利用できる
    ○ Index signatures `T[K]` を
    利用してフィールドごとの
    type を取り出すのも便利
    

    View Slide

18. View Slide