業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリ「Wijmo(ウィジモ)」はフロントエンドで動作するので、言語を問わず様々なバックエンドのWebアプリケーションと連携が可能です。
今回はPHPで書かれたWebアプリケーションフレームワーク「Laravel(ララベル)」の最新バージョン「Laravel 11」のフロント部分にWijmoのデータグリッドコントロール「FlexGrid(フレックスグリッド)」を組み込み、データの生成(Create)、読込(Read)、更新(Update)、削除(Delete)を行うCRUDアプリケーションを作成する方法をご紹介します。

開発環境
- PHP 8.1.12
- Laravel 11.11.1
事前準備
今回はバックエンドとしてLaravel 11で作成したWeb APIと連携するアプリケーションを作成します。あらかじめ以下の記事の手順の通りにLaravelでWeb APIのアプリケーションを準備してください。
LaravelでCRUDアプリケーションの作成
ViteとWijmoのインストール
以前のバージョンのLaravelではJSファイルやCSSファイルなどのアセットのバンドルツールとして「Laravel Mix」が使用されていましたが、Laravel 11ではデフォルトのビルドツールとして「Vite」が使用されるようになりました。
プロジェクト作成時に自動で作成される「package.json」にはデフォルトでViteとLaravelプラグインの設定が記述されているので、こちらの記事で作成したプロジェクトのディレクトリ(laravel-web-api)配下で以下のコマンドを実行し、各パッケージのインストールを行います。
※ あらかじめNode.jsのインストールが必要です。
npm install
続けて以下のコマンドを実行し、Wijmoのパッケージのインストールも行います。
npm install @mescius/wijmo.purejs.all
上記のコマンドを実行することでWijmoの最新版がインストールされますが、以下のように「@」の後ろに製品バージョンを指定することで特定のバージョンをインストールすることもできます。以下は「2024J v1」を指定してインストールする場合の例です。
npm install @mescius/wijmo.purejs.all@5.20241.9
Bladeテンプレートの作成
各パッケージのインストールが完了したら「resources/views/wijmo.brade.php」を新たに追加し、ViewとなるBladeテンプレートを作成します。テンプレートの中ではFlexGridを表示する領域とデータ更新用のボタンを定義し、加えて@vite
ディレクティブを使用してJSとCSSをインポートしています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Wijmo x Laravel</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div class="container">
<button id="update" class="btn">データの更新</button><br/>
<div id="flexGrid" class="grid"></div>
</div>
<script>
</script>
</body>
</html>
「http://127.0.0.1:8000/wijmo」にアクセスしたときに上記のBladeテンプレートの内容が表示されるよう、「routes/web.php」にルーティングの設定を追加します。
・・・(中略)・・・
Route::get("/wijmo", function() {
return view("wijmo");
});
Wijmoの組み込み
「resources/js」フォルダ配下に「crud.js」を追加し、以下のようにWijmoのライブラリのインポートやFlexGridの初期化処理、FlexGridへのデータの表示、登録、更新、削除の処理を記載します。url
にはこちらの記事で作成したAPIのURLを設定します。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。
import '@mescius/wijmo.styles/wijmo.css';
import '@mescius/wijmo.cultures/wijmo.culture.ja';
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjCore from '@mescius//wijmo';
wjCore.setLicenseKey('ここにライセンスキーの文字列を設定します');
const url = 'http://127.0.0.1:8000/api/items/';
document.addEventListener("DOMContentLoaded", function () {
let cv = new wjCore.CollectionView();
cv.trackChanges = true;
let columnsdata = [
{ binding: 'id', header: 'ID', width:80 },
{ binding: 'product', header: '商品名', width:250 },
{ binding: 'order_date', header: '受注日', dataType: 'Date', format: 'yyyy/M/d', width:120 },
{ binding: 'order_count', header: '受注数', width: 80 },
];
let flexGrid = new wjGrid.FlexGrid('#flexGrid', {
itemsSource: cv,
autoGenerateColumns: false,
columns: columnsdata,
allowAddNew: true,
allowDelete: true
});
//GET
wjCore.httpRequest(url, {
success: function (xhr) {
cv.sourceCollection = JSON.parse(xhr.response, reviver);
}
});
document.getElementById('update').addEventListener('click', function () {
//PUT
for (var i = 0; i < cv.itemsEdited.length; i++) {
wjCore.httpRequest(url + cv.itemsEdited[i].id, {
method: 'PUT',
data: cv.itemsEdited[i]
});
}
//POST
for (var i = 0; i < cv.itemsAdded.length; i++) {
wjCore.httpRequest(url, {
method: 'POST',
data: cv.itemsAdded[i]
});
}
//DELETE
for (var i = 0; i < cv.itemsRemoved.length; i++) {
wjCore.httpRequest(url + cv.itemsRemoved[i].id, {
method: 'DELETE'
});
}
cv.itemsEdited.length > 0 &&
alert(cv.itemsEdited.length + "件のデータを更新しました。");
cv.itemsAdded.length > 0 &&
alert(cv.itemsAdded.length + "件のデータを登録しました。");
cv.itemsRemoved.length > 0 &&
alert(cv.itemsRemoved.length + "件のデータを削除しました。");
});
}
);
function reviver(key, val) {
// 先頭から"yyyy-mm-dd"の文字列を日付データと判断
if (typeof (val) == "string" &&
val.match(/^\d{4}-\d{2}-\d{2}/)) {
return new Date(Date.parse(val)); // Date型に変換
} return val;
}
加えて、作成した「crud.js」をresources/js/app.jsにインポートします。
import './crud'
さらに「resources/css/app.css」でFlexGridやボタンに適用するスタイルの定義を追加します。
.grid {
width: 575px !important;
height: 450px;
}
.btn {
margin-bottom: 10px;
}
以上の手順で、Wijmoの組み込みは完了です。以下のコマンドを実行しViteの開発サーバーを起動します。
npm run dev
Viteの開発サーバーが起動した状態で別のターミナルを開き、以下のコマンドを実行してLaravelのアプリケーションを起動します。
php artisan serve
「http://127.0.0.1:8000/wijmo」に接続すると、WijmoのFlexGrid上にAPIから取得したデータが表示されていることを確認できます。

登録、更新、削除処理の動作確認
データの登録(CREATE)
FlexGridの一番下の行にデータを入力することで新規データの登録が可能です。データの入力には既存データをコピー&ペーストして入力することも可能です。データ入力後[データの更新]ボタンを押下するとAPIに登録のリクエストを送信できます。
データの更新(UPDATE)
FlexGrid上で任意のデータを更新し、[データの更新]ボタンを押下するとAPIに更新のリクエストを送信できます。
データの削除(DELETE)
FlexGrid上で削除したい行を選択しDeleteキーを押下すると対象の行を削除できます。その後、[データの更新]ボタンを押下するとAPIに削除のリクエストを送信できます。
さいごに
以上がPHPのWebアプリケーションフレームワーク「Laravel」のフロント部分にWijmoのデータグリッドコントロール「FlexGrid」を組み込み、CRUD処理を行うアプリケーションを作成する方法でした。
製品サイトではWijmoを導入したばかりの方や、トライアル期間中の方向けに、Wijmoの概要や導入方法、基本的な使い方を紹介した「Wijmo利用ガイド」を公開しています。こちらも是非ご覧ください。
そのほか、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。