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

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

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. 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