【AI】AIを専属教師にしてみた。Gemini GemやNotebookLMと学ぶReactモダンフロントエンド開発

1. 概要

前回はGemini 2.5 Flash Image (Nano Banana)を使って画像を生成する内容についてでした。今回はGemini GemやNotebookLMを使ってAIを学習専属講師にする内容になります。

たまに学習の仕方について相談される事があるので、記事にしてみました。

Gemini GemとNotebookLMを組み合わせる事で継続的なサポートが可能になってます。

Geminiに与える指示書(Instructions)さえもGemが作成してくれるので、とても楽ですね。

それ、どうしたら身につくの?って悩んでる方がいれば是非目を通して見て下さい。

2. Gem manager

Googleアカウントが必要です。

3. Gemの作成

3-1. 「+ New Gem」をクリック

※初期画面

3-2. 内容を入力

  • Name
    • AIを専属教師にしてみた。Gemini Gemと学ぶReactモダンフロントエンド開発
  • Instructions
下記内容を参考に素敵な指示書を作成して下さい。
・Name(タイトル)を参考にする事
・私はJava等のBackendの開発経験が3年程ある。
・Reactの公式サイト(https://react.dev/learn)の内容を必ず参考とし、最新バージョンで進める事
・まず学習期間は3ヵ月程を想定
・学習が続くので次回に進捗状況がわかるように毎回NotebookLMにサマリーする事

3-3. 指示書(Instructions)を再作成

※「Use Gemini to re-write instructions」ボタンをクリックすると、下記のようにより具体的な内容の指示書を作成してくれる。

役割と目標:

* あなたはReactモダンフロントエンド開発の専属教師です。ユーザー(Java等のバックエンド開発経験3年)がReactを習得できるようガイドします。
* Reactの公式サイト([https://react.dev/learn](https://react.dev/learn))の最新情報をベースに、プロフェッショナルな視点で指導を行います。
* 3ヵ月という学習期間を考慮し、効率的かつ体系的なカリキュラムを提供します。
* 毎回のセッション終了時に、NotebookLMに貼り付け可能な進捗サマリーを生成します。

行動指針とルール:

1) 学習プランの提示:
a) バックエンド経験を活かせるよう、コンポーネント、State、HooksなどのReact固有の概念とJava/サーバーサイドの概念の対比を交えて解説してください。
b) 3ヵ月のロードマップを提示し、現在はどのフェーズにいるかを常に意識させてください。

2) 技術的な指導:
a) 常に最新のReactバージョン(Next.jsなどの推奨フレームワークを含む)に基づいたベストプラクティスを提案してください。
b) コード例を示す際は、モダンな構文(TypeScript、関数コンポーネント、Hooks)を徹底してください。

3) 進捗管理とサマリー:
a) 学習の区切りごとに、その日の達成事項、重要な用語、次回のアクションアイテムをまとめた'NotebookLM用サマリー'を出力してください。
b) ユーザーが以前のサマリーを入力した場合は、その続きから柔軟に再開してください。

全体的なトーン:
* 励ましつつも、プロフェッショナルとして的確なアドバイスを行う教育的な口調。
* 実践的で効率重視のエンジニアらしいコミュニケーションスタイル。

4. NotebookLMと連携

AIはコンテキストと呼ばれる記憶の仕組みがあります。

  • 新しいチャットが始まると「初めまして」となる
  • 1つのチャットを長く続けると、過去の会話が記憶の許容量(コンテキストウィンドウ)を超え、初期の重要な前提条件をAIが忘れてしまう
    • 尚、過負荷やエラーでチャットが切れてしまったりする事もある

上記の理由で、Geminiの記憶領域の手助けのためにNotebookLMと連携する。

4-1. NotebookLMと連携

  1. 右下の「+」ボタンをクリックすると「NotebookLM」が出てくる
  2. 「Try NotebookLM」をクリック

4-2. NotebookLMにて

  • タイトルを入力
    • そうすると、Gem側で表示され、選択ができるようになる。

4-3. Gemにて

  1. 選択後、Add
  2. 該当のNotebookLMと連携された。

5. 学習スタート

5-1. 初回チャット

初めまして。よろしくお願いします。
初回、始めて下さい。

講習始まりました。最後にちゃんとNotebookLM用のサマリーもありますね。

5-2. NotebookLMに今回の学習サマリーを保存

  1. 「+ Add sources」
  2. 「Copied text」
  3. 「Insert」

5-3. 保存内容の確認

6. Gemの保存

※初回の学習ができたので、この内容を保存

7. 2回目の学習

次を進めて下さい。

7-1. Gem

7-2. NotebookLM

※上記「5-2」を参考

8. 3回目の学習

※新しいセッションで開始

本日もよろしくお願いします。また次を進めて下さい。

8-1. Gem

8-2. NotebookLM

※上記「5-2」を参考

ちゃんと前回内容の続きで学習を進めてくれてますね。素晴らしい!

9. 備考

今回はGemini GemやNotebookLMを使ってAIを学習専属講師にする内容でした。

振り替えてみると前回から半年が経ってました。びっくり!また少しずつ再開しようと思いますので、よろしくお願いします。

10. 参考

投稿者プロフィール

Sondon
開発好きなシステムエンジニアです。
卓球にハマってます。

関連記事

  1. 【WPF|Gemini CLI】読書日記アプリの開発

  2. 【Gemini CLI】Windowsアプリ開発における共通ルールの検…

  3. RAG改良手法の学習

最近の記事

制作実績一覧

  1. Checkeys