React Ignite UI CLI

CLI ツールでは、Ignite UI for React の定義済みのプロジェクトテンプレートが含まれ、アプリ開発を効率的に行うことができます。 Ignite UI CLI は、さまざまなフレームワーク用のアプリケーションを作成およびスキャフォールディングするためのスタンドアロンコマンドラインツールです。

作業の開始

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

npm install -g igniteui-cli

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

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

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

ig new "[name_of_project]" --framework=[target_framework] --type=[project_type]

上記のテンプレートを使用して、TypeScript をターゲットとする「My Project」という名前の React アプリケーションを作成する場合は、次のコマンドを実行します。

ig new "My Project" --framework=react --type=igr-ts

[!Note] TypeScript のサポートは、Ignite UI CLI バージョン 13 以降で利用可能になります。

コンポーネントの追加

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

ig add

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

ig list

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

ig add [component_template] [component_name]

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

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

ig add grid MyGridComponent

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

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

ig build
ig run

Vite の使用

Ignite UI CLI によって生成された React アプリケーションは、ビルドツールとして Vite を利用します。Vite は高速な開発および本番ビルドを提供し、開発中のホットモジュール交換 (HMR) などの機能を備えた効率的な開発エクスペリエンスを提供します。

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 version	-v	ローカル (ローカルがない場合はグローバル) にインストールされた Ignite UI CLI バージョンを示します。