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

TSKaigi 2024 - 新サービス Progate Path の演習で TypeScri...

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

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

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

Makoto Shimazu

May 10, 2024
Tweet

More Decks by Makoto Shimazu

Other Decks in Programming

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. 「実務感」の試行錯誤 プロトタイプ: GSoC (Google Summer of Code) のプロジェクトを模して、 実際のプロジェクトで作られていったPRの通りに進めてみる演習をつくってみた 結果:

    ただ課題がどんどん振ってくる感じで、 最終的には何かしら完成するが、やらされている感がめちゃくちゃ強くなってし まった
  4. Progate Path の教材を TS でつくる上での良い点 (概ね)教えたいことを簡単に教えられる • 基本的な構文やデータ構造に加え、型が使いやすくカバーされている • 数値が返ってくるけどたまに文字列が変える”便利関数”を作ってしまいがち

    ◦ 返り値の型が変わるということに気づかせることができ、未然に問題を防げる 学習のための情報が多い • TypeScript handbook、MDN を始め、書籍、ブログなど沢山の情報がある • 出来る人が多いため、聞く相手も増えやすい ものづくりに取り掛かりやすい • 最初のセットアップさえ用意してあげれば、変更がすぐに反映される環境が 整えられる(HMRなどの技術が広く普及している) • バックエンド・フロントエンドを含め、とりあえず全体を触ることができる
  5. Progate Path の教材を TS でつくる上での難しい点 ECMAScript / Web や Node.js

    の API / TypeScript の型 • 実行環境と言語が理解しづらく、ドキュメントを探すときに混乱しがち ◦ 型の話なのにMDNを探してしまうとか(あながち間違いとも言えず、難しい) • 教材を作っていく中で工夫が必要 古いドキュメント/APIと新しいドキュメント/APIの混在 • 例:varで変数定義をするドキュメント • 例:fetch APIではなく何かしらのライブラリを利用 複雑なモジュールシステム • とりあえず動かす、が難しく、ブラックボックスが肥大化しがち。
  6. その他 TypeScript / JavaScript の世界だと教えづらいもの 参照やメモリ管理 • const o =

    {}; o.child = o; • 参照の解放とメモリの回収のタイミング バイナリによるデータ表現 • int32 vs float, char[32] vs char* p & uint32 len • エンディアン イミュータビリティ • const が参照の定数化だけなので、分かりづらい • 一応 as const とか readonly とかあるけど、「意識的に解放する」のではな く、「意識的に守る」必要がある
  7. さいごに 1/2 - 「Progateの技術的なおもしろポイント」 ユーザーさんが触るものが「プログラミングのコード」という部分が特殊で、 技術的にも面白い部分です • WebAssembly によるコード実行環境の整備 •

    ほぼ似ているけどちょっとずつ違うコードをうまく管理し、共通部分を変更 してもどの演習も壊れないことを保証するCI・CDの構築 • プロダクションより膨大なE2Eテストを提供する演習の制作 プロダクトづくりが大好きなメンバーを大募集中です!! ちょっとでも興味がある方は、ブースで声かけてもらうか、 「Progate 採用」で検索してカジュ面してもらえると嬉しいです!!!
  8. さいごに 2/2 - 学生向けイベントもたくさん開催します! TSKaigi サブイベント • 学生向けLT会(30人規模) 5/17(金) •

    もし好評なら更に学生向けLT会を追加で企画も・・・!? ◦ ぜひ progate.connpass.com をチェック してください! 26卒向け開発イベント • 2日で VSCode 拡張をつくろう 初回 6/15(土)・16(日) ◦ connpassで公開中です!オンライン回も予定してます! • 1週間で Git を実装しよう インターンプログラム ◦ まだ企画中ですが、間もなく Progate Path 上で公開する予定です! ◦ サンプル実装は TypeScript でも作っています。 ◦ すでに興味があるよ!という方がいたら、 Progateの社員にぜひ一声話しかけてください!