【OSS公開】VanillaJS製 Excel風テーブルライブラリ「vanillajs-excelike-table」v2.2.4 アップデートのお知らせ
pfkbn172
今回の記事は JavaScriptエンジニア向け です。
以前ご紹介した「vanillajs-excelike-table」が、v1.5.3からv2.2.4へと大幅にバージョンアップしました。今回は主にエンジニア視点での技術的な改善を中心にお伝えします。
純粋なJavaScriptでフレームワークに依存しないので多くの環境で、数行の記述で簡単に利用可能です。
基本的な機能は
- フィルタ
- ソート
- ページャー
- 列幅調整
- 設定のLocalStorage保存
さらに以下の設定メニューが利用可能です。
利用者の利便性を考えるとフィルタの使い勝手は重要なのですがJSのライブラリで良いものが無料ではないため作成しました。
フィルタはExcelに近い機能を実現しています。
今回のアップデートの主なポイント
- モジュールシステムの大幅改善 - ESM/CommonJS/Browser対応のマルチビルド化
- 言語選択機能の追加 - 多言語対応を実装
- テストの強化 - PlaywrightによるE2Eテスト追加
- パッケージサイズの最適化 - 不要な依存関係の削除
- 開発者体験の向上 - READMEの大幅改善と使用例の充実
以下のリンクからnpmで仕様をご確認ください。
https://www.npmjs.com/package/vanillajs-excelike-table
VanillaJSで環境を選ばないのでWordpressでも簡単に適用可能です。下表はデモになります。
1. モジュールシステムの大幅改善
v2.0系からモジュールシステムを根本的に見直し、現代的なJavaScriptプロジェクトに最適化しました。
マルチビルド対応
package.jsonのexportsフィールドを活用し、以下の3つのビルドを提供しています：
{
"type": "module",
"main": "./dist/excelike-table.cjs", // CommonJS用
"module": "./dist/excelike-table.js", // ESM用
"browser": "./dist/excelike-table.browser.js", // ブラウザ用
"exports": {
".": {
"import": "./dist/excelike-table.js",
"require": "./dist/excelike-table.cjs",
"browser": "./dist/excelike-table.browser.js",
"types": "./dist/excelike-table.d.ts"
},
"./styles": "./dist/excelike-table.css",
"./dist/*": "./dist/*"
}
}これにより、Vite、Webpack、Next.js、Nuxt.jsなど、あらゆるモダンなビルドツールでシームレスに動作します。
使用例の違い
// ESM (Vite, Webpack 5+, 現代的なプロジェクト)
import ExceLikeTable from 'vanillajs-excelike-table';
import 'vanillajs-excelike-table/styles';
// CommonJS (Node.js、SSR)
const ExceLikeTable = require('vanillajs-excelike-table');
// CDN (ビルドツール不要)
<script src="https://cdn.jsdelivr.net/npm/vanillajs-excelike-table@latest/dist/excelike-table.browser.js"></script>2. 言語選択機能の追加
ユーザー向けの新機能として、多言語対応を実装しました。テーブルの設定画面から簡単に切り替えが可能です。
const table = new ExceLikeTable('#container', {
data: myData,
columns: myColumns,
locale: 'ja' // 'ja' または 'en'
});言語設定はユーザーの選択を記憶し、次回以降も自動的に適用されます。
3. テストインフラの強化
品質保証のため、Playwrightを導入してE2Eテストを追加しました。
// package.jsonに追加されたテストスクリプト
{
"scripts": {
"test": "NODE_OPTIONS=--experimental-vm-modules jest",
"test:unit": "NODE_OPTIONS=--experimental-vm-modules jest tests/unit",
"test:integration": "NODE_OPTIONS=--experimental-vm-modules jest tests/integration",
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui",
"test:e2e:headed": "playwright test --headed"
}
}これにより、ユニットテスト、統合テスト、E2Eテストの3層でカバレッジを確保しています。
4. 開発者体験の向上
READMEを大幅に改善し、以下の内容を追加しました：
- ビルドツールを使う場合とCDNを使う場合の明確な使い分け
- TypeScript対応の型定義例
- 実務で使える具体的な実装例（従業員管理、売上ダッシュボードなど）
- トラブルシューティングガイド
基本的な使い方（おさらい）
前回の記事でもご紹介しましたが、このライブラリの特徴は「設定不要ですぐ使える」点です。
CDNで即座に使う
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-excelike-table@latest/dist/excelike-table.css">
</head>
<body>
<div id="my-table"></div>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-excelike-table@latest/dist/excelike-table.browser.js"></script>
<script>
const table = new ExceLikeTable('#my-table', {
data: [
{ id: 1, name: 'Alice', age: 28 },
{ id: 2, name: 'Bob', age: 32 }
],
columns: [
{ key: 'name', title: '名前', dataIndex: 'name' },
{ key: 'age', title: '年齢', dataIndex: 'age' }
]
});
</script>
</body>
</html>npmでインストールして使う
npm install vanillajs-excelike-table<br>import ExceLikeTable, { ColumnHelpers } from 'vanillajs-excelike-table';
import 'vanillajs-excelike-table/styles';
const table = new ExceLikeTable('#container', {
data: employees,
columns: [
ColumnHelpers.text('name', '氏名'),
ColumnHelpers.number('salary', '給与', { currency: '¥' }),
ColumnHelpers.date('joinDate', '入社日'),
ColumnHelpers.status('status', 'ステータス', {
'在籍': '#52c41a',
'休職': '#faad14',
'退職': '#ff4d4f'
})
]
});技術スタック
- 言語: Pure JavaScript (Vanilla JS)
- ビルドツール: カスタムビルドスクリプト（Terser使用）
- テスト: Jest + Playwright
- 型定義: TypeScript定義ファイル同梱
- サポートブラウザ: モダンブラウザ（> 1%, last 2 versions, not dead, not IE 11）
インストールとドキュメント
npm:
https://www.npmjs.com/package/vanillajs-excelike-table
npm install vanillajs-excelike-tableOSS公開の背景
AIとバイブコーディングによって、私たちの開発サイクルはこれまでにないスピードに到達しました。こうした開発資産を自社だけに閉じるのではなく、OSSとして公開することで：
- 利用者の開発期間短縮
- 低コスト開発の実現
- 各社のDX推進への加速
に貢献できると考えています。
DX推進・業務アプリ開発をお考えの方へ
「vanillajs-excelike-table」を活用すれば、短期間・ローコストでのシステム開発が可能になります。
もし、業務に則したカスタマイズやDX推進のご相談があれば、ぜひお気軽にお問い合わせください。私たちは、OSS公開と併せて、実プロジェクトでのDX化を伴走するパートナーとしてもお手伝いします。
