Angular AIチューターは、完全でモダンなAngularアプリケーションをゼロから構築する手順を、対話形式でステップバイステップにガイドします。レシピを作成・管理するための**「Smart Recipe Box」**という、実際に動く具体的なプロジェクトを構築することで、最新のパターンとベストプラクティスを学びます。
私たちの目標は、批判的思考を育み、学んだことの定着を助けることです。チューターは単にコードを与えるのではなく、コンセプトを説明し、例を示し、そして自力で解決するためのプロジェクト固有の演習問題を与えます。
はじめに
Angular MCP server経由でAIチューターにアクセスできます。
- Angular MCPサーバーをインストールします
- 新しいAngularプロジェクト
ng new <project-name>を作成します - Gemini CLIのようなAI搭載のエディターやツールで、新しいプロジェクト(
cd <project-name>)に移動します launch the Angular AI tutorのようなプロンプトを入力します
AIチューターの使い方
各モジュールは、簡単な概念の説明から始まります。
該当する場合、チューターは概念を実証するためにコード例を提示します。
また、チューターはあなたの理解度を試すための自由回答の演習も提供します。
最後に、次のモジュールに進む前に、チューターがあなたの作業内容をチェックします。
仕組み: 学習サイクル
新しいトピックごとに、学んだことをよりよく定着させるために、クリティカルシンキングを重視した学習ループに従います。
- コンセプトを学ぶ: チューターがAngularのコア機能を簡潔に説明し、それを説明するための汎用的なコード例を示します。
- 知識を応用する: すぐにハンズオン演習が与えられます。チューターは、目的と期待される結果とともに、これらの演習を高いレベルで提示し、自分で解決策を考え抜くことを促します。
- フィードバックとサポートを得る: 準備ができたら、チューターに知らせてください。チューターは自動的にプロジェクトファイルを読み込み、あなたのソリューションが正しいか検証します。行き詰まった場合でも、完全にコントロールできます。より詳しいガイダンスを求めるために**「hint」を要求したり、「detailed guide」または「step-by-step instructions」**と入力してステップバイステップの説明を得ることができます。
成功すると、チューターはすぐに次のトピックに進みます。また、いつでもトピックに関する詳細情報をチューターに尋ねたり、関連するAngularの質問をしたりできます。
機能とコマンド
学習体験はあなた自身でコントロールできます。これらの機能はいつでも利用可能です:
中断と再開
自由に休憩を取ってください。進捗はプロジェクトのコードに紐づいています。新しいセッションのために戻ってくると、チューターが自動的にファイルを分析して中断した場所を正確に特定し、そこからシームレスに再開できます。
Pro Tip: 進捗を保存するためにGitを使用することを強くお勧めします。モジュールを完了した後、変更をコミットすることをお勧めします（例: git commit -m "Complete Phase 1, Module 8"）。これは、いつでも戻ることができる個人的なチェックポイントとして機能します。
経験レベルの調整
経験レベルを初心者 (1-3)、中級者 (4-7)、または**経験者 (8-10)**に設定できます。この設定はセッション中にいつでも変更でき、チューターはすぐに指導スタイルをそれに合わせて調整します。
プロンプトの例:
- "経験レベルを初心者に設定してください。"
- "評価を8に変更してください。"
学習プラン全体を見る
全体像を見たり、どこまで進んだかを確認したい場合は、目次をリクエストしてください。
プロンプトの例:
- "今どこにいますか？"
- "目次を表示してください。"
- "プランを表示してください。"
チューターが学習プラン全体を表示し、現在地を示します。
スタイリングに関する注意
チューターは、アプリケーションに基本的なスタイリングを適用して、見た目をきれいに保ちます。独自のスタイリングを適用して、アプリケーションを自分だけのものにすることを強くお勧めします。
現在のモジュールをスキップする
学習パスの次のトピックに進みたい場合は、チューターに現在の演習をスキップするように依頼できます。
プロンプトの例:
- "このセクションをスキップしてください。"
- "このステップを自動補完してください。"
チューターが確認を求めます。その後、現在のモジュールの完全なコードソリューションを提示し、次のモジュールにスムーズに進めるように必要な更新を自動的に適用しようとします。
任意のトピックにジャンプする
特定のトピックについて順序を無視して学習したい場合（例: 基本からフォームへジャンプする）、それも可能です。チューターは、選択したモジュールの正しい開始点にプロジェクトを更新するために必要なコードを提供し、必要な更新を自動的に適用しようと試みます。
プロンプトの例:
- "フォームのレッスンに連れて行ってください。"
- "今すぐRoute Guardsについて学びたいです。"
- "Serviceに関するセクションにジャンプしてください。"
トラブルシューティング
チューターが正しく応答しない場合や、アプリケーションに問題があると思われる場合は、以下のことを試してみてください:
- "proceed"と入力する: これにより、チューターがスタックした場合に次のステップに進むよう促すことができます。
- チューターを訂正する: チューターがあなたの進捗状況を誤解している場合(例: Module 8を完了しているのにModule 3にいると言われた場合)、それを伝えてください。例: 「実際にはModule 8にいます。」 チューターはあなたのコードを再評価し、調整します。
- UIを確認する: アプリケーションのユーザーインターフェースがどのように見えるべきかを確認したい場合は、チューターに尋ねてください。例: 「UIには何が表示されるべきですか？」
- ブラウザウィンドウをリロードする: リフレッシュすることで、アプリケーションに関連する多くの問題を解決できます。
- ブラウザをハードリスタートする: エラーはブラウザの開発者コンソールにしか表示されないことがあります。ハードリスタートは、アプリケーションに関連する根本的な問題を解消するのに役立ちます。
- 新しいチャットを開始する: いつでも新しいチャットを開始して、既存の履歴を削除し、新たに始めることができます。チューターはあなたのファイルを読み込み、あなたがいた最新のステップを見つけ出します。
学習の道のり：段階的なパス
4つのフェーズにわたる道のりでアプリケーションを構築します。このパスを最初から最後までたどることで、完全で機能的なAngularアプリケーションを作成できます。各モジュールは前のモジュールの上に論理的に構築されており、基礎から高度で実践的な機能へと導きます。
自動セットアップに関する注意： 一部のモジュールでは、インターフェースやモックデータの作成など、セットアップ手順が必要です。これらの場合、チューターがコードとファイルの手順を提示します。演習が始まる前に、指示に従ってこれらのファイルを作成・修正する責任があります。
フェーズ1：Angularの基礎
- モジュール1： はじめに
- モジュール2： 補間による動的テキスト
- モジュール3： イベントリスナー (
(click))
フェーズ2：状態とシグナル
- モジュール4： 書き込み可能なシグナルによる状態管理（パート1：
set） - モジュール5： 書き込み可能なシグナルによる状態管理（パート2：
update） - モジュール6： Computedシグナル
フェーズ3：コンポーネントアーキテクチャ
- モジュール7： テンプレートバインディング（プロパティと属性）
- モジュール8： コンポーネントの作成とネスト
- モジュール9： シグナルによるコンポーネント入力
- モジュール10： コンポーネントのスタイリング
- モジュール11：
@forによるリストレンダリング - モジュール12：
@ifによる条件付きレンダリング
フェーズ4：高度な機能とアーキテクチャ
- モジュール13： 双方向バインディング
- モジュール14： サービスと依存性の注入（DI）
- モジュール15： 基本的なルーティング
- モジュール16： フォーム入門
- モジュール17： Angular Material入門
AIとフィードバックに関する注意点
このチューターは大規模言語モデル (LLM) を利用しています。エキスパートになるよう努力してきましたが、AIは間違いを犯すことがあります。もし不正確だと思われる説明やコード例に遭遇した場合は、お知らせください。チューターを訂正でき、そのフィードバックを元に応答を調整します。
技術的なバグや機能リクエストについては、issueを報告してください。