対象読者
- Next.jsのServer ActionsとWijmoの連携方法を学びたい開発者
- 国産の商用UIライブラリに魅力を感じている開発者
前提環境
筆者の検証環境は以下の通りです。
- macOS Tahoe 16.0.1
- Node.js 25.2.0
- npm 11.6.2
- Next.js 15.4.10
- React 19.2.0
- Prisma 6.19.0
- MySQL 8.0
- Wijmo 5.20252.42
企業製UIライブラリという選択肢
オープンソースライブラリには、メンテナンス停止リスクや悪意のあるコードの混入リスク、依存関係の複雑さといった課題があります。一方、商用ライブラリは継続的なサポート、安定性、長期運用の観点で安心感があります。
「Wijmo」は、メシウス（旧グレープシティ）が開発するJavaScriptライブラリです。FlexGrid、Chart、Input系コントロールなど豊富なUIコンポーネントを提供し、React、Angular、Vue.jsなど主要フレームワークに対応しています。特にFlexGridはExcel風の操作感と大量データ対応、ソート・フィルター機能が強みです。日本語ドキュメント・サポートも充実しています。
本記事では、Next.js App RouterのServer ActionsとWijmoの連携方法、FlexGridを使った実践的なCRUDアプリケーションの実装、Server ComponentとClient Componentの使い分けを学びます。
本記事で作成するアプリケーション
本記事では、商品注文データを管理するCRUDアプリケーションを実装します。WijmoのInputNumberやInputDateコントロールを使った登録フォーム、FlexGridによるデータ一覧表示とインライン編集、ソート・フィルター機能、削除ボタンを備え、すべての機能がServer Actionsを通じてサーバーサイドと連携します（図1）。
