スタディサプリにおける 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

Transcript

1. Recruit Holdings Co., Ltd.
   スタディサプリにおける TypeScript
   活用事例と今後の展望
   2021-11-27 JSConf JP
   Sponsor LT
   @indigolain
   

   View Slide

2. 2
   TypeScript 活用事例
   • 自己紹介
   • スタディサプリについて
   • 新規サービス開発における TypeScript 活用事例
   • 今後の展望
   Agenda
   

   View Slide

3. 3
   - @indigolain / Takuya Uehara
   - Web エンジニア
   - スタディサプリのバックエンド / フロントエンド
   - 現チームではwebフロントエンドをメインで担当
   自己紹介
   

   View Slide

4. 4
   スタディサプリについて
   

   View Slide

5. 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 より引用
   

   View Slide

6. 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 より引用
   

   View Slide

7. 7
   主に3種類の国内向けサービスがあります
   小学生から受験生や大人まで、学習したい全ての人が学べる月額制のオンライン学習サービス。
   約4万本の録画授業動画が見られるベーシックプランのほか、オンラインコーチングプランや生配信で授業を受けられるライブプ
   ランなど、一人一人が自由に学習できるよう、様々なプランを展開しています。
   先生方が生徒個々人のレベルに合った最適な学習を提供できる校内インフラサービス。
   クラス全員に特定の講義や確認テスト、
   宿題を配信することができるほか、アクティブラーニングに使える教材も提供。
   生徒が夢中になって学び、希望する進路を実現することを支援しています。
   隙間時間に3分で学習できる英語サービス。
   リスニングと発話を鍛えられる「新日常英会話コース」、短期間でのスコアアップを
   狙う「TOEIC®L&R TEST対策コース」、「ビジネス英語コース」があり、業界初オンライン完結型コーチングも提供しています。
   https://docs.google.com/presentation/d/e/2PACX-1vS6ejj0N-qiOM6lLt3LrV0IcFmD4WzM
   YcSjtMJPEu2CrSNpgZrzNYHTVrLSpq6RCbgpELPGAWS5qUqi/pub より引用
   

   View Slide

8. 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 より引用
   

   View Slide

9. 9
   新規サービス開発における
   TypeScript 活用事例
   

   View Slide

10. 10
    https://studysapuri.jp/course/junior/release-2022-spring/
    新規サービス
    

    View Slide

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

    View Slide

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

    View Slide

13. 13
    Client side codegen
    

    View Slide

14. 14
    Fragment Colocation
    Lesson
    Lesson
    Lesson
    Content
    Content
    コンポーネント構造 Query / Fragment
    

    View Slide

15. 15
    Extended Atomic Design
    https://bradfrost.com/blog/post/extending-atomic-design/
    ● Colors
    ● Spacings
    ● Shadows
    ● Typography
    ● Iconography
    

    View Slide

16. 16
    Iconography Component 実装イメージ
    Over 70+ Icons
    自動変換
    

    View Slide

17. 17
    クリッピングマスクの id を document 中
    一意にする必要がある
    アイコンのサイズを可変にしたい
    

    View Slide

18. 18
    • SVG の木構造を探索して必要に応じて置換処理
    • コンポーネントをレンダーする際に mask id をダイナミックに発番
    • props の定義を盛り込んで外部からサイズの指定をできるように
    TypeScript Compiler API で AST 変換
    

    View Slide

19. 19
    https://speakerdeck.com/quramy/generate-react-component-with-typescript-ast
    詳しい話はこちらで！
    

    View Slide

20. 20
    https://speakerdeck.com/qsona/developing-masterdata-management-tool
    -by-using-vscode-extension
    コンテンツ入力支援システム
    ● VSCode Extension として開発
    

    View Slide

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

    View Slide

22. 22
    GraphQL API Gateway
    https://speakerdeck.com/qsona/pure-graphql
    -architecture
    ● Schema stitching
    

    View Slide

23. 23
    Backend Services
    https://speakerdeck.com/qsona/architecture-decision-for-the-next-
    n-years-at-studysapuri
    ● Prisma を採用
    ● 今日の Track B 15:40-16:10 で
    弊チームの @qsona が発表しました
    

    View Slide

24. 24
    今後の展望
    

    View Slide

25. 25
    ● GraphQL の運用を改善したい
    ○ 例: Persisted Queries を活用し、デプロイの堅牢性を高めたり
    パフォーマンス向上を目指したい
    ● メンテナブルな Design System を構築していきたい
    ○ 例: コンポーネントライブラリとデザインツールの同期
    ○ 例: コンポーネントベース VRT の改善
    ● Prisma を利用したアーキテクチャや開発体験を改良したい
    ○ 例: Prisma + Jest での自動テストの開発体験改善
    ● 開発をよりスケーラブルにして、プロダクトを前に進めたい
    ● etc...
    今後の展望
    

    View Slide

26. 26
    スタディサプリチームでは人々の学びを支える仲間を絶賛募集中です！
    今日気になったテーマが1つでもあれば
    まずはカジュアル面談からぜひご応募ください！
    We’re hiring!
    https://www.saiyo-dr.jp/recruit/Entry/select_job.do?to=job_view&jobId=1298
    

    View Slide