Angularは、TypeScriptをベースとしたオープンソースのフロントエンドフレームワークです。宣言的なUI構築、データバインディング、ルーティング、状態管理など、Webアプリケーション開発に必要なあらゆる機能を提供するフルスタックなフレームワークで、特に大規模で複雑なエンタープライズアプリケーションに最適です。
Angularではフレームワークの機能拡張だけでなく、開発効率の向上にも力を入れて取り組んでいます。コマンドラインツールのAngular CLIを使用することで、非常に簡単にAngularアプリケーションを作成することが可能です。
JavaScript UIライブラリ「Wijmo（ウィジモ）」はAngularをサポートしており、Angularの標準的な方法でグリッド、チャート、入力などのエンタープライズ向けの高機能なUIコンポーネントを利用することができます。
本記事では、Angular CLIとWijmoを使用してグリッドでデータ表示を行うAngularアプリケーションを、Angular 15で導入され、Angular 19でデフォルトのコンポーネントとして使用されるようになった、スタンドアロンコンポーネントの形式で作成する方法を紹介します。
開発環境
- Wijmo（Version 5.20251.34）
- Node.js（Version 22.16.0）
- Angular（Version 19.2.0）
Angularアプリケーションを作成する
npm installコマンドを実行して、Angular CLIパッケージをグローバルにインストールします。インストール済みの場合は不要です。
npm install -g @angular/cli上記のコマンドを実行することでAngularの最新版がインストールされますが、以下のように「@」の後ろにバージョンを指定することで特定のバージョンをインストールすることもできます。
npm install -g @angular/cli@19.x.xなお、使用するWijmoのバージョンに応じてサポートされるAngularのバージョンは異なります。詳しくは以下のページをご覧ください。
※ 2025年6月時点の最新はAngular 20ですが、本記事ではWijmo 2025J v1がサポートするAngular 19を使用します。
インストールが完了したら、以下のコマンドでAngular CLIのバージョン等を確認できます。
ng version
ng newコマンドを実行して、Angularアプリケーションを作成します。
ng new wijmo-angular-quickstart使用するスタイルシートの種類と、SSRとSSGを有効化するか聞かれるので、「CSS」を選択し、SSRとSSGは「No」を選択します。
※ WijmoはCSR（クライアントサイドレンダリング）のみサポートします。
アプリケーションプロジェクトのフォルダに移動して、npm startコマンドを実行すると、開発サーバー上でアプリケーションが実行されます。ブラウザで「http://localhost:4200/」にアクセスすると、以下の画面が表示されます。
cd wijmo-angular-quickstart
npm start
開発サーバーの起動を確認したらCtrl+Cキーを押して終了しておきます。
Wijmoのパッケージをインストールする
npm installコマンドを実行して、Wijmoのパッケージをアプリケーションにインストールします。
npm install @mescius/wijmo.angular2.all上記のコマンドを実行することでWijmoの最新版がインストールされますが、以下のように「@」の後ろに製品バージョンを指定することで特定のバージョンをインストールすることもできます。
npm install @mescius/wijmo.angular2.all@5.20251.34「src\styles.css」にWijmoのスタイルをインポートします。
@import '@mescius/wijmo.styles/wijmo.css';「src\app\app.component.ts」にFlexGridを含む必要なモジュールとカルチャーをインポートします。
import { Component, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { WjGridModule, WjFlexGrid } from '@mescius/wijmo.angular2.grid';
import '@mescius/wijmo.cultures/wijmo.culture.ja';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, WjGridModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
data: any[];
@ViewChild('flex') flex!: WjFlexGrid;
constructor() {
this.data = [
{ id: 15, product: 'ピュアデミグラスソース', date: '2025/01/10', amount: 6000 },
{ id: 17, product: 'だしこんぶ', date: '2025/01/08', amount: 14500 },
{ id: 18, product: 'ピリカラタバスコ', date: '2025/01/12', amount: 4000 },
{ id: 84, product: 'なまわさび', date: '2025/01/21', amount: 8000 }
];
}
init = () => {
console.log(this.flex);
}
}「src\app\app.component.html」を以下のように書き換え、「wj-flex-grid」要素を追加します。
<wj-flex-grid #flex [itemsSource]="data" class="grid" (initialized)="init()">
<wj-flex-grid-column header="商品名" binding="product" [width]="200"></wj-flex-grid-column>
<wj-flex-grid-column header="受注日" binding="date" [width]="120"></wj-flex-grid-column>
<wj-flex-grid-column header="金額" binding="amount" [width]="100" format="c"></wj-flex-grid-column>
</wj-flex-grid>「src\app\app.component.css」にFlexGridに適用するスタイルを定義します。
.grid {
width: 470px;
height: 200px;
}以上の手順で、クイックスタートアプリケーションの作成は完了です。
npm startコマンドを実行して「http://localhost:4200」にアクセスすると、AngularアプリケーションにWijmoのFlexGridコンポーネントが表示されていることを確認できます。
さいごに
以上がAngularを使用してWijmoのデータグリッド「FlexGrid」でデータ表示を行うWebアプリケーションを作成する方法でした。
製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。