Ignite UI を React で使用

Ignite UI はモダン Web 開発をサポートします。Angular に加え、Ignite UI を React で使用できます。このレッスンでは Ignite UI グリッドを React アプリケーションで利用する方法について学びます。

レッスンの目的

  1. ReactJS に Ignite UI グリッドを追加
  2. グリッドの列を設定

コントロールの詳細については Ignite UI データ グリッドをご覧ください。

プロジェクトのセット アップ

こちらをクリックするとレッスンに必要なプロジェクトをダウンロードできます。(こちらからは完成版をダウンロードできます。)

このプロジェクトは、ReactJS  と Ignite UI で動作するように既に構成されており、すべての参照がプロジェクトに追加されています。詳細については、Blog エントリ (英語) を参照してください。

このプロジェクトでは下記のファイルを確認できます。

  1. index.html : アプリケーション マークアップと参照設定
  2. index.js : React コード
  3. data.js: Ignite UI グリッドで使用されるデータ

data.js には Ignite UI グリッドに表示されるデータが含まれています。index.js には アプリケーション コンポーネントが含まれています。index.js では下記のようにコンポーネント クラスが生成されている箇所を確認できます。

var App = React.createClass(
{
  getInitialState: function()
  {
    return{
    }
  },
  render: function()
  {
    return(
     <h2>Ignite UI Grid will be rendered here</h2>
    )
  }
});
ReactDOM.render(
  <App />,
  document.getElementById("app")
);

このコンポーネント クラスは 2 つの関数を含んでいます。

  1. getInitialState() 関数: 初期状態のオブジェクトを返す
  2. render() 関数: レンダリング情報を返す。次の手順で実装

React.createClass API の詳細についてはこちらをご覧ください。

以下のリストに示すように、index.js では、babel スクリプトとして参照されていることがわかります。

<div id="app">
  <script type="text/babel" src="index.js">
  </script>
</div>

index.html では、React、jQuery、Ignite UI への参照設定を確認できます。

ダウンロードを終えた後、プロジェクトのフォルダーに移動し、下記のコマンドを実行します。

  • npm install
  • npm start

npm install コマンドを実行することで全ての依存する項目がインストールされます。npm start コマンドを実行することで React アプリケーションが実行されます。プロジェクトのセットアップが正しく行われている場合、下記のイメージのようなアプリケーションが実行されます。

Setting Up the Project

手順 1: 初期状態に初期化

グリッドを初期化するには、データ ソース、幅、行スタイルなどのグリッドのさまざまなプロパティの値を設定する必要があります。これらのグリッドプロパティは、getInitialState() 関数で設定できます。index.js ファイルを開き、以下のように getInitialState() 関数を変更します。

getInitialState: function()
{
  return{
    data: stocks,
    gridWidth: "100%",
    alternateRowStyles: true
  }
},

グリッドの幅、行スタイル、およびデータソースを設定するためのプロパティを作成しています。さらに、アプリケーションに "stocks" という配列が既に存在することがわかります。

手順 2: グリッドをレンダリング

グリッドをレンダリングするには、コンポーネントクラスの render() 関数からグリッドを返す必要があります。IgGrid を返すには、index.js を開き、次のようにレンダリング関数を変更します。

render: function()
{
  return(
    <div>
      <IgGrid id="grid1"
              autoGenerateColumns={true}
              dataSource={this.state.data}
              width={this.state.gridWidth}
              alternateRowStyles={this.state.alternateRowStyles} />
    </div>
  )
}

getInitialState() 関数から返されるオブジェクトのプロパティを使用して、dataSource、width、および alternateRowStyles プロパティを設定しています。

アプリケーションを実行すると、Ignite UI グリッドが RecatJS アプリケーションで実行されていることを確認できます。

Step 2: Render the Grid

手順 3: グリッドの列を定義

前の手順では、グリッドを作成するために autoGenerateColumns を true に設定しました。選択した列のみをデータ セットから表示するように構成することもできます。autoGenerateColumns  プロパティを false に設定し、グリッドに columns プロパティを追加し、列を構成する必要があります。下記のように、render() 関数で IgGrid を変更します。

<igGrid id="grid1"
        autoGenerateColumns={false}
        dataSource={this.state.data}
        width={this.state.gridWidth}
        alternateRowStyles={this.state.alternateRowStyles}
        columns={[
          { headerText: "CLOSE", key: "Close", dataType: "number" },
          { headerText: "DATE", key: "Date", dataType: "date", format: "dateTime" },
          { headerText: "HIGH", key: "High", dataType: "number" },
          { headerText: "LOW", key: "Low", dataType: "number"},
          { headerText: "OPEN", key: "Open", dataType: "number"},
          { headerText: "VOLUME", key: "Volume", dataType: "number"},
        ]}
/>

アプリケーションを実行すると列を手動で定義したグリッドが表示されていることを確認できます。

Step 3: Configure Columns of the Grid

結びに

React はクライアント JavaScript アプリケーションを構築するための選択しとして人気となっています。多くの企業はすでに業務用アプリケーションにおいて React を使用することを検討しています。Ignite UI はこのようなモダン Web 開発フレームワークをサポートします。