Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

2021/12/17 Harajuku.ts Meetup #1

Satoru Takanami

December 17, 2021
Tweet

Other Decks in Programming

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