人×AI教育ドキュメント制作と感想
〜人間エンジニアと生成AIの協働による共創型学習リソース〜
概要
生成AIと人間が協働して教育コンテンツを開発した事例を紹介する。
対象はRxJS（Reactive Extensions for JavaScript）であり、教材制作を通して得た知見を共有する。
背景と課題認識
- 教育コンテンツ制作は多大な時間と労力を要する
- AI（ChatGPT等）活用により一部工程の効率化が可能
- ただし、単純な自動生成のみでは品質保証が困難
これらの課題に対し、人間とAIによる役割分担型制作プロセスを実践した。
制作プロセス
| 制作工程 | 担当 |
|---|---|
| コンテンツ構成・学習設計 | 人間 |
| 各セクションの叩き台・例示 | AI支援 |
| 叩き台へのレビュー・リファクタリング | 人間 |
| 体系性・流れの整理 | 人間主導、AI補助 |
制作ステップ詳細
1. 教材のテーマ選定
以下の様に教材テーマを設定しました。
- 技術領域: RxJS
- 学習目的: リアクティブプログラミングの理解を明確化
- 想定読者: TypeScriptを普段利用している RxJSの初学者
2. 全体構成の設計
以下の3段階に分割し、各章のアウトラインを人間が策定（見出し案、必要なコード例など）
- 概念
- サンプル
- 実践演習
また、
- RxJS初学者向けての学習ロードマップの生成を依頼
- ☝️これらを監修し目次として設定
3. 各セクションの草案生成（AI支援）
- ChatGPT及び、Claudeに
- 目次構成を踏まえた上で、各ページの生成を依頼
- さらに具体的な内容を「RxJSの
mapオペレーターについて入門者向けに解説して」といったプロンプトで初稿を生成し依頼
- 複数パターンを比較し採用
4. 人間によるレビュー・修正
- 内容の正確性、用語の適切さ、読者に伝わりやすい表現かを重点的に確認し、コード動作確認を含めて調整した。
- コードの注意点など
note, tip, caution, importantなど、補足しAIに報告すると、以降はAIの方から補足するようになった。
- コードの注意点など
- 用語についてなどの補足は、検索エンジンを駆使して調査し読者目線で補足しました。
5. 体系性の確認と構成再調整
他の章との一貫性や前提知識の順序に矛盾がないかをチェックし、章順や見出し構成を整理
6. 図・表・補足リソースの追加
Mermaidを用いた図解（データフロー、マーブル図など）を追加し、markdown-it拡張で視覚的補助を実装
7. VitePressへの実装とスタイル整備
Markdown形式でVitePressに落とし込み、CSSやプラグインを活用して可読性・視認性を高めました。
8. 公開とバージョン管理
GitHub Actionsを用いた自動デプロイを設定し、教材はGitHub Pagesで公開。バージョンごとのブランチ・タグ管理を実施した。
使用技術・ツール
- GitHub (ドキュメント管理)
- VitePress (ドキュメントサイト構築)
- GitHub Pages (ホスティング)
- GitHub Actions (自動デプロイ)
- TypeScript + RxJS (サンプルコード)
- markdown-it拡張＋Mermaid (図表生成)
成果物
✅ オンライン版教材はこちら — RxJS with TypeScript学習教材（VitePress公開）
👉 教材ソースコードはこちら — GitHubリポジトリ
実践から得られた知見
-
AI活用による生産性向上
- 通常3ヶ月相当の作業を1週間で完了
- 叩き台生成にAIを活用することで人的リソースを削減
-
人間による品質保証の重要性
- 内容精査、ニュアンス調整、誤情報防止は人間必須
- AIの出力には事実誤認リスクが内在するため、監修
AIの使い分け
今回は以下のようにAIを使い分けた
| AI | 利用用途 |
|---|---|
Claude (個人用Proプラン)Claud 3.7 Sonnet
|
* ページ単位の草案の生成 * 1ページ単位で完結するタスクの依頼 * 完成したページの評価 |
ChatGPT (ChatGPT Plus)GPT-4o
|
* プロジェクト全体の進行も含めた制作に関するあらゆる相談 * Claudeまたは自身が書いた草案の評価と添削・補足の依頼 |
Claudeは、ページ単位の草案生成において有用であり、比較的精度が高い構成を出力した。
Cloade自体に実行環境無いのに、全体的なコード生成精度は高い。
それでも、提示されるコードには型の不備など散見され、内容の検証と修正が不可欠だった。
物を書くということより、アプリケーションを作る際のコード生成に有利という感じ。
また、個人Proプランには利用制限があり、長時間の連携には不向きだった。
ChatGPT（GPT-4o）は、コードの正確性が高く、文書全体の構成整理やレビュー、対話を通じた改善に強みがあった。特に長期的なプロジェクトの伴走役として安定しており、ナレッジ共有や相談にも柔軟に対応可能だった。
ただし、生成するコードは単純なものが多く（学習として理解しやすいを重きを置いているのかもしれない）、アプリケーションを本格的に作ろうと思う人には不向きだと思う。
成果と今後の展望
- 教材の基本フレームを構築済み
- 今後は学習ドリルや応用演習の追加を計画
- stackblitzなど、直接ページのサンプルコードを実行できるような、ユーザの利便性を高める仕組み作り
- AI支援型教育コンテンツ制作のベストプラクティスを継続的に検証・改善する
Discussion