はじめに
この記事では、業務系Webアプリで使われることの多い Wijmo について、
- Wijmoとは何か
- どんな特徴があるのか
- どうやってインストールするのか
- 最小構成でどう使うのか
をまとめてみました。
Wijmoとは何か
Wijmo（ウィジモ） は、
業務向けWebアプリケーションで利用される JavaScript製のUIコンポーネントライブラリ です。
一覧表（データグリッド）・チャート・入力フォームなど、
管理画面や社内システムで頻出するUI部品 が最初から揃っています。
特に有名なのが FlexGrid という高機能なデータグリッドで、
- 並び替え
- 編集
- グルーピング
- 仮想スクロール
といった機能を標準で備えています。
React / Vue / Angular などの主要フレームワークに対応しており、
「UIを一から作らず、安定した業務画面を素早く作る」ために採用されることが多いライブラリです。
Wijmoの特徴
① 業務向けに最適化された高機能コンポーネント
Wijmoは 業務用途を前提 に設計されています。
そのため、
- データ件数が多い
- 表示・編集・集計が複雑
- Excelライクな操作が求められる
といったケースに強いのが特徴です。
② フレームワーク非依存でも使える
Wijmoのコアは 特定のフレームワークに依存しません。
- 素のJavaScript
- React
- Vue
- Angular
いずれの環境でも利用できます。
「既存の古い画面に部分的に導入する」といったケースでも使われる理由のひとつです。
③ 商用ライセンス前提のライブラリ
Wijmoは OSSではありません。
- 開発時
- 本番配布時
それぞれでライセンスを意識する必要があります。
業務で利用する場合は、
必ず公式のライセンス条件を確認したうえで導入することが重要です。
（個人検証・学習用途ではトライアル版を利用可能）
インストール方法
JSでは、CDNを使う方法が最も簡単です。
方法① CDNを使う（おすすめ）
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
CSSは 必須
FlexGridを使う場合は wijmo.grid.min.js を読み込む
方法② npmでインストールする
npm install @grapecity/wijmo
<link rel="stylesheet" href="node_modules/@grapecity/wijmo.styles/wijmo.css">
<script src="node_modules/@grapecity/wijmo/controls/wijmo.min.js"></script>
<script src="node_modules/@grapecity/wijmo/controls/wijmo.grid.min.js"></script>
※ バンドラを使わない場合は、パスに注意してください。
サンプル（FlexGridを表示する）
以下は、HTML + JavaScriptだけでFlexGridを表示する最小例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Wijmo FlexGrid Sample</title>
<!-- Wijmo CSS -->
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.css">
<!-- Wijmo JS -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
</head>
<body>
<h1>Wijmo FlexGrid</h1>
<div id="grid" style="height: 300px;"></div>
<script>
const data = [
{ id: 1, name: 'Apple', price: 120 },
{ id: 2, name: 'Orange', price: 80 },
{ id: 3, name: 'Banana', price: 100 }
];
new wijmo.grid.FlexGrid('#grid', {
itemsSource: data,
isReadOnly: true,
headersVisibility: 'Column'
});
</script>
</body>
</html>
このサンプルで分かること
HTML要素を指定するだけでGridが生成される
JavaScriptの配列をそのまま表示できる
初期設定だけで業務向け一覧が完成する
まずは
「表示できる」→「設定を1つずつ変えてみる」
という触り方がおすすめです。
まとめ
Wijmoは 業務向けUIコンポーネントライブラリ
FlexGridは一覧画面に特に強い
バニラJavaScriptでも問題なく利用できる
CSS読み込み忘れはよくあるハマりポイント
最小構成ならHTML1枚で動かせる