CData API Server とReact でライブデータを活用した動的アプリを構築
React は、動的でインタラクティブなユーザーインターフェースを構築するための高速で柔軟性の高い JavaScript ライブラリで、世界中で幅広く採用されています。 270 以上のオンプレミスおよびクラウドベースのデータソースをサポートする CData API Server と組み合わせることで、 ライブデータに接続する REST API を簡単に作成し、リアルタイムでレスポンシブな Web アプリケーションを実現できます。
このガイドでは、CData API Server をセットアップして SQLite データベース用の REST API を作成し、 API からライブデータを取得・表示するシンプルな React Web アプリを構築する方法を説明します。 このアプリはデータベースの内容に基づいて、インタラクティブでカスタマイズ可能なテーブルを動的に生成します。 主要な手順とコードスニペットを解説していますが、完全な React プロジェクトと SQLite サンプルデータベースを以下からダウンロードして、 フルソースコードを確認し、実際に機能を試すこともできます。
それでは、始めましょう！
前提条件
React プロジェクトを実行するには、以下の前提条件が必要です。
注意: このガイドでは、React.js に精通しており、 マシンに Node.js がインストール済みで、 VSCode などのテキストエディタまたは IDE を使用していることを前提としています。
- CData API Server。こちらから無料トライアルを入手できます。
- サンプル React プロジェクトと SQLite データベース。こちらからダウンロードできます。
概要
以下のステップで進めていきます：
- インストールと接続: CData API Server をセットアップし、データソースへの接続を構成します。
- 開発: React アプリを作成し、API エンドポイントからデータを取得して動的にレンダリングします。
- 実行とテスト: アプリを実行し、機能をテストして、データを操作します。
Step 1: CData API Server のインストール、接続、構成
1.1. CData API Server のインストール
- Windows の場合: .exe インストーラーを実行し、画面の指示に従ってセットアップを完了します。
- その他のプラットフォームの場合: Mac および Linux 用の クロスプラットフォーム（Java）バージョンをダウンロードしてインストールします。
-
クラウドデプロイの場合:
- AWS: 事前構成済みの Amazon Machine Image（AMI）をデプロイして、API Server を迅速にセットアップできます。
- Azure: Microsoft Azure Marketplace から直接デプロイし、スムーズにセットアップできます。
1.2. CORS の有効化
React Web アプリと API Server が異なるドメインで動作している場合、クロスドメインリクエストが発生します。 これらのクロスドメインリクエストを正常に処理するには、API Server で CORS（Cross-Origin Resource Sharing）を有効にする必要があります。 これは SETTINGS ページから構成できます。
- 左側の Settings に移動し、 アイコンをクリックして CORS 設定を編集します。
- Enable Cross-Origin Resource Sharing (CORS) をオンに切り替えます。
- Allow all domains without '*' をオンにして、クライアントから送信されるすべてのオリジンを許可します。
- Access-Control-Allow-Origin に、アプリのオリジン（例: https://localhost:3001）を入力するか、* を入力してパブリック API のすべての受信リクエストを許可します。
- Access-Control-Allow-Credentials を有効にして、クライアント資格情報（Cookie、HTTP 認証など）を許可します。
- Access-Control-Allow-Methods に GET, PUT, POST, OPTIONS を入力して、許可するリクエストメソッドを定義します。
- Access-Control-Allow-Headers に Authorization, Content-Type を入力して、許可するヘッダーを指定します。
- Access-Control-Max-Age を秒単位で設定し（デフォルト: 3600 秒）、プリフライトリクエストをキャッシュします。
- Save をクリックします。
1.3. 接続の追加
- 左側の Settings に移動し、右上の Add Connection をクリックします。
- リストからコネクタを選択します。コネクタがインストールされていない場合は、 Only Installed をオフにして、利用可能なすべてのコネクタを表示します。
- Install Connector アイコン（）をクリックして、 自動的にダウンロードしてインストールします。手動インストールの場合は、 Manual Install を選択し、提供された ZIP ファイルをアップロードします。
- インストール後、コネクタを再度クリックして Configure Connection を開きます。
- 注意: この例では SQLite 接続を使用しますが、 このセットアップは CData API Server がサポートする 270 以上のすべてのコネクタで動作します。
- SQLite を選択し、ダイアログボックスで接続を構成します：
- Connection Name: 接続のわかりやすい名前を入力します。
- Database Source: プロジェクト ZIP に含まれるサンプル chinook.db SQLite データベースファイルのフルパスを入力します。 例: C:\Users\Public\Downloads\apiserver-react\chinook.db
- Save & Test をクリックして接続を検証し、セットアップを完了します。
1.4. ユーザーの追加と構成
API Server データにアクセスするためのユーザーを作成します：
- 左側の Users に移動し、右上の + Add User をクリックします。
- ユーザーがログインするための Username と安全な Password を入力します。
- Role を選択します：
- Admin: フルコントロール。
- Query: データアクセスのみ。
- （オプション）制限を設定：
- Requests Per Hour: デフォルト 1000。
- Max Concurrent Requests: デフォルト 10。
- Privileges を設定：
- GET: データの読み取り。
- POST: レコードの作成。
- PUT, MERGE, PATCH: データの更新。
- DELETE: データの削除。
- Add User をクリックして完了します。
ユーザーが追加されると、Authtoken が生成されます。パスワードが適用されない場合は、 この Authtoken と Username を使用してログインできます。 Authtoken を更新したり、Token Expiration オプションを切り替えて 特定の日数後に有効期限が切れるように設定することもできます。
1.5. エンドポイント用テーブルの追加
API エンドポイントを通じてデータベーステーブルへのアクセスを有効にするには、接続からテーブルを追加します：
- 左側の API に移動し、右上の Add Table ボタンをクリックします。
- 接続を選択し、Next をクリックします。
- Tables を展開してテーブルを選択するか、 上部のチェックボックス をクリックして すべて選択し、Confirm をクリックして追加します。
1.6. REST API のエンドポイントにアクセス
すべてのセットアップが完了すると、完全にアクセス可能な REST API（OData プロトコル）が使用できます。以下のエンドポイント URL を使用してください：
| テーブル | URL | |
|---|---|---|
| エンティティ（テーブル）リスト | http://address:port/api.rsc/ | |
| albums テーブルのメタデータ | http://address:port/api.rsc/albums/$metadata?@json | |
| Albums データ | http://address:port/api.rsc/albums |
返されるフィールドを制限するには、$select、$filter、$orderby、 $skip、$top パラメータを追加します。
Step 2: React アプリの開発
CData API Server の構成が完了し、ライブデータエンドポイントが提供されるようになりました。 次は React アプリを構築します。このアプリでは、ユーザーが利用可能なテーブルを選択し、 ライブデータを即座に表示して、データを動的に操作できます。以下の手順で進めましょう：
2.1. React アプリのセットアップ
まず、手動で Webpack と Babel を構成して React アプリをセットアップします。 これにより、ビルドプロセスをより細かく制御でき、プロジェクトを軽量に保てます。
- プロジェクトフォルダを作成し、その中でターミナルを開きます（例: ~/Downloads/CData-Python-CSV）。
- 新しいプロジェクトを初期化: npm init -y。
- コア依存関係をインストール: npm install react react-dom axios。
- 開発ツールをインストール: npm install --save-dev webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin
2.2. コアアプリコンポーネントの作成
次に、アプリの中核となる App.jsx コンポーネントを構築します。 このコンポーネントは API からデータを取得し、テーブルに表示します。以下の手順で進めます：
プロジェクトディレクトリに src フォルダを作成し、そのフォルダ内に App.jsx という新しいファイルを src/App.jsx として作成します。 以下のようにコンポーネントを定義します：
import React, { useState, useEffect } from "react";
import axios from "axios";
// URL クリーンアップユーティリティ
const cleanUrl = (base, endpoint = "") => `${base.replace(/\/+$/, "")}/${endpoint.replace(/^\/+/, "")}`;
const App = ({ user, pass, baseUrl }) => {
const [tables, setTables] = useState([]);
const [columns, setColumns] = useState([]);
const [selectedTable, setSelectedTable] = useState("");
const [selectedColumns, setSelectedColumns] = useState([]);
const [tableData, setTableData] = useState([]);
// 認証ヘッダーを設定
axios.defaults.headers.authorization = "Basic " + btoa(`${user}:${pass}`);
// データ取得ユーティリティ関数
const fetchData = (url, callback) =>
axios.get(url).then((res) => callback(res.data)).catch((err) => alert(`Error: ${err.response?.status || "Network error"}`));
// ロード時にテーブルを取得
useEffect(() => {
fetchData(cleanUrl(baseUrl), (data) => {
setTables(data.value);
setSelectedTable(data.value[0]?.name || "");
});
}, [baseUrl]);
// テーブル選択時にカラムを取得
useEffect(() => {
if (selectedTable) {
fetchData(cleanUrl(baseUrl, `${selectedTable}/$metadata?@json`), (data) =>
setColumns(data.items[0]["odata:cname"] || [])
);
}
}, [selectedTable]);
// 選択したカラムに基づいてデータを取得
const handleFetchData = () => {
if (selectedColumns.length) {
fetchData(cleanUrl(baseUrl, `${selectedTable}/?$select=${selectedColumns.join(",")}`), (data) => setTableData(data.value));
}
};
return (
<div style={{ textAlign: "center", fontFamily: "Arial", padding: "20px" }}>
<h1>CData API Server React Demo</h1>
{/* テーブルセレクター */}
<label>Select a Table:</label>
<select value={selectedTable} onChange={(e) => setSelectedTable(e.target.value)}>
{tables.map((table) => (
<option key={table.url} value={table.name}>
{table.name}
</option>
))}
</select>
{/* カラムセレクター */}
<div style={{ margin: "10px 0" }}>
<label>Select Columns:</label>
{columns.length ? (
columns.map((col) => (
<label key={col} style={{ display: "block" }}>
<input
type="checkbox"
value={col}
onChange={(e) =>
setSelectedColumns((prev) => (e.target.checked ? [...prev, col] : prev.filter((c) => c !== col)))
}
/>
{col}
</label>
))
) : (
<p>No columns found.</p>
)}
</div>
{/* データ取得ボタン */}
<button onClick={handleFetchData} disabled={!selectedColumns.length}>
Get Data
</button>
{/* データテーブルのレンダリング */}
{tableData.length > 0 && (
<table border="1" style={{ marginTop: "10px", width: "100%", borderCollapse: "collapse" }}>
<thead>
<tr>{selectedColumns.map((col) => <th key={col}>{col}</th>)}</tr>
</thead>
<tbody>
{tableData.map((row, index) => (
<tr key={index}>
{selectedColumns.map((col) => (
<td key={col}>{row[col] ?? "N/A"}</td>
))}
</tr>
))}
</tbody>
</table>
)}
</div>
);
};
export default App;
2.3. アプリエントリの構成
src フォルダ内に main.js という新しいファイルを src/main.js として作成します。 このファイルはアプリのエントリーポイントとして機能し、アプリを初期化します。 以下のコードを使用し、your_username と your_password を CData API Server の認証情報に置き換えてください。
// src/main.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
// API 認証情報とベース URL を設定
const user = "your_username";
const pass = "your_password";
const baseUrl = "http://localhost:8080/api.rsc/";
// アプリをレンダリング
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App baseUrl={baseUrl} user={user} pass={pass} />);
このスクリプトはアプリのエントリーポイントを定義します。React をインポートし、ルート HTML 要素を取得して、 ユーザー認証情報と API の詳細を props として渡しながら App.jsx コンポーネントをレンダリングします。
2.4. Webpack 構成のセットアップ
プロジェクトルートフォルダに webpack.config.js ファイルを作成します。 このファイルでアプリをビルドするための Webpack を構成します。以下のコードを使用してください：
// webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/main.js", // アプリのエントリーポイント
output: {
path: path.resolve(__dirname, "public"),
filename: "index.js", // 出力バンドルファイル
},
devServer: {
static: path.resolve(__dirname, "public"),
port: 3001, // CData API Server との競合を避けるためポートを変更
},
module: {
rules: [
{
test: /\.jsx?$/, // .js と .jsx ファイルの両方を処理
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
],
},
};
この構成では、アプリのエントリーポイント、出力バンドルファイル、 開発サーバーのポートを指定します。また、Babel を設定して JSX（JavaScript XML）を JavaScript にトランスパイルします。
2.5. 基本的な HTML ページの作成
プロジェクトフォルダ内に public フォルダを作成し、その中に index.html という新しいファイルを public/index.html として作成します。 以下のコードを使用してください：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>CData React App</title> </head> <body> <div id="root"></div> <script src="index.js"></script> </body> </html>
このファイルは基本的な HTML 構造をセットアップします。<div id="root"> は React アプリが動的にレンダリングされるコンテナとして機能します。 Webpack によって生成される index.js ファイルにより、 ページがブラウザで読み込まれるとすぐにアプリが実行されます。
Step 3: アプリの実行とテスト
アプリのセットアップとビルドが完了したので、ローカルで実行してテストしてみましょう。以下の手順に従ってください：
3.1. ビルドしたアプリの実行
- ターミナルを開き、プロジェクトフォルダに移動します。
- npm start を実行します。
- ブラウザで http://localhost:3001 を開きます。
- テーブルを選択すると、CData API Server からのライブデータが即座にレンダリングされます。
注意: アプリのポート番号は 3001 に更新されています。 これは、デフォルトでポート 8080 を使用する CData API Server との競合を避けるためです。 必要に応じて、webpack.config.js ファイルでこのポートを変更できます。
3.2. サンプルアプリの実行
サンプルアプリはより優れた構造を持ち、CData API Server で動作するように事前に構成されています。 実行するには、以下の手順に従ってください：
- こちらからサンプルアプリをダウンロードして解凍します。
- ターミナルを開き、解凍したフォルダに移動します。
- npm install を実行して依存関係をインストールします。
- src/main.js 内の API 認証情報を CData API Server の認証情報に置き換えます。
- npm start を実行してアプリを起動します。
- ブラウザで http://localhost:3001 を開いてアプリをテストします。
3.3. アプリの機能テスト
ブラウザで実行中のアプリを開きます。API Server からテーブルが読み込まれることを確認し、 テーブルを選択して、データが正しくレンダリングされることを確認します。 これでアプリは完全に機能し、必要に応じてさらにカスタマイズできる状態になりました。
まとめ: さらなる活用に向けて
CData API Server を通じてライブデータに接続し、テーブルを取得して 動的にデータを表示する完全な React アプリを構築できました。 このセットアップは、より多くのデータソース、より大きなデータセット、 ソートやページネーションなどの追加 UI 機能にも簡単に拡張できます。
デプロイするには、npm run build で本番バージョンをビルドし、 Netlify、Vercel、または独自のサーバーなどのプラットフォームでホストします。 API Server インスタンスがアクセス可能であることを確認し、src/main.js の API ベース URL を サーバーのパブリック URL に更新してください。
本番環境では、デプロイマシン用に構成された CData API Server ライセンスが必要です。 利用可能なライセンスの確認と見積もりはこちらから行えます。
さらに詳しく知りたい方は、CData API Server の無料トライアルを開始して、 アプリの可能性を無限に広げましょう。データベース、SaaS データ、カスタム API など、あらゆるデータソースとの統合が可能です。