Ignite UI CLI を使用したステップ バイ ステップ ガイド

利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に Ignite UI CLI で以前作成したプロジェクトを更新できます。

Ignite UI CLI を使用してガイドを開始するには、ig コマンドを実行します。

ig

または

ig new

これにより、ステップバイステップ モードがアクティブになり、新しいプロジェクトの作成に役立つ一連の質問が表示されます。

新しいプロジェクトの作成

最初に、アプリケーションの名前を入力します。

フレームワークとして Angular を選択すると、生成するプロジェクトのタイプを選択するように求められます。

次に、利用可能なプロジェクト テンプレートのいずれかを選択します。3 つのベース テンプレートが利用可能です: Empty Project、Side Navigation、Side Navigation Mini。矢印キーを使用して使用可能なオプションをナビゲートし、ENTER を押して選択を確認します。

Side Navigation または Side Navigation Mini を選択した場合、ウィザードはプロジェクトに認証モジュールを追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (side-nav-auth または side-nav-mini-auth) が生成されます。Empty Project を選択した場合、認証のプロンプトはスキップされます。

次のステップでは、アプリケーションのテーマを選択します。デフォルトのオプションを選択すると、Ignite UI for Angular のデフォルト テーマの Ignite UI がプリコンパイルされた CSS ファイル (igniteui-angular.css) がプロジェクトの angular.json に含まれます。カスタムオプションは、app/styles.scss の Theming API を使用して、カラーパレットとテーマのコードを生成します。

上記の手順を完了すると、アプリケーション構造が生成されます。次に、AI コーディング アシスタントの設定を求めるプロンプトが表示されます。AI の設定が完了すると、git リポジトリが初期化され、プロジェクトがコミットされます。次に、プロセスを完了するか、アプリケーションに新しいビューを追加するかのプロンプトが表示されます。

ビューの追加

Ignite UI CLI は、プロジェクトに追加できる複数のコンポーネント テンプレート、およびより詳細なシナリオ テンプレートをサポートしています。このモードは、プロジェクトの作成が完了した後、または以下のコマンドを使用して既存のプロジェクト内でアクティブにできます。

Ignite UI CLI を使用する場合、add コマンドを実行します。

ig add

新しいコントロールを追加することを選択した場合、カテゴリにグループ化された使用可能なテンプレートのリストが提供されます。

矢印キーを使用してオプションをナビゲートし、ENTER を使用して選択したオプションを選択します。

たとえば、カスタムグリッドなどの一部のテンプレートでは、有効にできるオプションのリストが提供されます。オプションは、スペース キーで切り替えることができます。

アプリケーションにシナリオを追加することを選択した場合、使用可能なシナリオ テンプレートのリストも取得できます。

アプリケーションにテンプレートを追加した後、プロセスを完了するかコントロールの追加を続行するかどうかを選択します。プロセスの完了を選択すると、必要なパッケージが (プロジェクト作成時に) インストールされ、アプリケーションがデフォルトのブラウザーで開かれます。

ウィザードを使用せずに後から Ignite UI for Angular ビューをプロジェクトに追加するには、直接 add コマンドを使用します。

ig add [template] [name]

AI コーディング アシスタントの設定

フレームワーク、プロジェクト タイプ、テンプレート、テーマを選択した後、ウィザードは AI コーディング アシスタント統合の設定を求めるプロンプトを表示します。このステップは ig ai-config と同じロジックを実行しますが、プロジェクト作成フローに組み込まれています。

コーディング アシスタントの選択

MCP サーバーを設定するコーディング アシスタントを選択するように求められます。スペース キーで選択を切り替え、ENTER で確認します。

• Generic (Claude Code、VS Code など) - .mcp.json に書き込み
• VS Code (GitHub Copilot) - .vscode/mcp.json に書き込み
• Cursor - .cursor/mcp.json に書き込み
• Gemini - .gemini/settings.json に書き込み
• JetBrains Junie - .junie/mcp/mcp.json に書き込み
• None - MCP 設定をスキップ

デフォルトの選択は Generic です。None を選択すると、MCP サーバーの設定が完全にスキップされます。

AI エージェントの選択

次に、スキル ファイルと手順を設定する AI エージェントを選択するように求められます。

• Generic - .agents/skills/ および AGENTS.md
• Claude - .claude/skills/ および .claude/CLAUDE.md
• Copilot - .github/skills/ および .github/copilot-instructions.md
• Cursor - .cursor/skills/ および .cursor/rules/cursor.mdc
• Codex - .codex/skills/ および .codex/instructions.md
• Windsurf - .windsurf/skills/ および .windsurf/rules/guidelines.md
• Gemini - .gemini/skills/ および .gemini/GEMINI.md
• Junie - .junie/skills/ および .junie/guidelines.md
• None - スキル ファイルと手順をスキップ

デフォルトの選択は Generic と Claude です。None を選択すると、エージェントの設定が完全にスキップされます。