Ignite UI for React パッケージの概要

Ignite UI for React は、React 向けの UI コンポーネント、デザインツールキット、関連サービスを包括的に提供するスイートです。デスクトップブラウザー、モバイル環境、PWA (Progressive Web App) など、あらゆる React アプリケーションでモダンかつ高パフォーマンスな開発を実現できるよう、開発者を強力にサポートします。

チャート & グラフ

Ignite UI for React には、チャートとグラフのライブラリが含まれており、65 種類以上のシチャートリーズと組み合わせを通じて、あらゆる種類のデータを魅力的でインタラクティブなグラフとダッシュボードに視覚化できるライブラリです。速度と美しさを追求し、すべてのモダンブラウザーで動作するように設計されており、完全なタッチ操作とインタラクティブ機能により、あらゆるデバイスでレスポンシブなビジュアルをすばやく構築できます。

ゲージ

Ignite UI for React は、簡単かつ直感的な方法でデータを示すために使用されるラジアルゲージ、リニアゲージとバレットグラフコンポーネントを提供します。ラジアルゲージには、定義済みの形状とスケールを作成するためのさまざまなカスタマイズオプションがあります。リニアゲージは、スケールおよび 1 つ以上の範囲と比較した値の単純なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。バレットグラフコンポーネントを使用すると、ダッシュボードで使用されるメーターやゲージを単純な棒チャートに置き換えて、データの視覚化を作成できます。

マップ

Ignite UI for React 地理マップは、アプリケーションで地理データを視覚化する機能を提供します。マーカー、線、多角形、さらにはインタラクティブなビットマップの形状で、多くの地理的位置で構成されるデータセットを描画できます。複数のマップレイヤーを地理データでオーバーレイし、特定の地理的位置をマークし、カスタムマーカーと色を使用して情報を表示できます。

グリッド & 入力

Ignite UI for React には複数のグリッドコンポーネントが用意されており、データをほとんど設定不要でバインドして表示できます。データグリッド、リスト、ツリー、さらにはスプレッドシート形式での表示にも対応しています。また、フィルタリング、ソート、グループ化、ピン固定などの機能も提供します。

ボタン、入力、レイアウト、メニュー

Ignite UI for React は、依存関係のないアプローチでカプセル化と再利用可能なコンポーネントの概念を使用して、最新の Web アプリケーションを構築できるようにするさまざまなタイプのボタン、入力、メニュー、レイアウトを提供します。ストーリーブックはこちらをご覧くださ。これらのコンポーネントは Indigo Design System に基づいており、App Builder によって完全にサポートされており、Sketch、Adobe XD、および Figma 用のすぐに使用できる UI キットによって支えられています。

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

IgniteUI CLI のインストール

アプリケーションを最初から作成し、Ignite UI React を使用するように構成するには、Ignite UI CLI を使用できます。最初の手順には、以下のように各パッケージをグローバルにインストールします。

npm install -g igniteui-cli

使用可能なオプションをガイド付きで体験したい場合は、新しいアプリケーションの作成とセットアップに役立つ手順モードを初期化できます。ガイドを開始するには、ig コマンドを実行します。

ig

次に、フレームワークとして React、タイプとして React TS を選択し、Default Top Navigation プロジェクトテンプレートを選択します。その後、特定のコンポーネントまたはビューを追加するか、または Complete & Run を選択してください。さらに、Ignite UI CLI の詳細についてはこちらを参照してください。

あるいは、React チームが推奨する Next.js、Vite、Expo などの一般的なフレームワークを使用することも可能です。以下では、これらの方法のいずれかを使用して Ignite UI React を利用した React アプリケーションを作成する手順をステップごとに説明します。

前提条件

NodeJS をインストールします。
Visual Studio Code をインストールします。

DOWNLOAD NODE

DOWNLOAD VS CODE

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

前提条件のインストール後、新しい React アプリケーションを作成できます。

1 - VS Code を開き、[ターミナル] メニューを選択してから、[新しいターミナル] オプションを選択します。

2 - ターミナルウィンドウに以下のコマンドのいずれかを入力します。

npx create-next-app@latest

次に、プロンプトに従ってプロジェクトの名前、Typescript を使用するかどうか、React が提供するその他のさまざまなオプションを選択します。この例では、npx と create-next-app が必要です。React アプリケーションの初期構成 (ボイラープレート) を行うさまざまな方法については、このトピックを参照してください。

既存アプリの更新

既存の React CLI プロジェクト (以前のもの) で Ignite UI for React を使用する場合は、以下のコマンドを実行します。

npm install --save igniteui-react
npm install --save igniteui-react-charts igniteui-react-core
npm install --save igniteui-react-excel igniteui-react-core
npm install --save igniteui-react-gauges igniteui-react-core
npm install --save igniteui-react-grids igniteui-react-core
npm install --save igniteui-react-maps igniteui-react-core
npm install --save igniteui-react-spreadsheet igniteui-react-core

また

yarn add igniteui-react-charts igniteui-react-core
yarn add igniteui-react-excel igniteui-react-core
yarn add igniteui-react-gauges igniteui-react-core
yarn add igniteui-react-grids igniteui-react-core
yarn add igniteui-react-maps igniteui-react-core
yarn add igniteui-react-spreadsheet igniteui-react-core

これにより、Ignite UI for React のパッケージが、それらのすべての依存関係、フォントのインポート、および既存のプロジェクトへのスタイル参照と共に自動的にインストールされます。

モジュールのインポート

はじめに、使いたいコンポーネントの必要なモジュールをインポートします。GeographicMap に対してこれを行います。

import { IgrGeographicMapModule, IgrGeographicMap } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();

コンポーネントの使用

マークアップに Ignite UI for React マップコンポーネントを使用する準備が整いました。以下のように定義します。

// App.txs
function App() {
  return (
    <div style={{ height: "100%", width: "100%" }}>
      <IgrGeographicMap
        width="800px"
        height="500px"
        zoomable="true" />
    </div>
  );
}

アプリケーションの実行

以下のコマンドを使用して新しいアプリケーションを実行できます。

npm run-script start

コマンドを実行した後、プロジェクトがローカルでビルドされて提供されます。これでデフォルトのブラウザーで自動的に開き、プロジェクトで Ignite UI for React コンポーネントを使用できるようになります。最終結果には、インタラクティブなワールドマップが表示されます。