Server Actionsと「Wijmo」でCRUD処理可能なデータグリッドを手軽に実装しよう

　OSSのサプライチェーンリスクが意識される昨今、出自が明確なライブラリへの関心が高まっています。今回は、国内企業が開発しているUIライブラリとして、メシウス（旧グレープシティ）のJavaScriptライブラリ「Wijmo」をNext.jsと組み合わせて解説します。

対象読者

• 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）。

図1：完成したアプリケーション