TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題

株式会社Progateは、初心者向けのプログラミング学習サービス Progate に加え、より一歩先の学習が出来る新サービス、 Progate Path を2022年11月にリリースしました。Progate Path は「実務感」をテーマに、自分の環境でプロダクト開発に携わる経験が積める学習サービスになっています。ローンチ前には、この「実務感」のある演習の試作を作ろうと、OSSのPRを模した課題を作成したり、オープンになっているインターンプロジェクトを模したプロジェクトを用意するなど、様々な形で試作を行いました。

本セッションでは、試作する中で見えてきた「実務感」の定義などを紹介しつつ、TypeScriptでは教材としてどういう点が優れており、逆にどういった点が課題となっているかを紹介します。

Transcript

1. Makoto Shimazu (株式会社Progate CTO) @TSKaigi2024 2024/05/11 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
2. 島津 真人 （しまづ まこと） X: @MakotoShimazu Progate CTO プログラミング言語の経験： 大学/ 大学院 ロボコン（C言語）や DB/FSの研究（C言語） 各種バイト（Python, C#/Java, C++） Google Chrome チームで Service Workerの開発（C++） お手伝い 漫画翻訳編集アプリ , 漫画ビューワー（TS, Python） Progate Progate Path の開発（Go, TS）, Progateの開発 (Ruby) 趣味 TS, JS, C/C++, Rustなど
3. • Progate って知っていますか？ みなさんに質問です！
4. • Progate って知っていますか？ • TypeScriptのイメージはありますか？ みなさんに質問です！
5. TypeScript を Progate ではどこで使っているか 大きくわけて２種類 • プロダクト（Next.js, React SPA) • 教材
6. TypeScript を Progate ではどこで使っているか 大きくわけて２種類 • プロダクト（Next.js, React SPA) • 教材 ◦ 今日はここについて話します！
7. Progateは2023年06月に世界累計ユーザー数300万人を突破。 しかし、本気でエンジニアを目指したい人にとっては『実務感が不足している』という課題も明確に。 エンジニアとしての第一歩！ エンジニアとして活躍！ Progateだけだと現場に出るにはスキルが不足している … Progateの後、何をやったらいいかわからない … 300万人以上の人に 一歩目を提供できた！ これまでのProgate
8. 「実務感」のある演習を備えた Progate Path をリリースしました！ 2022/11/09 リリース！ 自分の環境でプロダクト開発経験ができる演習体験を提供
10. Progate Path • 自分の環境で、「プロダクト開発」を学べる学習プラットフォームです！ • コードをダウンロードし、仕様が与えられ、新機能追加やデバッグを学べる • さらに、 Progate Prospects （β）として採用プラットフォームも展開 ◦ （興味ある人はお声掛けください！）
11. 「実務感」ってなんだろう？
12. 「実務感」の試行錯誤 プロトタイプ： GSoC (Google Summer of Code) のプロジェクトを模して、 実際のプロジェクトで作られていったPRの通りに進めてみる演習をつくってみた 結果： ただ課題がどんどん振ってくる感じで、 最終的には何かしら完成するが、やらされている感がめちゃくちゃ強くなってし まった
13. 「実務感」についてわかったこと いくつかプロトタイピングしてきて見えたこと： • 「実務感がある」状態というのは、 受講者に、何をすべきか決定する適切な範囲の自由度が与えられている状態 適切な範囲の自由度の例： • 初心者：for文をつかってこのコードを埋めましょう • 初級者：解き方の手順が与えられ、それに沿ってどうコードを書くか考える • 中級者：仕様だけ渡されたときに、どう解くか悩む • … • （ワールドクラス：未解決問題を解く、でもちょうどいいかもしれない？）
14. 実務感は見えてきたが、でも・・・・ そんな都合の良い題材は転がっていない！ ということで内製をすることに
15. Progate Path の教材を TS でつくる上での良い点 （概ね）教えたいことを簡単に教えられる • 基本的な構文やデータ構造に加え、型が使いやすくカバーされている • 数値が返ってくるけどたまに文字列が変える”便利関数”を作ってしまいがち ◦ 返り値の型が変わるということに気づかせることができ、未然に問題を防げる 学習のための情報が多い • TypeScript handbook、MDN を始め、書籍、ブログなど沢山の情報がある • 出来る人が多いため、聞く相手も増えやすい ものづくりに取り掛かりやすい • 最初のセットアップさえ用意してあげれば、変更がすぐに反映される環境が 整えられる（HMRなどの技術が広く普及している） • バックエンド・フロントエンドを含め、とりあえず全体を触ることができる
16. Progate Path の教材を TS でつくる上での難しい点 ECMAScript / Web や Node.js の API / TypeScript の型 • 実行環境と言語が理解しづらく、ドキュメントを探すときに混乱しがち ◦ 型の話なのにMDNを探してしまうとか（あながち間違いとも言えず、難しい） • 教材を作っていく中で工夫が必要 古いドキュメント/APIと新しいドキュメント/APIの混在 • 例：varで変数定義をするドキュメント • 例：fetch APIではなく何かしらのライブラリを利用 複雑なモジュールシステム • とりあえず動かす、が難しく、ブラックボックスが肥大化しがち。
17. その他 TypeScript / JavaScript の世界だと教えづらいもの 参照やメモリ管理 • const o = {}; o.child = o; • 参照の解放とメモリの回収のタイミング バイナリによるデータ表現 • int32 vs float, char[32] vs char* p & uint32 len • エンディアン イミュータビリティ • const が参照の定数化だけなので、分かりづらい • 一応 as const とか readonly とかあるけど、「意識的に解放する」のではな く、「意識的に守る」必要がある
18. ドキュメントや学習のための一貫性のある資料 • ここは特に Progate Path が貢献出来ると考えているところ • TypeScript コミュニティーの発展にしっかり貢献できるように頑張ります！
19. さいごに 1/2 - 「Progateの技術的なおもしろポイント」 ユーザーさんが触るものが「プログラミングのコード」という部分が特殊で、 技術的にも面白い部分です • WebAssembly によるコード実行環境の整備 • ほぼ似ているけどちょっとずつ違うコードをうまく管理し、共通部分を変更 してもどの演習も壊れないことを保証するCI・CDの構築 • プロダクションより膨大なE2Eテストを提供する演習の制作 プロダクトづくりが大好きなメンバーを大募集中です！！ ちょっとでも興味がある方は、ブースで声かけてもらうか、 「Progate 採用」で検索してカジュ面してもらえると嬉しいです！！！
20. さいごに 2/2 - 学生向けイベントもたくさん開催します！ TSKaigi サブイベント • 学生向けLT会（３０人規模） 5/17（金） • もし好評なら更に学生向けLT会を追加で企画も・・・！？ ◦ ぜひ progate.connpass.com をチェック してください！ ２６卒向け開発イベント • 2日で VSCode 拡張をつくろう　初回 6/15（土）・16（日） ◦ connpassで公開中です！オンライン回も予定してます！ • 1週間で Git を実装しよう インターンプログラム ◦ まだ企画中ですが、間もなく Progate Path 上で公開する予定です！ ◦ サンプル実装は TypeScript でも作っています。 ◦ すでに興味があるよ！という方がいたら、 Progateの社員にぜひ一声話しかけてください！