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

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

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

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

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

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

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

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

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

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

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

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

13 Client side codegen

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

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

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

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

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

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

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

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

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

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

24 今後の展望

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

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