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

Ignite UI CLI のステップバイステップモードは、Ignite UI for React プロジェクトのプロジェクト作成、テンプレートの選択、テーマ設定、コンポーネントビューの追加をガイドするインタラクティブウィザードです。非インタラクティブな ig new および ig add コマンドと同じ操作をカバーしますが、すべての引数を事前に指定する必要はなく、各ステップでプロンプトが表示されます。

ステップバイステップモードは、スクリプトや非インタラクティブな使用をサポートしていません。その場合は、明示的な引数を指定して ig new および ig add コマンドを使用してください。ウィザードは Inquirer.js を使用しています。互換性については、サポートされているターミナルを参照してください。完全な CLI リファレンスについては、Ignite UI CLI の概要を参照してください。

ウィザードを起動するには、以下を実行します:

ig

または:

ig new

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

ウィザードでは、プロジェクトの命名、フレームワークとタイプの選択、テンプレートの選択、テーマ設定の順に進みます。各ステップではオプションがインタラクティブなリストとして表示されます。矢印キーで移動し、ENTER で確定します。

プロジェクト名の入力

最初に、アプリケーションの名前を入力するよう求められます。プロジェクトは同じ名前のディレクトリ内に作成されます。

フレームワークの選択

矢印キーでオプションを移動し、ENTER を押して確定します:

React を選択すると、Ignite UI for React 用に事前設定されたプロジェクトがスキャフォールディングされます。

プロジェクトタイプの選択

プロジェクトタイプとして Ignite UI for React TS を選択します。

プロジェクトテンプレートの選択

利用可能なプロジェクトテンプレートから選択します。矢印キーでオプションを移動し、ENTER を押して確定します:

テンプレート	説明
Empty	定義済みビューのない最小限のプロジェクト構造。このテンプレートでは認証は使用できません。
Side Navigation	サイドナビゲーションドロワーを持つプロジェクト構造
Side Navigation Mini	コンパクトなサイドナビゲーションドロワーを持つプロジェクト構造

Side Navigation または Side Navigation Mini を選択した場合、プロジェクトに認証を追加するかどうかを尋ねる追加ステップが表示されます。はいと答えると、対応する認証バリアント（side-nav-auth または side-nav-mini-auth）が生成されます。Empty を選択した場合、認証プロンプトはスキップされます。

テーマの選択

アプリケーションのテーマを選択します:

default オプションには、デフォルトの Ignite UI for React テーマを含む事前コンパイル済みの CSS ファイルが含まれます。
custom オプションは、テーマ API を使用した Sass ベースのカラーパレットとテーマ設定を生成します。

AI ツールの設定

テーマ設定後、ウィザードで AI コーディングアシスタントを設定するよう求められます。まず、MCP サーバー設定を受け取るアシスタントを選択します:

? Which AI coding assistants do you want to configure MCP servers for? (Press <space> to select)
❯◉ VS Code (GitHub Copilot)
 ◉ Cursor
 ◯ Generic (.mcp.json)
 ◯ Gemini CLI
 ◯ JetBrains (AI Assistant)
 ◯ None

次に、スキルファイルを受け取る AI エージェントを選択します:

? Which AI agents should receive skill files? (Press <space> to select)
❯◉ GitHub Copilot (.agents/skills/)
 ◉ Claude (.claude/skills/)
 ◉ Cursor (.cursor/rules/)
 ◯ Codex (.codex/)
 ◯ Windsurf (.windsurfrules)
 ◯ Gemini CLI (.gemini/)
 ◯ JetBrains Junie (.junie/guidelines/)
 ◯ None

矢印キーでオプションを移動し、SPACE で選択を切り替え、ENTER で確定します。両方に None を選択すると、AI 設定を完全にスキップします。

非インタラクティブモードでこれらのプロンプトをバイパスするには、ig new に --assistants および --agents フラグを直接渡します:

ig new my-app --framework=react --type=igr-ts --template=side-nav --assistants vscode --agents copilot claude

使用可能なフラグ値の詳細については、Ignite UI CLI の概要を参照してください。

完了または続行

上記の手順を完了すると、プロジェクト構造が生成され、Git リポジトリが初期化され、プロジェクトがコミットされます。その後、プロセスを完了するか、アプリケーションに新しいビューを追加するかを尋ねられます。

ビューの追加

Ignite UI CLI は、既存のプロジェクトに追加できる複数のコンポーネントテンプレートをサポートしています。このモードは、プロジェクト作成の継続として、または以下を使用して既存のプロジェクト内で利用できます:

ig add

カテゴリ別にグループ化された利用可能なコンポーネントテンプレートの一覧が表示されます。矢印キーでグループを移動し、ENTER で選択します。Custom Grid などの一部のテンプレートでは、選択を確定する前に SPACE キーでオンまたはオフにできるオプション機能の一覧が表示されます。

グループを選択した後、一覧から特定のテンプレートを選択し、新しいコンポーネントの名前を入力します。シナリオテンプレートを追加する場合は、利用可能なシナリオテンプレートの一覧も表示されます。

テンプレートを追加した後、さらにビューを追加するか、プロセスを完了するかを尋ねられます。完了すると、残りのパッケージ依存関係がインストールされ、アプリケーションがビルドされてデフォルトブラウザーで開かれます。

後でウィザードを使用せずにプロジェクトにビューを追加するには、直接 add コマンドを使用します:

ig add [template] [name]

例:

ig add grid MyGrid

ルーティングファイルが新しく生成されたページへのパスで更新されます。たとえば、MyGrid という名前のコンポーネントは /my-grid でナビゲートできます。

アプリケーションの実行

プロジェクトが完成したら、いつでも以下を使用して実行できます:

ig start

これにより、プロジェクトがビルドされ、ローカル Web サーバーが起動し、デフォルトブラウザーでアプリケーションが開かれます。

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