Makoto Shimazu (株式会社Progate CTO) @TSKaigi2024 2024/05/11 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題

島津 真人 （しまづ まこと） 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など

● Progate って知っていますか？ みなさんに質問です！

● Progate って知っていますか？ ● TypeScriptのイメージはありますか？ みなさんに質問です！

TypeScript を Progate ではどこで使っているか 大きくわけて２種類 ● プロダクト（Next.js, React SPA) ● 教材

TypeScript を Progate ではどこで使っているか 大きくわけて２種類 ● プロダクト（Next.js, React SPA) ● 教材 ○ 今日はここについて話します！

Progateは2023年06月に世界累計ユーザー数300万人を突破。 しかし、本気でエンジニアを目指したい人にとっては『実務感が不足している』という課題も明確に。 エンジニアとしての第一歩！ エンジニアとして活躍！ Progateだけだと現場に出るにはスキルが不足している … Progateの後、何をやったらいいかわからない … 300万人以上の人に 一歩目を提供できた！ これまでのProgate

「実務感」のある演習を備えた Progate Path をリリースしました！ 2022/11/09 リリース！ 自分の環境でプロダクト開発経験ができる演習体験を提供

No content

Progate Path ● 自分の環境で、「プロダクト開発」を学べる学習プラットフォームです！ ● コードをダウンロードし、仕様が与えられ、新機能追加やデバッグを学べる ● さらに、 Progate Prospects （β）として採用プラットフォームも展開 ○ （興味ある人はお声掛けください！）

「実務感」ってなんだろう？

「実務感」の試行錯誤 プロトタイプ： GSoC (Google Summer of Code) のプロジェクトを模して、 実際のプロジェクトで作られていったPRの通りに進めてみる演習をつくってみた 結果： ただ課題がどんどん振ってくる感じで、 最終的には何かしら完成するが、やらされている感がめちゃくちゃ強くなってし まった

「実務感」についてわかったこと いくつかプロトタイピングしてきて見えたこと： ● 「実務感がある」状態というのは、 受講者に、何をすべきか決定する適切な範囲の自由度が与えられている状態 適切な範囲の自由度の例： ● 初心者：for文をつかってこのコードを埋めましょう ● 初級者：解き方の手順が与えられ、それに沿ってどうコードを書くか考える ● 中級者：仕様だけ渡されたときに、どう解くか悩む ● … ● （ワールドクラス：未解決問題を解く、でもちょうどいいかもしれない？）

実務感は見えてきたが、でも・・・・ そんな都合の良い題材は転がっていない！ ということで内製をすることに

Progate Path の教材を TS でつくる上での良い点 （概ね）教えたいことを簡単に教えられる ● 基本的な構文やデータ構造に加え、型が使いやすくカバーされている ● 数値が返ってくるけどたまに文字列が変える”便利関数”を作ってしまいがち ○ 返り値の型が変わるということに気づかせることができ、未然に問題を防げる 学習のための情報が多い ● TypeScript handbook、MDN を始め、書籍、ブログなど沢山の情報がある ● 出来る人が多いため、聞く相手も増えやすい ものづくりに取り掛かりやすい ● 最初のセットアップさえ用意してあげれば、変更がすぐに反映される環境が 整えられる（HMRなどの技術が広く普及している） ● バックエンド・フロントエンドを含め、とりあえず全体を触ることができる

Progate Path の教材を TS でつくる上での難しい点 ECMAScript / Web や Node.js の API / TypeScript の型 ● 実行環境と言語が理解しづらく、ドキュメントを探すときに混乱しがち ○ 型の話なのにMDNを探してしまうとか（あながち間違いとも言えず、難しい） ● 教材を作っていく中で工夫が必要 古いドキュメント/APIと新しいドキュメント/APIの混在 ● 例：varで変数定義をするドキュメント ● 例：fetch APIではなく何かしらのライブラリを利用 複雑なモジュールシステム ● とりあえず動かす、が難しく、ブラックボックスが肥大化しがち。

その他 TypeScript / JavaScript の世界だと教えづらいもの 参照やメモリ管理 ● const o = {}; o.child = o; ● 参照の解放とメモリの回収のタイミング バイナリによるデータ表現 ● int32 vs float, char[32] vs char* p & uint32 len ● エンディアン イミュータビリティ ● const が参照の定数化だけなので、分かりづらい ● 一応 as const とか readonly とかあるけど、「意識的に解放する」のではな く、「意識的に守る」必要がある

ドキュメントや学習のための一貫性のある資料 ● ここは特に Progate Path が貢献出来ると考えているところ ● TypeScript コミュニティーの発展にしっかり貢献できるように頑張ります！

さいごに 1/2 - 「Progateの技術的なおもしろポイント」 ユーザーさんが触るものが「プログラミングのコード」という部分が特殊で、 技術的にも面白い部分です ● WebAssembly によるコード実行環境の整備 ● ほぼ似ているけどちょっとずつ違うコードをうまく管理し、共通部分を変更 してもどの演習も壊れないことを保証するCI・CDの構築 ● プロダクションより膨大なE2Eテストを提供する演習の制作 プロダクトづくりが大好きなメンバーを大募集中です！！ ちょっとでも興味がある方は、ブースで声かけてもらうか、 「Progate 採用」で検索してカジュ面してもらえると嬉しいです！！！

さいごに 2/2 - 学生向けイベントもたくさん開催します！ TSKaigi サブイベント ● 学生向けLT会（３０人規模） 5/17（金） ● もし好評なら更に学生向けLT会を追加で企画も・・・！？ ○ ぜひ progate.connpass.com をチェック してください！ ２６卒向け開発イベント ● 2日で VSCode 拡張をつくろう　初回 6/15（土）・16（日） ○ connpassで公開中です！オンライン回も予定してます！ ● 1週間で Git を実装しよう インターンプログラム ○ まだ企画中ですが、間もなく Progate Path 上で公開する予定です！ ○ サンプル実装は TypeScript でも作っています。 ○ すでに興味があるよ！という方がいたら、 Progateの社員にぜひ一声話しかけてください！