業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリ「Wijmo（ウィジモ）」には、高速・軽量かつ多機能なデータグリッドコントロール「FlexGrid（フレックスグリッド）」コントロールが含まれています。
FlexGridは一覧表示だけでなく、グリッド上のデータを直接編集できる点が大きな特長ですが、入力されたデータの正常性を検証する「データ検証」機能は業務アプリケーションには欠かせない機能です。
FlexGridでは、このデータ検証を実現するための機能が提供されており、要件に応じて適切な方法を選択できます。
本連載では2回にわたりFlexGridにおける2つのデータ検証方法をご紹介します。本記事はその前編として、CollectionViewを利用したデータ検証について詳しく解説します。
目次
開発環境の準備
この記事では以下の開発環境を使用します。
今回作成するファイルは次の4つです。
| index.html | ページ本体。要素としてFlexGridコントロールを配置します |
|---|---|
| app.js | FlexGridコントロールを作成するコードを記載します |
| data.js | FlexGridコントロールに連結するデータを記載します |
| styles.css | 各種ページ要素のスタイルを設定するコードを記載します |
Wijmoの参照設定
WijmoのFlexGridコントロールを使用するには、専用のモジュールを環境にインストールする必要があります。CDNを参照したり、npmなどから入手したりする方法もありますが、今回は環境に直接モジュールを配置していきます。あらかじめWijmoの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。
製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。
- scripts/wijmo.grid.min.js
- scripts/wijmo.min.js
- scripts/cultures/wijmo.culture.ja.min.js
- css/wijmo.min.css
※ なお、npmを使ってWijmoの参照を行う場合は、ヘルプの「特定のパッケージをインストールする」に記載しているように、wijmo.gridパッケージに対してinstallコマンドを実行するだけでwijmo.gridが依存するパッケージも自動的にインストールされます。
FlexGridにデータを表示する
それでは、最初にベースとなる画面を作成していきます。前述のWijmoモジュールと「app.js」、「data.js」、および「styles.css」への参照設定をHTMLファイルに追加します。
※ CDNから参照する場合はコメントアウトされている部分とライブラリの参照先を入れ替えてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FlexGridコントロール活用編（5）</title>
<!-- ローカルのライブラリを参照する場合 -->
<link rel="stylesheet" href="css/wijmo.min.css" />
<script src="scripts/wijmo.min.js"></script>
<script src="scripts/wijmo.grid.min.js"></script>
<script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
<!-- CDNからライブラリを参照する場合 -->
<!-- <link rel="stylesheet" href="https://cdn.mescius.com/wijmo/5.20252.44/styles/wijmo.min.css" />
<script src="https://cdn.mescius.com/wijmo/5.20252.44/controls/wijmo.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20252.44/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20252.44/controls/cultures/wijmo.culture.ja.min.js"></script> -->
<link rel="stylesheet" href="css/styles.css">
<script src="scripts/app.js"></script>
<script src="scripts/data.js"></script>
</head>
<body>
<div>
<fieldset>
<legend>編集時に検証エラーが発生した場合の動作</legend>
<label><input type="checkbox" id="cbKeepEditMode" checked>編集モードを維持する</label>
</fieldset>
</div>
<div id="theGrid"></div>
</body>
</html>続いて「app.js」と「data.js」を次のように作成します。
表示するデータはFlexGridクラスのコンストラクタ内のitemsSourceプロパティで設定しています。このプロパティには配列データを直接設定することも可能ですが、今回はCollectionViewを利用してデータ検証機能を実装するため、あらかじめ生成したCollectionViewインスタンスを設定しています。なお、CollectionViewについては過去の記事で詳しく解説していますので、あわせてご参照ください。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。
wijmo.setLicenseKey('ここにWijmoのライセンスキーを設定します');
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
// データの作成
const view = new wijmo.collections.CollectionView(getOrderData());
// FlexGridコントロールの生成
const theGrid = new wijmo.grid.FlexGrid('#theGrid', {
itemsSource: view,// CollectionViewを設定
columns: [
{ binding: 'id', header: 'ID', width: 40 },
{ binding: 'ordercode', header: '受注コード', width: 120 },
{ binding: 'productname', header: '商品名', width: 180 },
{ binding: 'orderdate', header: '受注日', width: 120, format: 'yyyy/M/d' },
{ binding: 'deliverydate', header: '納品日', width: 120, format: 'yyyy/M/d' },
{ binding: 'amount', header: '金額', width: 100 },
]
});
}function getOrderData() {
return [
{ id: 1, ordercode: "12975-BR", productname: 'コーヒーマイルド', orderdate: new Date(2026, 1, 18), deliverydate: new Date(2026, 1, 21), amount: 6400, },
{ id: 2, ordercode: "12976-AJ", productname: '果汁100%ピーチ', orderdate: new Date(2026, 1, 19), deliverydate: new Date(2026, 1, 23), amount: 1760, },
{ id: 3, ordercode: "1297-KK", productname: 'チョコクリームアイス', orderdate: new Date(2026, 1, 20), deliverydate: new Date(2026, 1, 23), amount: 25200, },
{ id: 4, ordercode: "12978-LP", productname: 'モーニングブレッド', orderdate: new Date(2026, 1, 22), deliverydate: new Date(2026, 1, 23), amount: 11200, },
{ id: 5, ordercode: "12979-xc", productname: '果汁100%レモン', orderdate: new Date(2026, 2, 10), deliverydate: new Date(2026, 2, 12), amount: -100, },
{ id: 6, ordercode: "12980-OU", productname: '果汁100%グレープ', orderdate: new Date(2026, 2, 11), deliverydate: new Date(2026, 2, 13), amount: 41600, },
{ id: 7, ordercode: "12981-QW", productname: 'ライフマーガリン', orderdate: new Date(2026, 2, 15), deliverydate: new Date(2026, 2, 18), amount: 36400, },
{ id: 8, ordercode: "12982-MV", productname: '果汁100%グレープ', orderdate: new Date(2026, 2, 16), deliverydate: new Date(2026, 2, 15), amount: 2600, },
{ id: 9, ordercode: "12983-SB", productname: 'コーヒーマイルド', orderdate: new Date(2026, 2, 18), deliverydate: new Date(2026, 2, 20), amount: 8700, },
{ id: 10, ordercode: "12984-RH", productname: '果汁100%グレープ', orderdate: new Date(2026, 2, 22), deliverydate: new Date(2026, 2, 24), amount: 10400, },
];
}「styles.css」では、各種要素のスタイルを次のように定義します。
/* FlexGridのスタイル */
#theGrid {
border: 1px solid gray;
height: 360px;
width: 730px;
}
/* その他の要素のスタイル */
html {
font-family: Meiryo;
}
fieldset {
border: 1px solid gray;
border-radius: 8px;
margin-bottom: 15px;
width: 700px;
}
input {
font-family: Meiryo;
margin-left: 15px;
}この状態でサンプルを実行すると、以下の画像のようにデータ設定されたFlexGridが表示されます。なお、データ検証の機能とチェックボックスの処理はこの後の章で実装していきます。
データ検証機能を実装する
では次にデータ検証の機能を実装していきましょう。ここでは各列のデータに対して、以下のルールで検証を行います。
| 列 | 検証ルール |
|---|---|
| ID | なし |
| 受注コード | [数字5桁]-[英大文字2文字] |
| 商品名 | なし |
| 受注日 | 納品日以前の日付 |
| 納品日 | 受注日以降の日付 |
| 金額 | 正の値 |
今回はCollectionViewのgetErrorプロパティを使ってデータ検証機能を実装します。
getErrorにはデータに検証エラーが含まれているかどうかを判定するコールバック関数を設定します。このコールバック関数には下表の引数が渡され、検証の結果エラーと判定する場合はエラーメッセージを含む文字列を返し、エラーでない場合はnullを返すように実装します。
| getError引数 | 型 | 内容 |
|---|---|---|
| 第1引数（item） | any | データアイテム |
| 第2引数（prop） | string | 検証対象となるプロパティ名 |
| 第3引数（parsing） | boolean | 入力値がデータ型に解析できない場合にtrueとなるパラメータ |
それでは、「app.js」に以下のコードを追加し、CollectionViewのコンストラクタでgetErrorを設定するようにしましょう。
・・・（中略）・・・
// 受注コードの形式 [数字5桁]-[英大文字2文字] になっているか判定
function validateOrdercode(str) {
const regex = /^\d{5}-[A-Z]{2}$/;
return regex.test(str);
}
// データの作成
const view = new wijmo.collections.CollectionView(getOrderData(), {
// データ検証のルールを実装
getError: (item, prop, parsing) => {
// 値を列の型に変換できなかった場合
if (parsing) {
// 受注日・納品日
if (prop == 'orderdate' || prop == 'deliverydate') {
return '"yyyy/M/d"の形式で日付を入力してください。';
}
// 金額
if (prop == 'amount') {
return '数値を入力してください。';
}
return '入力形式に誤りがあります。';
}
// 値の検証
// 受注コード
if (prop == 'ordercode' && !validateOrdercode(item.ordercode)) {
return '[数字5桁]-[英大文字2文字]の形式で入力してください。';
}
// 受注日・納品日
if ((prop == 'orderdate' || prop == 'deliverydate') && item.orderdate > item.deliverydate) {
return '受注日が納品日以前になるように設定してください。';
}
// 金額
if (prop == 'amount' && item.amount < 0) {
return '正の値を入力してください。';
}
return null;
}
});
・・・（中略）・・・型解析に失敗した場合の処理
上記コードのgetErrorの前半では、parsingがtrueの場合の処理、つまり入力値を各列の型に変換できなかった場合の処理を行っています。
たとえば、「受注日」列はDate型でformatプロパティを'yyyy/M/d'に設定しているため、「2025/2/35」のような存在しない日付や、「2025年2月10日」といったフォーマットに一致しない値を入力した場合に、parsingがtrueに設定された状態でgetErrorが呼び出されます。
この部分の処理では、第2引数propで型変換のエラーが発生している列を特定し、対応するエラーメッセージを返しています。
独自の検証ルールの実装
後半はparsingがfalseの場合（型変換には成功している場合）で、ここに独自の検証ルールを実装しています。この際も第2引数propで対象となる列を特定し、第1引数itemの値がルールに則っているかを検証して、ルールに反している場合はエラーメッセージを返しています。
今回の例では、「受注コード」や「金額」は対象のプロパティ単体でエラーの有無を判定していますが、「受注日」と「納品日」のように、同一データアイテム内の別プロパティとの関係で判定が必要な場合もあります。そのような場合も、第1引数itemから別プロパティにアクセスし、条件に応じた検証を行うことが可能です。
設定済みのデータに対するエラー表示
ここまでの実装でサンプルを実行すると、設定済みのデータのうち検証エラーを含むセルが赤枠で示され、マウスオーバーするとエラーメッセージが表示されます。
編集時のエラー表示
また、セル編集でエラーを含む値を入力すると、入力完了時にエラーメッセージが表示され、編集を保存できない状態（編集モードが維持された状態）になります。これによって誤った値が保存されることを防ぐことができます。
編集時に検証エラーが発生した場合の動作を設定する
前の章では、セル編集時に検証エラーが発生した場合に、値を保存せずに編集モードが維持されることを確認しました。これはFlexGridのvalidateEditsプロパティがtrue（デフォルト）の場合の動作です。falseに設定することで、検証エラーが発生した場合にそのまま値を保存することも可能です。
「app.js」に以下のコードを追加し、チェックボックスでvalidateEditsの設定を切り替えるようにしましょう。
・・・（中略）・・・
// 編集時に検証エラーが発生した場合の動作を設定
const cbKeepEditMode = document.getElementById('cbKeepEditMode');
cbKeepEditMode.addEventListener('change', (e) => {
theGrid.validateEdits = cbKeepEditMode.checked;
});
・・・（中略）・・・サンプルを実行して、チェックボックスのチェックを外してから、セル編集で誤った値を入力すると誤った値がそのまま保存される動作となることが確認できます。
さいごに
今回はWijmoに含まれているFlexGridコントロールでデータ検証を行う方法として、CollectionViewのgetErrorを利用する方法を解説しました。
今回ご紹介した内容については以下のデモアプリケーションで確認できます（“Run Project”をクリックするとデモが起動します）。
また、製品サイトで公開しているデモアプリケーションにもCollectionViewのgetErrorを利用してデータ検証を実装している例がありますので、あわせてご参照ください。
Wijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらもぜひご覧ください。
製品サイトでは、Wijmoの機能を手軽に体験できるトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。