Ignite UI CLI を使用した作業の開始

Ignite UI CLI はスタンドアロンのグローバル コマンドライン ツールで、Ignite UI コンポーネント用に事前設定された Angular、React、jQuery プロジェクトをスキャフォールドします。ガイド付きウィザードによる初回セットアップ、スクリプト ワークフロー用の非インタラクティブな new および add コマンド、開発サーバー、そして AI コーディング アシスタントをリアルタイムの Ignite UI ドキュメントに接続するための組み込み MCP サーバーを提供します。

Ignite UI CLI は Angular CLI の代替ではなく、並行して機能します。Ignite UI CLI で作成されたプロジェクトは標準の Angular ワークスペースであり、スキャフォールド後に ng コマンドと完全に互換性があります。

Ignite UI CLI のインストール

npm を使用してグローバルにインストールします:

npm install -g igniteui-cli 

または、yarn を使用する場合:

yarn global add igniteui-cli

インストールを確認します:

ig version

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

Ignite UI CLI にはプロジェクト作成のために 2 つのモードがあります: ガイド付きインタラクティブ ウィザードと引数を指定した直接コマンドです。

ガイドを使用する

ガイド付きウィザードは新しいプロジェクトの出発点として推奨されています。プロジェクト タイプ、名前、テンプレート、テーマの選択をガイドし、プロジェクトを自動的にスキャフォールドしてコミットします。

ウィザードをアクティブにするには:

ig

または:

ig new

最初の Ignite UI CLI アプリを作成

ウィザード オプションのステップ バイ ステップ ガイドについては、Ignite UI CLI を使用したステップ バイ ステップ ガイドを参照してください。

直接プロジェクトを作成する

Angular プロジェクトを非インタラクティブに作成するには、フレームワークとして angular、プロジェクト タイプとして igx-ts を指定します。

ig new my-app --framework=angular --type=igx-ts --template=side-nav

プロジェクト作成時に AI アシスタントとエージェントの設定を指定することもできます。

ig new my-app --framework=angular --type=igx-ts --template=side-nav --assistants generic --agents claude copilot

AI 設定を完全にスキップするには:

ig new my-app --framework=angular --type=igx-ts --assistants none --agents none

ig new 実行時の順序:

1. プロジェクト ファイルが生成されます
2. AI 設定が新しいプロジェクト ディレクトリ内で実行されます (フラグが指定されていない場合はアシスタントとエージェントのプロンプトが表示されます)
3. Git が初期化されます (--skip-git を指定しない場合)
4. 依存関係がインストールされます (--skip-install を指定しない場合)

新しいアプリケーションがプロジェクト名のディレクトリに作成されます (newAngularProject)。Ignite UI for Angular アプリケーションを作成するときに選択できるベース プロジェクト テンプレートは次のとおりです。

インタラクティブ ウィザードで side-nav または side-nav-mini を選択すると、認証を追加するかどうかを確認するプロンプトが表示されます。次のテンプレート ID が生成され、非インタラクティブな作成用に ig new に直接渡すこともできます。これらの ID はウィザードのテンプレート リストには表示されません。

プロジェクトを作成する際に以下の引数を指定できます。

コンポーネント テンプレートの追加

利用可能な Ignite UI Angular テンプレートを追加するには、新しいコンポーネントのテンプレート ID と名前を指定します。

ig add [template] [name] コマンドを使用します。

ig add grid newGrid

すべての利用可能なテンプレートのリストを取得するには、プロジェクトディレクトリで ig list コマンドを実行することもできます。

テンプレートの追加は、Ignite UI CLI、Angular Schematics で作成されたプロジェクト、または ng add で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、Ignite UI CLI を使用したステップ バイ ステップ ガイドを参照してください。

テンプレートを追加する際に以下の引数を指定できます。

アプリケーションの実行

start コマンドはアプリケーションがビルドされ、Web サーバーが起動してデフォルトのブラウザーで開きます。

ig start

AI アシスタント統合 (MCP)

Ignite UI CLI には、AI コーディング アシスタント (GitHub Copilot、Claude、Cursor など) を最新の Ignite UI コンポーネント ドキュメントおよび API リファレンスに接続する組み込みの MCP (Model Context Protocol) サーバーが含まれています。設定後、AI アシスタントはコンポーネント API を照会したり、セットアップ ガイドを取得したり、コンテキストを切り替えずに正確な Ignite UI for Angular コードを生成したりできます。

ig new でプロジェクトを作成した場合、スキャフォールディング時に MCP 設定と Agent Skills が生成されます。既存のプロジェクトで作業している場合は、プロジェクト ルートから ig ai-config を実行して MCP サーバー、スキル ファイル、手順ファイルを一括セットアップしてください。

ig ai-config

このコマンドは複数のコーディング アシスタントと AI エージェントをサポートしています。

ig ai-config --assistants generic vscode --agents claude copilot

フラグを指定せずに実行すると、ig ai-config はインタラクティブ モードに入り、スペース キーで切り替え ENTER で確認しながらコーディング アシスタントとエージェントを選択するプロンプトを表示します。このプロンプトは ig new 実行時のウィザードのステップと同じです。

1. コーディング アシスタントの選択 - MCP サーバー設定の対象を 1 つ以上選択 (Generic、VS Code、Cursor、Gemini、Junie)、またはスキップするには None。
2. AI エージェントの選択 - スキル ファイルと手順ファイルのエージェントを 1 つ以上選択 (Generic、Claude、Copilot、Cursor、Codex、Windsurf、Gemini、Junie)、またはスキップするには None。

インタラクティブ モードのデフォルトは、アシスタントは Generic、エージェントは Generic + Claude です。ウィザードのプロンプトの詳細については、Ignite UI CLI を使用したステップ バイ ステップ ガイド - AI コーディング アシスタントの設定を参照してください。

AI クライアントを手動で設定する場合、または VS Code 以外のクライアントを使用する場合は、以下のコマンドで MCP サーバーを直接起動してください。

ig mcp

クライアント設定 (VS Code、Claude Desktop、Cursor など) および利用可能なツールの詳細については、Ignite UI CLI MCP を参照してください。

Ignite UI CLI コマンド

使用可能な Ignite UI CLI コマンドとその使用方法 (フラグを渡すなど) の完全なリストは、Ignite UI CLI wiki にあります。