【OSS公開】JSのExcel風テーブルライブラリ「vanillajs-excelike-table」バージョンアップのお知らせ
pfkbn172
今回の記事は JavaScriptエンジニア向け です。
私たちは、業務アプリケーションに必須となる「Excel風の高機能テーブルライブラリ」をOSSとして公開しています。
AIとバイブコーディングを活用することで、開発期間を大幅に短縮できました。
その恩恵を自社だけで囲うのではなく、利用者や社会全体の開発効率化に貢献するため、引き続き無料のOSSとして公開します。
今回の大きな改修点：条件付き書式に対応
今回のバージョンアップでは、条件付き書式 機能を追加しました。
これにより、例えば次のような実装が可能になります：
- JS無料ライブラリではあまりない、基本的な条件付き書式機能を標準装備
- 対象セルと行全体の適用範囲選択
- 優先順位を書式設定一覧画面で調整
Excelライクな操作感を保ちながら、フロントエンドでのデータ可視化をさらに強化できます。
下のサンプルテーブルの右上歯車アイコンの設定から条件付き書式で操作可能です。
フレームワーク非依存、純粋なVanillaJS
このライブラリは VanillaJSで記述 されており、React / Vue / Angular などのフレームワークに依存しません。
つまり、
- 純粋なJavaScript環境
- 既存のフレームワークに組み込み
- シンプルなWebページへの導入
どのケースでも利用可能です。
よく使う基本機能でフィルタやソート機能の充実した無料のJSライブラリがないことから作成しています。
DB連携やセル内編集、より高度な書式設定等は適宜実装なさってください。
npmで公開中ですので、外部依存を減らしたり、自分のテーマやプラグインにバンドルして使うならnpmからDLしてご使用ください。
https://www.npmjs.com/package/vanillajs-excelike-table
ExcelikeTable を JavaScript プロジェクトに導入する簡単手順
CDNからの読み込なら、インストールもなく下の記述だけで簡単に実装できます。
<!-- ▼ テーブルを表示するコンテナ -->
<div id="excelike-table-container" style="height: 600px; margin: 20px 0;"></div>
<!-- ▼ ライブラリのCSSを読み込み -->
<link rel="stylesheet" href="https://unpkg.com/vanillajs-excelike-table@1.5.3/dist/excelike-table.min.css">
<!-- ▼ ライブラリ本体のJSを読み込み -->
<script src="https://unpkg.com/vanillajs-excelike-table@1.5.3/dist/excelike-table.min.js"></script>
<script>
// ▼ ダミーの営業データを120件自動生成 データがある場合はこの部分は不要です。
document.addEventListener('DOMContentLoaded', function() {
const sampleData = [];
const staffList = ["佐藤","鈴木","高橋","田中","伊藤","渡辺","山本"];
const customerList = ["株式会社A","株式会社B","株式会社C","株式会社D","株式会社E"];
const productList = ["ノートPC","タブレット","モニター","プリンタ","スマホ"];
for(let i=1; i<=120; i++){
const staff = staffList[Math.floor(Math.random()*staffList.length)];
const customer = customerList[Math.floor(Math.random()*customerList.length)];
const product = productList[Math.floor(Math.random()*productList.length)];
const qty = Math.floor(Math.random()*20)+1; // 1〜20個
const price = Math.floor(Math.random()*50000)+10000; // 1万〜6万円
const date = new Date();
date.setDate(date.getDate()-Math.floor(Math.random()*60)); // 過去60日以内
const formattedDate = date.toISOString().split("T")[0];
sampleData.push({
id: i,
staff,
customer,
product,
quantity: qty,
unitPrice: price,
total: qty*price,
date: formattedDate
});
}
//ここまではダミーデータ生成部分です
// ▼ カラム定義（列の表示内容と機能設定）
const columns = [
ColumnHelpers.number('id', 'ID', { width:60, sortable:true, filterable:true }),
ColumnHelpers.text('staff', '担当者', { width:120, sortable:true, filterable:true }),
ColumnHelpers.text('customer', '顧客名', { width:120, sortable:true, filterable:true }),
ColumnHelpers.text('product', '商品', { width:120, sortable:true, filterable:true }),
ColumnHelpers.number('quantity', '数量', { width:80, sortable:true, filterable:true }),
ColumnHelpers.number('unitPrice', '単価', { width:100, sortable:true, filterable:true, currency:'¥' }),
ColumnHelpers.number('total', '売上合計', { width:120, sortable:true, filterable:true }),
ColumnHelpers.date('date', '成約日', { width:120, sortable:true, filterable:true, filterType:'date-hierarchy' })
];
// ▼ テーブルの初期化処理
try {
new ExceLikeTable('#excelike-table-container', {
preset: 'excel', // Excelライクな見た目・操作性
data: sampleData, // データをバインド
columns: columns, // カラム設定
rowKey: 'id', // 行識別キー
// ▼ ページネーション設定
pagination:{
pageSize: 20, // 1ページの件数
showSizeChanger: true, // 件数変更ドロップダウンを表示
pageSizeOptions: [10,20,50] // 選択可能な件数
},
// ▼ 利用可能な機能のリスト
features:[
'sorting', // 並び替え
'filtering', // フィルタリング
'pagination', // ページ分割
'columnResizing', // 列幅の変更
'columnPinning', // 列の固定
'columnSettings', // 設定ボタンを表示（右上ギアアイコン）
'persistSettings' // 設定を保存（リロードしても維持）
]
});
} catch(e){
console.error('テーブル初期化失敗', e);
}
});
</script>
OSS公開の背景
AIとバイブコーディングによって、私たちの開発サイクルはこれまでにないスピードに到達しました。
こうした開発資産を自社だけに閉じるのではなく、OSSとして公開することで：
- 利用者の開発期間短縮
- 低コスト開発の実現
- 各社のDX推進への加速
に貢献できると考えています。
DX推進・業務アプリ開発をお考えの方へ
「vanillajs-excelike-table」を活用すれば、
短期間・ローコストでのシステム開発が可能になります。
もし、業務に即したカスタマイズやDX推進のご相談があれば、ぜひお気軽にお問い合わせください。
私たちは、OSS公開と併せて、実プロジェクトでのDX化を伴走するパートナーとしてもお手伝いします。
