Zenn
👩‍🏫

ReactをAIエージェントに習うことができるサービス！教育コストの押し付け合いを解消する（GPT/Gemini/Claude 対応）

に公開
Next.js
React
GPT
Claude
Gemini
idea

はじめに

コーディング生成AIの時代が本格的に到来しましたね。

結論から言いますと、AIエージェントとして“中の人”を担える時代 が来たと確信しています！
生成AIの性能を最大限に引き出すには、自分自身の技術力を底上げすることが欠かせません。現時点での生成AIは自分のコピーであり、自分の実力に比例します。生成AIの時代だからこそ、生成AIの良きパートナーになるために、スキルアップに励みましょう！頑張りましょう！

作ったサービスの説明

好きな先生のAIエージェントを選んで授業を受けられるサービスです。
※ 個人開発です。

No 性別 企業 モデル（LLM）
1 男性 OpenAI GPT-4o
2 女性 OpenAI GPT-4.5
3 男性 Google Gemini 2.0 Flash
4 女性 Anthropic Claude 3.7 Sonnet

デモ動画

※ デモ動画内のモデルは2種類ですが、現在は4種類（上述）に増えています！
https://youtu.be/p1qn7AMSK5U

VTeacher AI の特徴をもっと知る
  • VTeacher AI を使うと、いつでも高レベルな先生に習うことができます。専門知識を持ったAIが、あなたのスキルレベルに応じて最適なアドバイスを提供し、効率的に学習を進めることが可能です。初心者から上級者まで、幅広いニーズに対応できる柔軟なシステムを搭載しています。
  • VTeacher AI はAIエージェントです。ハイレベルで評判の良い、先輩エンジニアのコピーとして設計されており、実際の開発現場で役立つ知識やベストプラクティスを学ぶことができます。エンジニアとしてのスキルを着実に向上させたい方にとって、非常に有益なツールとなるでしょう。
  • VTeacher AI はスモールステップアップ式です。無理なく1問ずつ問題が出るので、初心者でも着実に学習を進めることができます。学習のペースを自分で調整しながら、確実にスキルアップが可能です。終了したい場合は「終了したい」ことをAIエージェントに伝えてみてください。あなたの学習スタイルに柔軟に対応します。
  • VTeacher AI はマルチコラボレーション対応です。先生のエージェントと本のエージェントの組み合わせにより、個別指導と自習の両方のメリットを活かしてハイレベルな教育を受けられます。個別にフィードバックを受けながら、実践的な学習ができるので、実際のプロジェクトに役立つ知識を効率よく習得できます。
  • VTeacher AI の 本の AIエージェントはサーバーコンポーネントにもReact 19にも対応しています。新しい技術をすぐにキャッチアップできるため、最新の開発環境にも適応可能です。新しいフレームワークやプログラミング手法を学びたい方にとって、常に最新の情報を手に入れることができる理想的な学習ツールです。
  • VTeacher AI は常に進化し、定期的に見直しが行われているため、安心して使用できます。最新の技術トレンドや業界の動向を反映した学習コンテンツを提供し、どんな時でも最適な学習環境を維持しています。継続的にアップデートされることで、ユーザーは時代に即した知識を身につけることができます。
  • VTeacher AIでスクラムチームを組みましょう。マイページからメンバーを招待でき、チーム学習を通じて互いに知識を共有しながら成長することができます。実際の開発現場で必要なコミュニケーション能力やチームワークを身につけることも可能です。みんなで学ぶことで、モチベーションを維持しながら効率よくスキルを伸ばせます。
  • VTeacher AI はPCやタブレットで使用できます。スマホではエディターの使用が制限されますが、履歴の確認や会話機能は利用可能です。より本格的なコーディングや開発環境を活用したい場合は、PCまたはタブレットを推奨します。デバイスに応じた最適な学習体験を提供します。
マルチなAIエージェントのコラボレーション
  • 独立した「本のAIエージェント」
    今回、AIエージェントを「先生」と「本」に分けて設計しました。例えば、OpenAI GPT-4o のLLMは「2024年6月以降の出来事については直接の知識がありません。」といった回答をしてきます。ChatGPTの場合、この時点で情報源となるWebページを探しに行きますが、本サービスではその情報源の役割をRAGによって補完し、独自の情報（当社の技術記事）を読み込ませる仕組みを導入しています。具体的には次の記事を取り込んでいます。

https://zenn.dev/rgbkids/articles/7e5b27127ee8b6

  • 協力者（エージェントの元となる人）
    指導力と授業の質が高く評価されていた、会社の先輩や勉強会のメンバーであるエンジニアの方々にご協力いただきました。AIエージェントとして彼らを再現し、知識や経験を継承した教育を提供します。ほぼ自分のコピーを作るような形になりますが、特定のエンジニアの思考や指導スタイルを反映したAI（ruleファイルなど）を作成し、それを活用して学習してもらえる仕組みです。彼らをAIエージェントとして再現 し、知識や経験を継承した教育を提供します。

使い方

  1. サービスにアクセス https://school.vteacher.biz/
  2. 先生のAIエージェントを選択（現在は4人）
  3. 技術書のAIエージェントを選択（現在はReactのみ）
  4. AIエージェントと対話しながら、実際にプログラミングを行って、学習を進める

React 講義一覧

※ サーバーコンポーネントにもReact 19にも対応しています。

  • 1: コンポーネントの作成とネスト
    コンポーネントの基本的な作成方法と、コンポーネントをネストしてUIを構築する方法
  • 2: JSXでマークアップを書く
    JSXを使用して、Reactコンポーネント内でHTMLライクなマークアップを書く方法
  • 3: スタイルの追加
    CSSやスタイルライブラリを使用してReactコンポーネントにスタイルを適用する方法
  • 4: データの表示
    Reactでデータをコンポーネントに渡し、画面に表示する方法
  • 5: 条件付きレンダー
    条件に応じて異なる要素やコンポーネントを表示する方法
  • 6: リストのレンダー
    配列データをループして複数の要素を効率的にレンダーする方法
  • 7: イベントに応答する
    ボタンのクリックや入力イベントなど、ユーザーの操作に応じて動作を実行する方法
  • 8: 画面の更新
    Reactの状態管理を使用した、画面のデータを動的に更新する方法
  • 9: フックの使用
    ReactのuseState、useEffectなどの基本的なフックの使い方
  • 10: コンポーネント間でデータを共有する
    Propsを使用した、複数のコンポーネント間でデータを共有する方法
  • 11: useState
    useStateを使用した、Reactコンポーネント内で状態を管理する方法
  • 12: useEffect
    useEffectを使用した、副作用となるデータのフェッチやイベントリスナーを処理する方法
  • 13: useReducer
    useReducerを使用した、Reducer関数やディスパッチの仕組みなど、より複雑な状態管理を行う方法
  • 14: useContext
    useContextを使用した、コンポーネント間でデータを共有する方法
  • 15: useMemo
    useMemoを使用した、計算コストの高い処理を最適化する方法
  • 16: useCallback
    useCallbackを使用した、コールバック関数をメモ化する方法
  • 17: useRef
    useRefを使用した、実DOM要素を参照管理してフォーカス操作などをする方法
  • 18: useTransition
    useTransitionを使用した、並列処理による遅延レンダリングの制御方法
  • 19: Suspense
    Suspenseを使用した、非同期データの読み込みを効率的に管理する方法
  • 20: サーバーコンポーネント
    サーバーコンポーネントを使用した、サーバーサイドでの効率的なデータ処理をする方法
  • 21: アクション (Action)
    Reactにおけるアクションの概念を理解し、ユーザー操作に応じたデータ処理や状態管理の方法
  • 22: useActionState
    useActionStateフックを使用して、アクションの状態を管理し、非同期操作を簡潔に処理する方法
  • 23: <form> アクション
    React DOMにおける<form>要素の新しいアクションの使い方と、サーバーとの通信方法
  • 24: useFormStatus
    useFormStatusフックを使用して、フォームの状態（送信中、エラーなど）を管理する方法
  • 25: useOptimistic
    useOptimisticフックを使用して、楽観的UI更新を実装し、ユーザー体験を向上させる方法
  • 26: use
    useを使用した、非同期データやリソースを効率的に処理する方法
  • 27: 新APIを組み合わせて使用
    useActionStateとuseOptimisticを併用し、楽観的UIと非同期処理をスムーズに統合する方法
  • 28: サーバーコンポーネント
    React Server Componentsを使用して、サーバーサイドでコンポーネントをレンダリングする方法
  • 29: サーバー関数
    サーバー関数を活用した、サーバーと連携しながら効率的にデータを処理する方法
  • 30: React 19 の改善点
    React 19の改善点のうち、propsとしてrefにアクセスできるようになったこと

※ React 19 については、次の記事の内容を取り込んでいます。

https://zenn.dev/rgbkids/articles/7e5b27127ee8b6

.rules の設定

生成AI側の振る舞いを登録できます（ .cursorrules のようなものです）。
.rules の設定ボタンから入力できます。

  • 例
私は次のルールを守って回答します。

### ルール
- 関西弁で回答します。
- コードにセミコロンは使用しません。

コーディング生成AI時代に求められる準備

  • 生成AIの性能は自分自身のスキルに比例しがち
    生成AIの活用は「どのように指示を出すか（プロンプトやタスクの与え方）」に大きく左右されるのが実情だと思います。あなたがReactについて不慣れであれば、求めているReactのコードを生成してもらうことは難しくなってきます。

  • ペアプロでいうところのナビゲーターになる
    ペアプロの観点で考えると、生成AIを「ドライバー」、自分を「ナビゲーター」として進めるとわかりやすいと思います。自分では思いつかなかったコードに出会えることもあります（これこそがAI活用の醍醐味だと思います）。

  • モデルとの相性を把握する
    同じ質問をしても、モデルによってその解釈は異なり、生成されるコードに違いが出ます。※詳細は下記

モデルとの相性

GPT系ですと、その特性上、質問者の意図に寄り添いながら回答を調整する傾向があります。
例えば、次のように 「拒否すべきですか？」と「拒否して良いですか？」の違いだけ がある2つのプロンプトで試してみます。

  • プロンプト 1: 「〜拒否すべきですか？」と聞く
発注先の企業がコーディング規約を提案してきましたが、拒否すべきですか？

※次のルールを絶対に守って回答してください。

###
必ずYES/NOで回答してください。
  • プロンプト 2: 「〜拒否して良いですか？」と聞く
発注先の企業がコーディング規約を提案してきましたが、拒否して良いですか？

※次のルールを絶対に守って回答してください。

###
必ずYES/NOで回答してください。
  • 結果
モデル 1: 〜拒否すべきですか？ 2: 〜拒否して良いですか？
OpenAI GPT 4o NO（＝拒否すべきではない） YES（＝拒否して良い）
Gemini 2.0 Flash NO（＝拒否すべきではない） NO（＝拒否は良くない）
Claude 3.7 Sonnet （YES/NOでの回答を避けられて、追加情報を求められる） （YES/NOでの回答を避けられて、追加情報を求められる）

同じ質問でもモデルによって解釈が異なるので、生成されるコードも変わってきます。
どのモデルをパートナーにするかは、自分との相性や好みによって選んでください。

  • GPT系: 共感力が高く、回答の矛盾は許容する ※主観
  • Gemini系: 矛盾しない、従順、ドライ ※主観
  • Claude系: プロ意識が高い、頑固、職人肌（質問者が与えたプロントを無視してでも専門知識を優先） ※主観

今後の展望

  • 本のAIエージェントを追加（React以外にも対応）
  • 先生のAIエージェントを追加（LLM）
  • 他言語対応（英語など）

最後に

すごい時代が来た

Discussion