データベースデータを使った動的な React アプリの構築

React は、ユーザーインターフェースを構築するための宣言的で効率的、かつ柔軟な JavaScript ライブラリです。CData Connect Server を使用すると、オンプレミスおよびクラウドベースのデータベースを含む250以上のデータソースに対して REST API を生成できます。この記事では、CData Connect Server をセットアップして SQL Server データベース用の REST API を作成し、ライブデータにアクセスできるシンプルな React Web アプリケーションを構築する手順を説明します。この React アプリは、データベースデータに基づいて HTML テーブルを動的に構築し、データを表示します。この記事ではコードの大部分について説明しますが、サンプル React プロジェクトとサンプルデータベースを作成するための SQL コマンドをダウンロードして、完全なソースコードを確認し、実際に機能をテストしてみてください。

サンプルデータベースの作成

SQL Server データベースで chinook.sql ファイル内のコマンドを実行して、サンプルデータベースを作成およびデータを投入します。このデータベースに接続し、React アプリケーションにデータを表示するためにクエリを実行します。

Connect Server のセットアップ

まだの方は、CData Connect Server をダウンロードしてください。 Connect Server をインストールしたら、以下の手順に従ってアプリケーションを実行し、データへの接続を構成して、 React アプリでアクセスするテーブル用の REST API を作成します。

CORS の有効化

React Web アプリと Connect Server が異なるドメインにある場合、React はクロスドメインリクエストを生成します。これは、React Web アプリからクエリされるすべてのサーバーで CORS（クロスオリジンリソース共有）を有効にする必要があることを意味します。 SETTINGS ページの Server タブで Connect Server の CORS を有効にできます：

チェックボックスをクリックして、クロスオリジンリソース共有（CORS）を有効にします。
すべてのドメインを '*' なしで許可するチェックボックスをクリックするか、 Access-Control-Allow-Origin で接続を許可するドメインを指定します。
Access-Control-Allow-Methods を "GET,PUT,POST,OPTIONS" に設定します。
Access-Control-Allow-Headers を "authorization" に設定します。
Save Changes をクリックします。

データベース接続の構成

以下の手順に従って、Connect Server がデータベースに接続するよう構成します：

Connections タブに移動します。
Add Connection をクリックします。
表示されるダイアログで接続を構成します：接続に名前を付け、サーバー、ポート、データベース、ユーザー、パスワードを入力します。

ユーザーの構成

次に、Connect Server を通じてデータベースデータにアクセスするためのユーザーを作成します。Users タブでユーザーを追加および構成できます。このデータ表示用のシンプルな React アプリでは、読み取り専用アクセス権を持つユーザーを作成します： Add User をクリックし、ユーザー名とパスワードを設定し、後で使用するために Authtoken を保存して、 Save Changes をクリックします。

ユーザーに対して authtoken が生成されます。Users タブで各ユーザーの authtoken やその他の情報を確認できます：

テーブルへのアクセス

ユーザーを作成したら、データベーステーブルへのアクセスを有効にする準備ができました：

ODATA タブの Add Tables ボタンをクリックします。
アクセスするデータ接続を選択し、 Next をクリックします。
接続を選択した状態で、各テーブル名を選択して Next をクリックしてリソースを有効にします。

REST API のサンプル URL

データベースへの接続を構成し、ユーザーを作成し、Connect Server にリソースを追加したので、これらのリソースに対して OData プロトコルに基づいた簡単にアクセス可能な REST API が利用可能になりました。以下に、テーブルの一覧とそれらにアクセスするための URL を示します。テーブルへのアクセスの詳細については、ナビゲーションバーから API ページを開いてください。React で使用する場合、デフォルトで JSON データを返さない URL の末尾に @json パラメータを追加できます。

テーブル		URL
エンティティ（テーブル）一覧		http://`address`:`port`/odata.rsc/
Albums テーブルのメタデータ		http://`address`:`port`/odata.rsc/albums/$metadata?@json
Albums データ		http://`address`:`port`/odata.rsc/albums

標準の OData フィードと同様に、返されるフィールドを制限したい場合は、クエリに $select パラメータを追加できます。また、$filter、$orderby、$skip、$top などの他の標準 URL パラメータも使用できます。

React Web アプリケーションの構築

Connect Server のセットアップが完了したら、サンプル React アプリを構築する準備ができました。以下の手順では、.zip ファイルに含まれる React アプリのソースファイルについて説明し、関連するコードセクションについて解説します。

index.html

これはサンプル React Web アプリケーションのホームページです。HTML の head と body を構成し、 Web アプリケーションを表示するために使用するコンテナとスクリプトを指定します。

main.js

この TypeScript ファイルは、必要なライブラリ、モジュール、および React クラスをインポートします。メインの React クラスのプロパティ（props）もここで定義されています。

package.json

この JSON ファイルには、依存関係を含む React アプリのプロパティが含まれています。このファイルは自動的に生成されます。

webpack.config.js

この JavaScript ファイルは、React アプリのさまざまな設定を定義します。

App.jsx

この JavaScript XML ファイルには、React アプリを構築するために必要なコードが含まれています。 App クラスには、Connect Server からデータを取得し、React アプリのさまざまなパーツをレンダリングするために必要なすべての関数が含まれています。以下にメソッドについて説明します。

constructor

App クラスのコンストラクタです。この中で、state には Web アプリを構築するために使用される動的データが含まれています。また、this に他のメソッドをバインドして、それらのメソッド内で state を変更できるようにします。

  constructor(props) {
    super(props);

    this.state = {
      selectedTable: '',
      selectedColumns: [],
      tables: [],
      columns: [],
      tableData: [],
      auth: 'Basic ' + btoa(props.user + ':' + props.pass),
    };

    this.onTableChange = this.onTableChange.bind(this);
    this.onColumnChange = this.onColumnChange.bind(this);
    this.renderTableHeaders = this.renderTableHeaders.bind(this);
    this.renderTableBody = this.renderTableBody.bind(this);
    this.getColumnList = this.getColumnList.bind(this);
    this.getData = this.getData.bind(this);

  }

componentDidMount

React の仕様に従い、componentDidMount メソッドは render メソッドの前に呼び出され、コンストラクタの実行後にアプリの state 変数を更新するために使用できます。このメソッドでは、 Connect Server にテーブル一覧の HTTP リクエストを送信し、tables と selectedTable state 変数を設定できます。

このサンプルでは、getColumnList メソッドの呼び出しにより、最初（かつ現在選択されている）のテーブルで使用可能なカラムの一覧を取得します。

  componentDidMount() {
    Object.assign(axios.defaults, {headers: {authorization: this.state.auth}});
    axios.get(`${this.props.baseUrl}`)
      .then(res => {
        const tables = res.data.value;
        this.setState({ tables });
        this.setState({ selectedTable: tables[0].name});
      })
      .catch(function (error) {
        if (error.response) {
          alert('Code: ' + error.response.data.error.code + '\r\nMessage: ' + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
    this.getColumnList();
  }

getColumnList

この関数は、selectedTable パラメータ（パラメータが未定義の場合は UI で現在選択されているテーブル）で使用可能なカラムの一覧を取得します。 HTTP リクエストを実行してレスポンスを解析し、columns と selectedColumns state を設定します。

  getColumnList(selectedTable) {
    if (!selectedTable) {
      selectedTable = this.state.selectedTable;
    }
    Object.assign(axios.defaults, {headers: {authorization: this.state.auth}});
    axios.get(`${this.props.baseUrl}/${selectedTable}/$metadata?@json`)
      .then(res => {
        let columns = res.data.items[0]["odata:cname"];
        this.setState({
          columns,
          selectedColumns: [],
        });
      })
      .catch(error => {
        if (error.response) {
          alert('Code: ' + error.response.data.error.code + '\r\nMessage: ' + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
  }

renderTableList

この関数は、tables state 変数を使用して、テーブル選択用の HTML ドロップダウンセレクトのオプションを構築します。

  renderTableList() {
    let tablesHTML = [];
    for (let i = 0; i < this.state.tables.length; i++) {
      let table = this.state.tables[i];
      tablesHTML.push();
    }
    return tablesHTML;
    }

renderColumnList

この関数は、columns state 変数を使用して、カラム選択用の HTML マルチセレクトのオプションを構築します。

  renderColumnList() {
    let columnsHTML = [];
    for (let i = 0; i < this.state.columns.length; i++){
      let column = this.state.columns[i];
      columnsHTML.push();
    }
    return columnsHTML;
    }

renderTable

この関数は、Connect Server から取得したデータに基づく HTML テーブルの基本フレームワークを提供します。テーブルヘッダーとデータ行を構築するために、renderTableHeaders() と renderTableBody() という2つのヘルパー関数を使用します。


  renderTable() {
    return (
      <table>
        <thead>
          { this.renderTableHeaders() }
        </thead>
        { this.renderTableBody() }
      </table>
    );
  }

renderTableHeaders

この関数は、selectedColumns state 変数を使用して、Connect Server からのデータを表示する HTML テーブルのヘッダーを構築します。


  renderTableHeaders() {
    let headers = [];
    for (let i = 0; i < this.state.selectedColumns.length; i++) {
      let col = this.state.selectedColumns[i];
      headers.push(<th key={col} style={{backgroundColor: '#177CB8', color: 'white', border: '1px solid grey', borderCollapse: 'collapse', padding: '5px'}}>{col}</th>)
    }
    return (<tr>{headers}</tr>);
  }

renderTableBody

この関数は、tableData と selectedColumns state 変数を使用して、 Connect Server からのデータを表示する HTML テーブルのデータ行を構築します。


  renderTableBody() {
    let rows = [];
    this.state.tableData.forEach(function(row) {
      rows.push(
        <tr key={btoa('row'+rows.length)}>
          {this.state.selectedColumns.map(col =>
            <td key={col} style={{border: '1px solid grey', borderCollapse: 'collapse', padding: '5px'}}>{row[col]}</td>
          )}
        </tr>
      )
    }.bind(this));
    return (<tbody>{rows}</tbody>);
  }

getData

この関数は、Connect Server からデータを取得します。selectedColumns state 変数に基づいて $select パラメータ用のリストを構築し、 selectedTable state 変数を使用してどのリソースからデータをリクエストするかを決定します。 Connect Server から返されたデータは tableData state 変数に格納されます。


  getData() {
    let columnList = '';
    columnList = this.state.selectedColumns.join(',');
    Object.assign(axios.defaults, {headers: {authorization: this.state.auth}});
    axios.get(`${this.props.baseUrl}/${this.state.selectedTable}/?$select=${columnList}`)
      .then(res => {
        const tableData = res.data.value;
        this.setState({ tableData });
      })
      .catch(error => {
        if (error.response) {
          alert('Code: ' + error.response.data.error.code + '\r\nMessage: ' + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
  }

onTableChange

この関数は、テーブル選択用の HTML ドロップダウンセレクトの change イベントを処理します。この関数では、 selectedTable state 変数が選択された値に設定され、tableData state 変数のすべての値がクリアされます。また、getColumnList 関数の呼び出しにより、カラム選択用の HTML マルチセレクト要素が更新されます。


  onTableChange(event) {
    const selectedTable = event.target.value;
    this.setState({
      selectedTable,
      tableData: [],
    });
    this.getColumnList(selectedTable);
  }

onColumnChange

この関数は、取得および表示するカラムを選択するための HTML マルチセレクトの change イベントを処理します。どのカラムが選択されているかを判断した後、selectedColumns state 変数が更新され、 tableData state 変数がクリアされます。


  onColumnChange(event) {
    let options = event.target.options;
    let selectedColumns = [];
    for (let i = 0; i < options.length; i++){
      if (options[i].selected){
        selectedColumns.push(options[i].value);
      }
    }
    this.setState({
      selectedColumns,
      tableData: [],
      });
  }

render

この関数は、さまざまな HTML 要素のレイアウトと表示を制御する関数です。静的な HTML 機能と、動的な要素をレンダリングする関数の呼び出しの両方が含まれています。

  render() {
    return (
      <div>
        <h1 style={{fontSize: '1.2em', color: '#177CB8', marginBottom: '0'}}>CData Connect Server React Demo</h1>
        <br/>
        <label>Select a Table</label>
        <br/>
        <select className='tableDropDown' onChange={this.onTableChange}>
          { this.renderTableList() }
        </select>
        <br/>
        <br/>
        <label>Select {this.state.selectedTable} Columns</label>
        <br/>
        <select className='columnMultiSelect' onChange={this.onColumnChange} multiple>
          { this.renderColumnList() }
        </select>
        <br/>
        <br/>
        { this.state.selectedColumns.length > 0 ? <button onClick={this.getData}>Get [{ this.state.selectedTable }] Data</button> : null }
        <br/>
        <br/>
        { this.state.tableData.length > 0 ? this.renderTable() : null }
      </div>
    );
  }

React アプリの設定

データへの接続を構成し、React アプリのソースファイルを確認したら、React Web アプリケーションを実行する準備ができました。 React アプリを実行するには、マシンに node.js がインストールされている必要があります。アプリケーションを実行する前に、いくつかのモジュールもインストールする必要があります。

グローバルモジュール

React アプリを実行するには、コマンドラインから babel と babel-cli モジュールをグローバルにインストールします：

npm install -g babel
npm install -g babel-cli

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

次のステップでは、React プロジェクトをセットアップし、package.json ファイルを作成して設定します。

コマンドラインで、ソースファイルのあるディレクトリに移動します：
```
cd ./connect-react
```
ディレクトリに移動したら、設定済みの package.json ファイルを使用して必要なモジュールをインストールします：
```
npm install
```

React アプリの実行

package.json ファイルを作成し、必要なモジュールをインストールしたら、React アプリを実行する準備ができました。コマンドラインインターフェースで React アプリのディレクトリに移動し、以下のコマンドを実行します：

npm start

React アプリが起動すると、タイトルとテーブルを選択するためのドロップダウンメニューが表示されます。テーブルの一覧は Connect Server から取得され、Connect Server の構成時にリソースとして追加したすべてのテーブルが含まれています。

テーブルを選択すると、カラム選択用のドロップダウン・マルチセレクトメニューが表示され、テーブルに表示するカラムを選択できます。カラムを選択すると、テーブルヘッダーが表示されます。

テーブルとカラムを選択したら、Get [table] Data ボタンをクリックして、API Server 経由でデータベースからデータを取得できます。ボタンをクリックする前に選択したテーブルとカラムに基づいて、HTML テーブルにデータが表示されます。

無料トライアルと詳細情報

動的な Web ページでデータベースデータに接続するために必要な手順が完了しました。 Connect Server をダウンロードして、 SQLite、MySQL、SQL Server、Oracle、PostgreSQL などのオンプレミスおよびクラウドベースのデータベースからのライブデータを使用した動的な Web ページの構築を始めましょう！いつものように、サポートチームがご質問にお答えします。