JavaScript、Node.js、MariaDB を用いた DevExtreme PivotGrid で数百万件のレコードを取得・表示するプログラミング解説
2024-07-27
このチュートリアルでは、JavaScript、Node.js、MariaDB を用いて、数百万件のレコードを DevExtreme PivotGrid で効率的に取得・表示する方法について解説します。
前提知識
このチュートリアルを理解するために、以下の知識が必要です。
- JavaScript
- Node.js
- MariaDB
- DevExtreme PivotGrid
環境設定
まず、以下の環境が必要です。
- Node.js 14 以降
- npm 7 以降
- MariaDB サーバー
プロジェクトの作成
以下のコマンドで新しい Node.js プロジェクトを作成します。
npm init -y
npm install express sequelize mysql2 devextreme-pivotgrid
データベースの設定
MariaDB サーバーにデータベースを作成し、以下のテーブルを作成します。
CREATE TABLE `data` (
`id` INT PRIMARY KEY AUTO_INCREMENT,
`name` VARCHAR(255) NOT NULL,
`value` DECIMAL(10,2) NOT NULL
);
Sequelize の設定
config.js ファイルを作成し、Sequelize 接続設定を記述します。
const Sequelize = require('sequelize');
const sequelize = new Sequelize('database_name', 'username', 'password', {
host: 'localhost',
dialect: 'mysql',
});
module.exports = sequelize;
モデルの作成
models/data.js ファイルを作成し、Data モデルを定義します。
const Sequelize = require('sequelize');
const sequelize = require('../config');
const Data = sequelize.define('data', {
id: {
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true,
},
name: {
type: Sequelize.STRING(255),
allowNull: false,
},
value: {
type: Sequelize.DECIMAL(10,2),
allowNull: false,
},
});
module.exports = Data;
データの取得
routes/index.js ファイルを作成し、DevExtreme PivotGrid で表示するデータを取得する API エンドポイントを作成します。
const express = require('express');
const Data = require('../models/data');
const DevextremePivotGrid = require('devextreme-pivotgrid');
const router = express.Router();
router.get('/data', async (req, res) => {
const data = await Data.findAll();
const pivotGridDataSource = {
items: data,
fields: [
{ dataField: 'name', caption: '名前' },
{ dataField: 'value', caption: '値', dataType: 'number' },
],
};
res.json({
dataSource: pivotGridDataSource,
});
});
module.exports = router;
index.html ファイルを作成し、DevExtreme PivotGrid を設定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PivotGrid</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/dx.common.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/dx.pivotgrid.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/dx.all.js"></script>
</head>
<body>
<div id="pivotGrid"></div>
<script>
const pivotGrid = new DevExpress.PivotGrid('#pivotGrid', {
dataSource: {
store: {
type: 'custom',
load: function(params) {
fetch('/data')
.then(response => response.json())
.then(data => {
params.load(data.dataSource);
});
},
},
},
npm init -y
npm install express sequelize mysql2 devextreme-pivotgrid
CREATE TABLE `data` (
`id` INT PRIMARY KEY AUTO_INCREMENT,
`name` VARCHAR(255) NOT NULL,
`value` DECIMAL(10,2) NOT NULL
);
const Sequelize = require('sequelize');
const sequelize = new Sequelize('database_name', 'username', 'password', {
host: 'localhost',
dialect: 'mysql',
});
module.exports = sequelize;
const Sequelize = require('sequelize');
const sequelize = require('../config');
const Data = sequelize.define('data', {
id: {
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true,
},
name: {
type: Sequelize.STRING(255),
allowNull: false,
},
value: {
type: Sequelize.DECIMAL(10,2),
allowNull: false,
},
});
module.exports = Data;
const express = require('express');
const Data = require('../models/data');
const DevextremePivotGrid = require('devextreme-pivotgrid');
const router = express.Router();
router.get('/data', async (req, res) => {
const data = await Data.findAll();
const pivotGridDataSource = {
items: data,
fields: [
{ dataField: 'name', caption: '名前' },
{ dataField: 'value', caption: '値', dataType: 'number' },
],
};
res.json({
dataSource: pivotGridDataSource,
});
});
module.exports = router;
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PivotGrid</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/dx.common.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/dx.pivotgrid.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/dx.all.js"></script>
</head>
<body>
<div id="pivotGrid"></div>
<script>
const pivotGrid = new DevExpress.PivotGrid('#pivotGrid', {
dataSource: {
store: {
type: 'custom',
load: function(params) {
fetch('/data')
.then(response => response.json())
.then(data => {
params.load(data.dataSource);
});
},
},
},
fields: [
{ dataField: 'name', caption: '名前' },
{ dataField: 'value', caption: '値', dataType: 'number' },
],
});
</script>
</body>
</html>
実行
以下のコマンドを実行してサーバーを起動します。
node index.js
数百万件のレコードを効率的に取得・表示する方法：代替手段と詳細解説
データの取得を最適化する
Paginate データ
大量のデータを一度に取得するのではなく、ページングを使用してデータを分割して取得することで、パフォーマンスを向上させることができます。
Sequelize では、limit と offset オプションを使用して、取得するレコード数を制限し、オフセットを指定することができます。
const data = await Data.findAll({
limit: 1000,
offset: (req.query.page - 1) * 1000,
});
WHERE 句を使用する
必要なデータのみを返すために、WHERE 句を使用してクエリを絞り込むことができます。
const data = await Data.findAll({
where: {
value: {
[Op.gt]: 100,
},
},
});
GROUP BY 句を使用する
集計が必要な場合は、GROUP BY 句を使用してデータをグループ化することができます。
const data = await Data.findAll({
group: ['name'],
attributes: [
[Sequelize.fn('sum', 'value'), '合計値'],
],
});
仮想化を使用する
DevExtreme PivotGrid は、仮想化を使用して、一度にすべてのレコードをレンダリングする代わりに、必要なレコードのみをレンダリングすることで、パフォーマンスを向上させることができます。
pivotGrid.option({
virtualization: true,
});
データ整形をサーバー側で行う
可能な限り、データ整形をサーバー側で行い、クライアント側での処理を減らすことで、パフォーマンスを向上させることができます。
集計をサーバー側で行う
- ハードウェア: より高速な CPU とより多くの RAM を搭載したサーバーを使用すると、パフォーマンスを向上させることができます。
- ネットワーク: 高速なネットワーク接続を使用すると、データの転送速度を向上させることができます。
- インデックス: 適切なインデックスを作成することで、データベースのパフォーマンスを向上させることができます。
- BigQuery: Google BigQuery は、ペタバイト級のデータを処理できるクラウドベースのデータウェアハウスです。
- Amazon Redshift: Amazon Redshift は、ペタバイト級のデータを処理できるクラウドベースのデータウェアハウスです。
- Apache Spark: Apache Spark は、大規模なデータセットを処理するためのオープンソースの分散処理フレームワークです。
javascript node.js mariadb
