Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
---
title: "Ignite UI CLI を使用したステップバイステップ ガイド | {ProductName} | Infragistics"
description: "Ignite UI CLI のインタラクティブ ウィザードを使用して、新しい {Platform} プロジェクトの作成、テンプレートとテーマの選択、{ProductName} コンポーネント ビューの追加を行う手順を説明します。"
keywords: "{Platform} cli, ignite ui cli, {ProductName}, スキャフォールディング, ステップバイステップ, Infragistics"
mentionedTypes: []
last_updated: "2025-04-08"
_language: ja
---
import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';

<PlatformBlock for="React, WebComponents">

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

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

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

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

```cmd
ig
```

または:

```cmd
ig new
```

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

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

### プロジェクト名の入力

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

### フレームワークの選択

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

<PlatformBlock for="React">
**React** を選択すると、{ProductName} 用に事前設定されたプロジェクトがスキャフォールディングされます。
</PlatformBlock>

<PlatformBlock for="WebComponents">
**Web Components** を選択すると、{ProductName} 用に事前設定されたプロジェクトがスキャフォールディングされます。
</PlatformBlock>

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

<PlatformBlock for="React">
プロジェクト タイプとして **Ignite UI for React TS** を選択します。
</PlatformBlock>

<PlatformBlock for="WebComponents">
プロジェクト タイプとして **Ignite UI for Web Components TS** を選択します。
</PlatformBlock>

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

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

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

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

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

### テーマの選択

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

- **default** オプションには、デフォルトの {ProductName} テーマを含む事前コンパイル済みの CSS ファイルが含まれます。
- **custom** オプションは、[テーマ API](./themes/overview.md) を使用した Sass ベースのカラー パレットとテーマ設定を生成します。

### AI ツールの設定

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

```bash
? 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 エージェントを選択します:

```bash
? 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` フラグを直接渡します:

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

使用可能なフラグ値の詳細については、[Ignite UI CLI の概要](general-cli-overview.md#ai-configuration-during-project-creation) を参照してください。

### 完了または続行

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

## ビューの追加

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

```cmd
ig add
```

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

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

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

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

```cmd
ig add [template] [name]
```

例:

```cmd
ig add grid MyGrid
```

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

## アプリケーションの実行

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

```cmd
ig start
```

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

</PlatformBlock>
Loading
Loading