Web Components Ignite UI CLI

CLI ツールでは、Ignite UI for Web Components の定義済みのプロジェクトテンプレートが含まれ、アプリ開発を効率的に行うことができます。

is a stand-alone command-line tool for creating and scaffolding your applications for a variety of different frameworks and provides a substantial productivity boost for developers.

作業の開始

まずは CLI をインストールします。

npm install -g igniteui-cli

上記のインストールコマンドは、Ignite UI CLI を Ignite UI for Web Components アプリケーションの作成、スキャフォールディング、および実行に使用できるようにします。

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

Ignite UI CLI を使用して、Ignite UI for Web Components コントロールを使用するように構成されたアプリケーションを作成するには、コマンドラインで次のテンプレートを使用できます。

Web Components プロジェクトを非対話的に作成するには、フレームワークとして webcomponents、プロジェクトタイプとして igc-ts を指定します。

ig new <project-name> --framework=webcomponents --type=igc-ts --template=side-nav

Web Components で使用できる基本プロジェクトテンプレートは次のとおりです。

テンプレート ID	説明
empty	事前定義されたビューのない最小プロジェクト構造。このテンプレートでは認証は使用できません。
side-nav	サイドナビゲーションドロワーを備えたプロジェクト構造。認証をアドオンとして追加できます (以下を参照)。
side-nav-mini	コンパクトなサイドナビゲーションドロワーを備えたプロジェクト構造。認証をアドオンとして追加できます (以下を参照)。

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

テンプレート ID	説明
side-nav-auth	認証機能付きのサイドナビゲーション。
side-nav-mini-auth	認証機能付きのサイドナビゲーションミニ。

コンポーネントの追加

プロジェクトの作成後は、いつでも ig add を使用してコンポーネントテンプレートを追加することができます。パラメーターを指定せずにこのコマンドを実行した場合、キーボードナビゲーション CLI を使用して、選択したコントロールを追加することにより、使用可能なテンプレートが示されます。

ig add

または、単に ig list コマンドを実行して、現在のプロジェクトでサポートされているテンプレートの完全なリストを取得することもできます。

ig list

ig list を実行し、追加したいコンポーネントテンプレートを見つけた後、コマンドラインでこのテンプレートを実行することにより、すばやく追加することができます。

ig add [component_template] [component_name]

上記の「component_template」は通常、Ignite UI for Web Components コンポーネント (grid、category-chart、linear-gauge など) と一致します。

たとえば、「MyGridComponent」という名前のデータグリッドテンプレートコンポーネントをアプリに追加する場合は、次のコマンドを実行します。

ig add grid MyGridComponent

ルーティングファイルは、新しいコンポーネントを含むページへのパス (この場合は /my-grid-component) で更新されます。これを使用して、新しく生成されたページに手動で移動できます。

現在、CLI は次の Web コンポーネントで使用できます。

名前	コンポーネントテンプレート
アコーディオン	accordion
アバター	avatar
バッジ	badge
バナー	banner
ボタン	button
ボタングループ	button-group
カレンダー	calendar
カード	card
チェックボックス	checkbox
チップ	chip
円形プログレス	circular-progress
日付ピッカー	date-picker
日時入力	date-time-input
区切り線	divider
ドックマネージャー	dock-manager
ドロップダウン	dropdown
展開パネル	expansion-panel
ファイナンシャルチャート	financial-chart
フォーム	form
グリッド	grid
アイコン	icon
アイコンボタン	icon-button
入力	input
リニアゲージ	linear-gauge
リニアプログレス	linear-progress
リスト	list
ナビゲーションバー	navbar
円チャート	pie-chart
ラジアルゲージ	radial-gauge
ラジオグループ	radio-group
レーティング	rating
リップル	ripple
スライダー	slider
スイッチ	switch
タブ	tabs
テキストエリア	text-area
ツリー	tree

アプリをビルドして実行する

Ignite UI for Web Components アプリをビルドして実行するには、ig build コマンドと ig run コマンドを呼び出します。

ig build
ig run

Ignite UI CLI コマンド

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

コマンド	エイリアス	説明
ig start		アプリケーションをビルドしてウェブサーバーを開始、次にアプリケーションをデフォルトブラウザーで開きます。
ig build		アプリケーションをアプトプットディレクトリへビルドします。
ig generate	g	サポートされるフレームワークおよびプロジェクトタイプのための新しいカスタムテンプレートを生成します。
ig help	-h	使用可能なコマンドをリストして手順の簡単な説明を示します。
ig config		Ignite UI CLI 構成設定の読み取り / 書き込み操作を実行します。
ig doc		検索した用語についてインフラジスティックスのサポート情報を検索します。
ig list	l	指定したフレームワークとタイプのすべてのテンプレートをリストします。プロジェクトフォルダー内でコマンド実行時にプロジェクトのフレームワークとタイプのテンプレートをすべてリストします。
ig test		現在のプロジェクトのテストを実行します。
ig upgrade-packages		プロジェクトの Ignite UI パッケージをトライアルからライセンス版にアップグレードします。
ig mcp		AI コーディングアシスタントを Ignite UI for Web Components コンポーネントドキュメントに接続するための組み込み MCP サーバーを起動します。
ig ai-config		MCP サーバーを構成し、エージェントスキルファイルを各エージェントのスキルディレクトリにコピーします。`--assistants` および `--agents` フラグまたはインタラクティブモードをサポートします。
ig version	-v	ローカル (ローカルがない場合はグローバル) にインストールされた Ignite UI CLI バージョンを示します。