新規 React プロジェクトの作成からライブラリの読み込みまで - Ignite UI for React で始めるフロントエンド開発 - ①

f:id:cleverdog:20210204105206j:plain

こんにちは！ソリューションコンサルタントの中江です。

本記事では、アプリケーション開発におけるフロントエンド構築のための JavaScript ライブラリ React の入門記事として、新規 React プロジェクトの作成から、簡単なアプリケーションの構築までを行なっていきます。

アプリケーションの構築には弊社開発ツールの Ignite UI for React を利用して、高機能なグリッドやチャートコントロールを、簡単に実装していきます。

以下の記事では、Ignite UI for React のコントロールを組み込んだデータ可視化ダッシュボードのサンプルアプリケーションについて紹介しています。こちらもぜひご覧ください。

blogs.jp.infragistics.com

今回は開発を始めるための環境構築を行なっていきます。

事前準備
新しい React アプリケーションの作成
Ignite UI for React をインストールする
Ignite UI for React モジュールのインポート
コンポーネントの使用
まとめ
- Ignite UI for React トライアル版を利用するには

事前準備

作業開始前に、実行環境として Node.js がインストールされている状態にセットアップします。

また、IDE として Visual Studio Code を使用します。

新しい React アプリケーションの作成

Visual Studio Code でアプリケーションを作成したいルートディレクトリを開き、メニューからターミナルを表示し、ターミナルウィンドウで以下のように入力します。

npx create-react-app first-react-app --template typescript

この時、Node.js のバージョンが低いことでエラーが発生する場合は、最新の Node.js バージョンにアップデートを行ってください。

Node.js の最新版はこちらで確認いただけます。

アプリケーションの作成に成功すると、このようなメッセージが表示されます。早速実行してみましょう。code first-react-app コマンドを使い Visual Studio Code を新たに作成された first-react-app でディレクトリ開き直した後、yarn start で開発サーバーを起動します。

code first-react-app
yarn start

このような画面がブラウザ上で表示されれば、実行は成功しています。

また、今回 --template typescript オプションによって TypeScript でアプリケーションを記述する設定としています。この時点で Visual Studio Code は以下のような画面となっています。

Ignite UI for React をインストールする

以下のコマンドを実行して Ignite UI for React の各ライブラリをインストールします。コアライブラリの igniteui-react-core は必須で、その他は必要に応じてインストールします。

yarn add igniteui-react-core igniteui-react-charts igniteui-react-grids igniteui-react-maps

インストールに成功したら以下のように表示されます。

また、package.json に依存関係として各ライブラリが追記されていることが確認できます。

Ignite UI for React モジュールのインポート

Ignite UI for React の UI コントロールを利用するためにモジュールをインポートする記述を行う必要があります。App.tsx を開き、以下のように追記します。

import React from 'react';
import logo from './logo.svg';
import './App.css';

// モジュールのインポート
import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
// register() メソッドの実行
IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();

コンポーネントの使用

これでコンポーネント（今回の例では地理的マップコンポーネント）を利用できるようになりました。App.tsx の App() 関数を以下のように変更します。

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