📚

Angular ai-tutor: AI が先生となって進めるインタラクティブなチュートリアル体験

に公開
Angular
Gemini
idea

こんにちは、Naoya です。

今週水曜 (2025年12月10日) に、GDG Tokyo と Angular 日本ユーザー会 共催で「Angular 入門ハンズオン ~ Learn with AI ~ GDG DevFest Tokyo 2025 Extended」を行います。運営スタッフとして予習したのですが、AI が先生となってチュートリアルを進めていく体験がとても面白かったので、事前に感想をまとめておきます。

ちなみに私は機械学習系が専門で、フロントエンド開発や TypeScript は初心者レベルで、およそ10年ぶりに Angular を書きました。Angular の思想を学ぶことも面白いのですが、個人的には 生成AI アプリケーションとしての UX 設計と、それを実現している技術に非常に興味を持ちました。Angular の開発予定がなくても、生成AI アプリケーションを開発している方であれば、非常におすすめのコンテンツです。

ai-tutor とは？

https://github.com/angular/ai-tutor/

モダンで本格的な Angular アプリケーションをゼロから構築するチュートリアルです。Angular v20 の基礎的な機能や最新パターンを、全 17 モジュール構成で「Smart Recipe Box」を開発しながら学習していきます。

ただしこのチュートリアルの面白いところは、AI が先生 (= チューター) として、ステップバイステップで進行し、フィードバックをもらえる点です。通常のチュートリアルであれば、チュートリアルサイトとエディタを横に並べて、まず(1)説明を読み、(2)サンプルコードを写経し、(3)実行するという流れで進行することが多いです。ai-tutor の場合は、学習者のレベルと現在のコードベースに合わせて、AI (= Gemini) が解説や課題の提示をしてくれるだけでなく、作業結果の確認まで行ってくれます。解説から実行まで、全てを Firebase Studio というブラウザ上の IDE で完結できるため、環境構築の手間が省ける点も大きな魅力です。即時にフィードバックやアドバイスが得られる体験と相まって、学習へのハードルが下がっていると感じました。

ai-tutor-firebase-studio.png
ai-tutor を完遂した Firebase Studio

実行方法[1]

  1. angular/ai-tutor を開く
  2. README の先頭にある「Try in Firebase Studio」をクリックし、Firebase Studio で ai-tutor のリポジトリを読み込みます。
  3. チャットパネルに「Hello」と入力。日本語で進める場合は、「日本語で始める。」と入力。
  4. 学習者の Angular 開発経験を10段階で聞かれるので、それに答えます。

あとは Gemini がファシリテーションしてくれるので、説明を読みながら課題を順番に進めていきます。基本的には、次のサイクル[2]で進みます。

  1. Learn the Concept (解説): AI による学習事項の解説 (Smart Recipe Box ではないサンプルコード付き)
  2. Apply Your Knowledge (プロジェクト演習): 演習課題 (目的) と Acceptance Criteria (期待される結果) が提示されますので、その指示に合致するように実装をします。
  3. 実装内容の確認: AI が自動で実装内容を確認し、フィードバックをくれます。実装完了したことが確認できれば、次のモジュールに進みます。

ai-tutor の面白い点

ここで学べる Angular の思想も面白いのですが、ここでは 生成AI アプリケーション開発者の視点で、このチュートリアルの面白い点を列挙していこうと思います。

学習者のスキルレベルへの適合

対象者のレベルに応じて教材が用意されている場合もありますが、現在の自分のレベルと教材のレベルが合わないと、学習の離脱につながることがあります。チュートリアルの最初に、学習者の Angular 開発経験を10段階で聞かれます。この回答に応じて、コンセプト解説やヒントの内容を調整してくれるようです。

各スキルレベルに対するインストラクションは、ai-tutor/.idx/airules.md に記載されているようです。初心者 (1〜3) であれば、専門用語を含めて丁寧な説明 ("Explain everything from scratch") や、演習でより直接的なヒントを提供するよう指示されています。一方で、熟練のエキスパートレベル (8〜10) の場合は、演習は最小限の指示にとどめ、代替的な手段なども議論するよう指示 ( "Offer to review their solution or discuss alternative approaches." ) されています。

ai-tutor-user-experience-level
"Adapting to User Experience Level"[3]

実装結果へのフィードバック

普通のチュートリアルでは、機能が動くかどうかでしか結果を判断できませんでした。しかし、ai-tutor の場合は、実装の方法までチェックしてフィードバックをくれます。さらに、消し忘れている変数など、課題の評価だけにとどまらないフィードバック ("ちょっとしたコード整理（オプション）") を提供してくれました。必須ではないですが、今までのチュートリアルにはない体験だと思いました。

また、フィードバックも自分の書いたコードや変数名を引用しているので、わかりやすかったです。

ai-tutor-feedback.png

その場で質問したり、ヒントをもらえる

演習や解説でわからないことがあれば、その場で AI に聞くことができます。Angular の思想を学ぶという本題から逸れた質問でもすぐに答えが得られることで、脇道に逸れずに重要な項目にフォーカスを置き続けられました。

私の場合、配列のフィルタリング方法など、基礎的な TypeScript の文法がわからなかったため、以下のような形で質問しました。すると、直接的なヒントではなく、一般的なサンプルを示してくれました。おそらく、最初に申告したレベルによってこの返答は変わるのではないかと思います。

ai-tutor-list-filter.png

最後までチュートリアルから脱線しない

ai-tutor は、全 17 モジュールある長いチュートリアルです。途中、エラーのデバッグや、TypeScript の基礎的な質問をしても、すぐにチュートリアルのフローに戻って、破綻なく最後まで進むことができました。これだけ長いと、どこかで脱線して全く違う方向に向かってもおかしくないと思います。内部のタスク管理などをどうしているのか、深掘りしてみたいです。

まとめ

Angular のコンセプトもしっかり学べますが、AI 活用の例として非常にクオリティが高いサンプルだと感じました。この ai-tutor を実現する技術スタックや tips も調べてみたいと思います。

宣伝

この ai-tutor について、Google Developer Expert (GDE) for Angular の @laco2net さんを講師に迎えるイベント「Angular 入門ハンズオン ~ Learn with AI ~ GDG DevFest Tokyo 2025 Extended」が、12月10日に開催予定です。Angular に興味がある方はもちろん、Google の最新の AI 開発ツールを体験したい方や、生成AI アプリケーションの UX を体感したい方にもおすすめのイベントです。興味を持っていただいた方は、ぜひ一緒に新しいチュートリアルを体験しましょう。参加申し込みは12月7日まです！

https://gdg-tokyo.connpass.com/event/376613/

脚注

  1. https://github.com/angular/ai-tutor?tab=readme-ov-file#️-getting-started ↩︎

  2. https://github.com/angular/ai-tutor?tab=readme-ov-file#-how-it-works-the-learning-cycle ↩︎

  3. https://github.com/angular/ai-tutor/blob/main/.idx/airules.md#-adapting-to-user-experience-level ↩︎

Discussion