はじめての React - ② Ignite UI for React のグリッドを表示させる

インフラジスティックス・ジャパン、テクニカル コンサルティング チームの oquiron です。

「はじめての React」シリーズでは <a href="https://ja.reactjs.org/" target="_blank" rel="noreferrer noopener">React</a> が初めての人向けに React のアプリケーションの作成方法を順に説明したいと思います。Hello World から始めてインフラジスティックス製品の <a href="https://jp.infragistics.com/products/ignite-ui-react" target="_blank" rel="noreferrer noopener">Ignite UI for React</a> のグリッドやチャートを配置するところまでを目指します。

この記事はその第 2 回。Ignte UI for React のグリッドを表示させるところまで進めていきます。

# 連載目次
<ol>
<li>開発環境を整える。</li>
<li>React のアプリケーションを動かしてみる。</li>
<li>"Hello World!" と表示されるように書き換える。（前回の「<a href="https://qiita.com/oquiron/items/3478bea2965c55d1e7f2" target="_blank" rel="noreferrer noopener">はじめての React ①</a>」はここまで）</li>
<li><a href="#Index4">Ignite UI for React のグリッドを配置する。（←今回はここ）</a></li>
<li>Ignite UI for React のチャートを配置する。</li>
</ol>

前回作成した Hello World に追加していく形で進めます。まだの場合は、前回の内容を見て Hello World まで作成してください。

<h1 id="Index4">4. Ignite UI for React のグリッドを配置する。</h1>
Ignite UI for React の<a href="https://jp.infragistics.com/products/ignite-ui-react/react/components/data-grid.html" target="_blank" rel="noreferrer noopener">グリッド</a>はデータを表形式で表示することができます。

<h2>グリッドに必要なパッケージをインストールする。</h2>
グリッドに必要なパッケージは以下の 4 つです。

- igniteui-react-core
- igniteui-react-grids
- igniteui-react-inputs
- igniteui-react-layouts

これらを npm の install コマンドを使用してインストールします。プロンプトで次のコマンドを順に実行します。

```console
> npm install --save igniteui-react-core
> npm install --save igniteui-react-grids
> npm install --save igniteui-react-inputs
> npm install --save igniteui-react-layouts
```

<h2>MyGrid コンポーネントを作成する。</h2>
前回の「はじめての React - ① Hello World」で HelloWorld コンポーネントを作成したのと同じ手順で、src フォルダーの直下に MyGrid コンポーネントを作成します。
![26006613685912339_MyGridComponent_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/7e66bb84-4790-bd7d-a70a-3915018d4062.png)

新規作成した MyGrid.tsx を開き、以下のコードを貼り付け、保存します。

```javascript
// src/MyGrid.tsx
import * as React from 'react';

// ①IgrDataGridに必要なモジュールをインポートする。
import { IgrDataGridModule } from 'igniteui-react-grids';
import { IgrDataGrid } from 'igniteui-react-grids';

// ②IgrDataGridに必要なモジュールを登録する。
IgrDataGridModule.register();

// ③Reactのコンポーネントを拡張してMyGridクラスコンポーネントを定義する。
export default class MyGrid extends React.Component {
    public data: any[];

    // ④MyGridクラスコンポーネントのコンストラクター
    constructor(props: any) {
        super(props);

        // ⑤IgrGridに表示するデータを生成する。
        this.data = [
            {"Year": "1920", "Population": 55963053 },
            {"Year": "1930", "Population": 64450005 },
            {"Year": "1940", "Population": 73114308 },
            {"Year": "1950", "Population": 84114574 },
            {"Year": "1960", "Population": 94301623 },
            {"Year": "1970", "Population": 104665171 },
            {"Year": "1980", "Population": 117060396 },
            {"Year": "1990", "Population": 123611167 },
            {"Year": "2000", "Population": 126925843 },
            {"Year": "2010", "Population": 128057352 },
        ];
    }

    // ⑥MyGridクラスコンポーネントの描画を実装する。
    // ※render()メソッドはクラスコンポーネントで必ず定義しなければならない唯一のメソッドです。
    public render() {
        return(
          <div style={{margin: "1em"}}>
            {/*
              ⑦IgrDataGridを配置する。
              dataSource: 表示するデータソースを指定する。
              autoGenerateColumns: 列を自動生成するかどうか指定する。trueは自動生成する。falseは自動生成しない。
            */}
            <IgrDataGrid style={{margin: "1em"}}
              height="300px"
              width="100%"
              dataSource={this.data}
              autoGenerateColumns="true"
              />
            </div>
        );
    }
}

```

![26006613685912339_MyGridComponent_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/3a600ffb-a66f-0471-33c5-4cfb2c63b020.png)


<h2>MyGrid コンポーネントを画面に配置する。</h2>
HelloWorld コンポーネントを画面に配置したときと同じように、src/App.jsx を開いて MyGrid コンポーネントのインポートと配置をします。

```javascript
// src/App.tsx
import React from 'react';
import HelloWorld from './HelloWorld';
import './App.css';

import MyGrid from './MyGrid'; // ①MyGridコンポーネントをインポートする。

function App() {
    return (
        <div className="App">
            <HelloWorld />
            <MyGrid /> {/* ②MyGridコンポーネントを画面上に配置する。 */}
        </div>
    )
}

export default App;
```

![26006613685912339_MyGridComponent_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/73d6bd00-b5c1-a2f7-1016-6725aa987746.png)

ファイルをすべて保存して、プロンプトを開き、"npm start" を実行します。ブラウザーの "Hello World!" の下に表が表示されていれば OK です。
![26006613685912339_MyGridComponent_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/592282d2-dd93-4aaf-9c1a-1e574d809689.png)

これでグリッドの表示までできました！ あともう一息です。

次回はチャートの表示をしてみましょう。


# 最後に
以上、グリッドの表示のさせ方を見てきました。次回は、同じように Ignite UI for React のチャートを表示させてみましょう。

この記事に関して何かご質問・ご不明な点がありましたら、お気兼ねなく<a href="https://jp.infragistics.com/about-us/contact-us" target="_blank" rel="noreferrer noopener">インフラジスティックス</a>までお問い合わせください。