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

スタディサプリにおける TypeScript 活用事例と今後の展望 / jsconf-jp...

indigolain
November 27, 2021

スタディサプリにおける TypeScript 活用事例と今後の展望 / jsconf-jp-2021

JSConf JP 2021 でSponsor LT をさせていただいた時の資料です。

以下は資料内で紹介した発表スライドです。
Generate React Component with TypeScript AST
https://speakerdeck.com/quramy/generate-react-component-with-typescript-ast

最高のマスターデータ管理手法考察 & VSCode Extension を活用した話 / developing masterdata management tool by using vscode extension
https://speakerdeck.com/qsona/developing-masterdata-management-tool-by-using-vscode-extension

純粋培養GraphQL / Pure GraphQL Architecture
https://speakerdeck.com/qsona/pure-graphql-architecture

GraphQL と Prisma から考える次のN年を見据えた技術選定 / Architecture decision for the next N years at StudySapuri
https://speakerdeck.com/qsona/architecture-decision-for-the-next-n-years-at-studysapuri

indigolain

November 27, 2021
Tweet

More Decks by indigolain

Other Decks in Technology

Transcript

  1. 3 - @indigolain / Takuya Uehara - Web エンジニア -

    スタディサプリのバックエンド / フロントエンド - 現チームではwebフロントエンドをメインで担当 自己紹介
  2. 5 株式会社リクルート メディア& ソリューション SBU 人材派遣 SBU HR テクノロジー 「スタディサプリ」は株式会社リクルートが開発・提供しているサービスです

    創業 本社 連結売上収益 連結子会社数 従業員数 創業 1960年 設立 1963年 東京 22,693億円 (2020年4月1日~2021年3月31日) 連結子会社 351社 関連会社8社 (2021年3月31日時点) 46,800名(2021年3月31日時点) OUR MISSION https://docs.google.com/presentation/d/e/2PACX-1vS6ejj0N-qiOM6lLt3LrV0IcFmD4WzM YcSjtMJPEu2CrSNpgZrzNYHTVrLSpq6RCbgpELPGAWS5qUqi/pub より引用
  3. 6 "Distributors of Wisdom"というビジョンのもと、オンライン学習サービスを通じて ”Bringing the Best Education to Every

    Corner of the World”(世界の果てまで最高の学びを届けよう) というミッションを掲げています。 Bringing the Best Education to Every Corner of the World スタディサプリ事業のビジョン・ミッション https://docs.google.com/presentation/d/e/2PACX-1vS6ejj0N-qiOM6lLt3LrV0IcFmD4WzM YcSjtMJPEu2CrSNpgZrzNYHTVrLSpq6RCbgpELPGAWS5qUqi/pub より引用
  4. 8 47万人 74万人 26万人 8万人 4万人 サービス開始から7年、有料会員数は国内外で累計216万人※となりました ※2020年度単体 国外 国内

    2014 2015 2016 2017 2018 2013 97万人 194 22 2019 127万人 2019 2020 216万人 https://docs.google.com/presentation/d/e/2PACX-1vS6ejj0N-qiOM6lLt3LrV0IcFmD4WzM YcSjtMJPEu2CrSNpgZrzNYHTVrLSpq6RCbgpELPGAWS5qUqi/pub より引用
  5. 11 • フロントエンド ◦ TypeScript ◦ Next.js ◦ Apollo •

    サーバサイド ◦ TypeScript ◦ Prisma ◦ GraphQL (Apollo) ◦ Rails • サービス間通信はGraphQL 新規サービスの構成図
  6. 12 • フロントエンド ◦ TypeScript ◦ Next.js ◦ Apollo •

    サーバサイド ◦ TypeScript ◦ Prisma ◦ GraphQL (Apollo) ◦ Rails • サービス間通信はGraphQL 新規サービスの構成図
  7. 18 • SVG の木構造を探索して必要に応じて置換処理 • コンポーネントをレンダーする際に mask id をダイナミックに発番 •

    props の定義を盛り込んで外部からサイズの指定をできるように TypeScript Compiler API で AST 変換
  8. 21 • フロントエンド ◦ TypeScript ◦ Next.js ◦ Apollo •

    サーバサイド ◦ TypeScript ◦ Prisma ◦ GraphQL (Apollo) ◦ Rails • サービス間通信はGraphQL 新規サービスの構成図
  9. 25 • GraphQL の運用を改善したい ◦ 例: Persisted Queries を活用し、デプロイの堅牢性を高めたり パフォーマンス向上を目指したい

    • メンテナブルな Design System を構築していきたい ◦ 例: コンポーネントライブラリとデザインツールの同期 ◦ 例: コンポーネントベース VRT の改善 • Prisma を利用したアーキテクチャや開発体験を改良したい ◦ 例: Prisma + Jest での自動テストの開発体験改善 • 開発をよりスケーラブルにして、プロダクトを前に進めたい • etc... 今後の展望