最近、生成AI（ChatGPTなど）を使って学習コンテンツを作る動きが増えています。
けれど、実際に「自分で教材を作って公開する」となると、なかなかハードルが高いですよね。
この記事では、RxJSをTypeScriptで体系的に学ぶ教材を、
AIと人間の協働で作成したプロセスと、その成果を紹介します。
📌 なぜRxJSの教材を作ったのか？
RxJSは非常にパワフルなライブラリですが、学習コストが高く、
- 文献が断片的
- オペレーターの種類が多すぎる
- サンプルコードが実用と乖離している
など、初学者がつまづきやすい点が多くあります。
そこで今回は、
- TypeScriptで記述された
- 体系的に整理された
- 実際に動かせるコード付きの
- 人とAIの共創による教材
という形で、実験的に教材を制作してみました。
いや、ぶっちゃけ、自分自身の体得の為が本音 👈 ここが一番重要な目的だったりする😽
⚙️ 教材の内容（さわりだけ）
本教材では、以下のような流れでRxJSを学べます。
- RxJSの基本概念（Observable, Observer, Subscriptionなど）
- よく使うオペレーター（map, filter, mergeMap...）
- ストリームの作成と変換
- マーブル図の理解とテストパターン
- 実践問題（順次追加予定）
TypeScript + Vite環境で動作確認済みのコードも多数掲載しています。
🤖 人とAIの協働プロセス（ちょっと裏話）
- 章構成・設計：人間が主導
- 各ページの草案：AIが生成
- 内容のレビュー・修正：人間が行う
- 表現・用語の調整：AIと対話しながらブラッシュアップ
AIだけでは完成しない、
人だけでは時間がかかりすぎる、
ちょうどその中間を取るようなプロジェクトでした。
✅ 教材はこちらで公開しています
今後
改めて時間が取れたら、以下に取り組んでみたい。
- 今後は学習ドリルや応用演習の追加を計画
- stackblitzなど、直接ページのサンプルコードを実行できるような、ユーザの利便性を高める仕組み作り
🙌 さいごに
RxJSを本気で学んでみたい方、
生成AIを活用してコンテンツを作りたい方にとって、
少しでも参考になればうれしいです。
教材に関するフィードバックや、あなたの挑戦もぜひ教えてください！