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

Transcript

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

   #1

2. Spectra, Inc. Spectra, Inc. 自己紹介 2 storz / Satoru Takanami

   • スキル: Go, TypeScript, GCP • 経歴 ◦ 2017-2019: メルカリグループ ▪ ソウゾウ • 本に特化した売買アプリ ▪ メルペイ • QR コード決済 ◦ 2020-: Spectra ▪ 自社サービス「Medy」 ▪ DX 支援

3. Spectra, Inc. Agenda • Medy の話 ◦ サービスの紹介 ◦ アプリケーションアーキテクチャ説明

   ◦ インフラ構成図解 • Apache Thrift x TypeScript • Next.js x TypeScript • React x TypeScirpt 3

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

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

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

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

7. Spectra, Inc. アプリケーションアーキテクチャ説明 #1 • モノレポです • 以下のようなモジュールがあります ◦ web

   ▪ FE アプリケーションサーバ • UA 上で動作するアプリケーションを配布 ◦ backend ▪ Web アプリケーションサーバ • GraphQL I/F • BE アプリケーション ◦ その他 ▪ Apache Thrift 定義 / Cloud Functions コード / MkDocs (ドキュメン ト) 7

8. Spectra, Inc. アプリケーションアーキテクチャ説明 #2 • 技術スタック ◦ web ▪ TypeScript,

   React, Next.js, Apollo Client, Tailwind CSS ◦ backend ▪ Go, gqlgen ◦ その他 ▪ Apache Thrift (TypeScript, Go コード生成) 8

9. Spectra, Inc. インフラ構成（簡略版） 9 • 主に Google Cloud で構成しています •

   Web では Next.js (Server) が 動作しています ◦ SSG / 静的ファイルの配信 ◦ SSR

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

11. Spectra, Inc. Apache Thrift x TypeScript • Apache Thrift ◦

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

12. Spectra, Inc. Apache Thrift x TypeScript • モジュールを跨いで共有したい値があるとき ◦ 認証トークンを載せる

    HTTP header name ▪ e.g. “X-HOGE-TOKEN” といった文字列 ◦ GraphQL query/mutation が返すエラーコード ▪ 特定のエラーを Web 側でハンドルしたい場合がある 12

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

    errors.js errors.d.ts

14. Spectra, Inc. Apache Thrift x TypeScript • シリアライゼーション機能の利用 ◦ Identity

    Platform で発生したイベントを Cloud Function (TypeScript) で 受けて Backend に伝えたかった • Identity Platform？ ◦ ≒ Firebase Authentication ▪ SDK も共通 ◦ SLA が設定されているなどよりエンタープライズ向け 14

15. Spectra, Inc. Apache Thrift x TypeScript • Identity Platform のイベントを

    シリアライズする様子 15 他の言語（e.g Go）で デシリアライズできる

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

17. Spectra, Inc. Spectra, Inc. 17 React x TypeScirpt • React.ComponentProps

    ◦ コンポーネントのプロパティを type 定義に再利用できる ◦ Index signatures `T[K]` を 利用してフィールドごとの type を取り出すのも便利
18. None