Handsontableとは：18系の導入コードと保存処理・商用ライセンスで迷わない採用判断

Handsontableは、Excelのようにセルを選んで入力・コピー・貼り付けできる表をWeb画面に組み込むJavaScriptライブラリです。ポーランドのHandsoncode社が開発しており、2026年10月29日にnpm registryで確認した最新版は18.1.2（10月7日公開）でした。この記事では、18系の構成と配布サイズ、npmで入れて業務表を出すまでのコード、編集結果をサーバーへ保存するときの行番号のずれ、数式エンジンHyperFormulaの扱い、数万行での描画設定、そして無償キーが使えない条件と代替ライブラリへ回す判断までを扱います。Excelで回している業務をWebシステムへ移す開発者と、その技術選定を任された担当者に向けた内容です。

まとめ：Handsontableを業務画面に採用する条件と無償では使えない場面の境界

Handsontableが向くのは、利用者がExcelと同じ手つきで大量のセルを直す画面です。範囲選択からのコピー貼り付け、ドラッグでの連続入力、列ごとの入力チェックが最初から揃っており、自作すると数か月かかる操作系を設定で済ませられます。発注明細や予算表、マスタの一括修正画面が典型です。

ただし7.0.0以降はオープンソースではありません。会社の業務で使う画面は、社内向けであっても商用ライセンスの購入が前提になります。閲覧中心の一覧や、予算をかけられない社内ツールなら、MITライセンスのAG Grid CommunityやJspreadsheet CEで足ります。18系を選ぶ場合、17系以前の記事にあるラッパー名やCSSファイル名はそのまま使えない点にも注意してください。

Handsontableの定義とExcel風に編集できる機能範囲・18系の配布構成

Handsontableは、一般に「データグリッド」と呼ばれる表コンポーネントの一種です。そのなかでも、表示よりも入力と修正の操作感に重心を置いている点が特徴になります。

データグリッドとスプレッドシートUIの違いとHandsontableの立ち位置

データグリッドは、行と列でデータを並べ、並べ替えや絞り込みをする部品の総称です。AG GridやTabulatorも同じ分類に入ります。これらは「一覧を見せて、必要なら1セル直す」使い方が出発点です。

Handsontableの出発点は逆です。複数セルの範囲選択、Excelからの貼り付け、右下のハンドルを引いて値を複製する操作など、表計算ソフトの手つきを再現することを主目的にしています。GitHubリポジトリのスター数は2026年10月29日時点で22,071件あり、この分野では最も参照されている部類です。ただし、ファイル保存や複数シートの管理まで持つ「Web版Excel」ではありません。

コピー貼り付け・連続入力・絞り込みなど標準で揃う編集機能の一覧

Handsontableの機能はプラグイン単位で分かれており、設定のキーで有効・無効を切り替えます。業務画面でよく使うものを整理しました。

枠の固定には、上端行のfixedRowsTopと先頭列のfixedColumnsStartを指定します。まず有効にすべきなのは、貼り付けと元に戻すの2つです。Web化後もExcelで下書きして貼る運用はほぼ残るため、取り消しが効かないと誤った貼り付けがそのまま保存されます。

18.1.2時点のパッケージ構成と配布ファイルのサイズ実測比較

npm registryの18.1.2は、実行時の依存パッケージが0件です。公式の変更履歴によると、18.0.0（2026年6月30日）でコアがTypeScriptへ書き直され、numbro・moment.js・DOMPurify・Pikadayへの依存が外れました。日付や数値の表示は、ブラウザ標準のIntl系APIに寄せる方針です。

サイズは小さくありません。jsDelivrから取得したdist/handsontable.min.jsは1,319,336バイトで、gzip圧縮しても約319KBでした。handsontable.full.min.jsは1,884,652バイト（gzip約451KB）です。2026年10月21日に同じ方法で測ったChart.js 4.5.1のUMD版は約71KBだったので、グラフライブラリと同じ感覚で全ページに読み込むと初期表示が重くなります。表を使う画面だけで読み込むよう、ルート単位でコードを分割してください。

npmでHandsontable 18系を入れて業務表を表示するまでの導入手順

ここでは発注明細を編集する表を例に、表示から入力チェックまでのコードを示します。バンドラにはViteを想定しています。

インストールとCSSテーマ読み込み・licenseKey指定の最小コード

公式のInstallationページどおり、npmで本体を入れます。

npm install handsontable@18

次に、表を置く要素とJavaScriptを用意します。Themesのページでは、15.0以降はテーマの読み込みが必須で、基本CSSとテーマCSSの両方を読む必要があると明記されています。組み込みテーマはmain・horizon・classicの3種類です。

// main.js：発注明細の編集表（index.html に <div id="orders"></div> を置く）
import Handsontable from 'handsontable';
import 'handsontable/styles/handsontable.min.css';
import 'handsontable/styles/ht-theme-main.min.css';

const orders = [
  { id: 101, code: 'A-001', name: '六角ボルトM8', qty: 120, unit: '本' },
  { id: 102, code: 'A-002', name: '平ワッシャーM8', qty: 240, unit: '個' },
  { id: 103, code: 'B-010', name: '結束バンド200mm', qty: 50, unit: '袋' },
];

const hot = new Handsontable(document.querySelector('#orders'), {
  data: orders,
  theme: 'ht-theme-main',
  colHeaders: ['品番', '品名', '数量', '単位'],
  columns: [
    { data: 'code', readOnly: true },
    { data: 'name' },
    { data: 'qty', type: 'numeric', validator: 'numeric', allowInvalid: false },
    { data: 'unit', type: 'dropdown', source: ['本', '個', '袋', '箱'] },
  ],
  rowHeaders: true,
  height: 360,
  undo: true,
  licenseKey: 'non-commercial-and-evaluation', // 評価用。本番は購入したキーに差し替える
});

licenseKeyを省くと、18.1.0以降は閉じられないモーダルが表示され、表そのものが操作できなくなります。License keyのページによると、キーを途中で差し替えるにはupdateSettings()では足りず、インスタンスを作り直す必要があります。複数画面で使うなら、Handsontable.defaults.licenseKeyに起動時に1回だけ設定する形が扱いやすいです。

React・Vue・Angularのラッパー選びと17.0で消えた旧パッケージ名

フレームワーク向けのラッパーは、17.0.0（2026年3月9日）で旧パッケージが削除されました。Reactなら@handsontable/reactではなく@handsontable/react-wrapperを使います。npm上でも旧パッケージは16.2.0で更新が止まっており、新しいほうは本体と同じ18.1.2です。

React版のInstallationページでは、npm install handsontable @handsontable/react-wrapperで両方を入れ、HotTableコンポーネントにdataやlicenseKeyをpropsで渡す形が示されています。VueはVue 3向けの@handsontable/vue3、Angularは@handsontable/angular-wrapperで、後者は18.0からAngular 19以上が前提です。社内の標準フレームワークがまだ決まっていない場合は、ReactとVue 3の違いを先に整理しておくと、ラッパー選びで迷いません。

列ごとのセル型とバリデーターで入力ミスを止める設定と既定値の罠

セル型は列ごとにtypeで指定します。numeric・checkbox・dropdown・autocomplete・password・intl-dateなどがあり、18.1.0では日時用のintl-datetimeも加わりました。

見落としやすいのはバリデーターの既定動作です。allowInvalidの既定値はtrueで、検証に落ちた値もデータへ書き込まれ、セルに赤いhtInvalidクラスが付くだけで終わります。数量欄に「百二十」と入っても、そのまま保存処理へ流れるわけです。上のコードのようにallowInvalid: falseを付ければ、正しい値になるまでエディタが閉じません。組み込みの検証名はnumeric・date・time・dropdown・autocompleteの5つで、品番の書式チェックのような業務固有のルールは関数で書いて登録します。

編集結果をサーバーへ保存する処理と数式・大量行で詰まる箇所の対策

表が出たあとに工数がかかるのは、保存・数式・性能・貼り付けの安全性です。入門記事ではほとんど触れられていません。

afterChangeで差分だけ送る保存処理と並べ替え後の行番号のずれ

セルの変更はafterChangeフックで受け取ります。引数は[[行, 列, 変更前, 変更後], ...]の配列です。ここでの行番号は「画面上の並び順」であり、並べ替えや絞り込みをすると元データの順番とずれます。行番号をそのまま配列の添字に使うと、別の行を更新してしまいます。

// 変更されたセルだけをまとめて送る（行番号は画面上の順番なので元データの行に変換する）
hot.addHook('afterChange', (changes, source) => {
  if (!changes || source === 'loadData' || source === 'updateData') return;

  const payload = changes
    .filter(([, , oldValue, newValue]) => oldValue !== newValue)
    .map(([visualRow, prop, , newValue]) => {
      const record = hot.getSourceDataAtRow(hot.toPhysicalRow(visualRow));
      return { id: record.id, field: prop, value: newValue };
    });

  if (payload.length === 0) return;

  fetch('/api/orders/cells', {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  });
});

Excelから100行を貼り付けると、1回のafterChangeで数百セル分の変更が届きます。1セルずつAPIを呼ぶとサーバー側の更新が競合しやすいため、上のように1回の送信にまとめるのが安全です。画面側の検証はすり抜けられる前提で、同じチェックをサーバー側にも置いてください。受け口をSpring Bootで作るなら、Spring BootとReactの連携方法のREST APIとCORSの章がそのまま当てはまります。

HyperFormulaの別インストールとGPLv3ライセンスキーの扱い

セルに=SUM(C1:C3)のような数式を書かせたい場合は、Handsontable社の数式エンジンHyperFormulaを組み合わせます。Formula calculationのページによると、18.0以降は本体に同梱されなくなったため、別途インストールします。

npm install hyperformula

// main.js（抜粋）
import { HyperFormula } from 'hyperformula';

new Handsontable(container, {
  data,
  formulas: {
    engine: {
      hyperformula: HyperFormula,
      licenseKey: 'gpl-v3', // GPLv3で配布できる案件だけ。社内の非公開システムは購入キー
    },
  },
  licenseKey: 'non-commercial-and-evaluation',
});

注意点はライセンスが本体と別であることです。HyperFormula 3.5.0はnpm上でGPL-3.0-onlyと表示されます。公式の料金ページでも、無償で使えるのは非商用かオープンソースの案件に限られ、それ以外は商用ライセンスが必要とされています。もう1つ、数式はオブジェクトの入れ子になったデータに対応しておらず、getSourceData()も使えません。上の保存処理と数式を両立させるには、データを配列の配列で持つ設計に寄せる必要があります。

数万行を描画するときの行高固定とbatchによる再描画の抑制

Handsontableは画面に見えている範囲のセルだけをDOMに描く仮想化を標準で行うため、行数そのものより「1回の描画でどれだけ計算するか」が性能を左右します。Performanceのページで挙げられている手当ては次の順で効きます。

1. colWidthsとrowHeightsで幅と高さを固定し、自動計算を止める
2. 複数の更新をhot.batch(() => { ... })で包み、描画を最後の1回にまとめる
3. セルごとに条件を評価するcells関数を、columnsの定義やsetCellMeta()で置き換える
4. それでも重ければpaginationを有効にして、一度に扱う行数を減らす

計測にはbeforeRenderとafterRenderフックで時刻を取る方法が案内されています。18.1.0の変更履歴には、大量データでの描画・スクロール・並べ替えの改善とメモリ削減が記載されているため、性能で困っているなら17系以前から上げるだけで改善する可能性があります。

貼り付けたHTMLの扱いとsanitizer設定を18.1系で見直す理由

Excelやブラウザからの貼り付けは、テキストだけでなくHTMLとして届くことがあります。18.1.0の変更履歴には、貼り付けたHTMLでスクリプトが実行される問題の修正と、sanitizerオプションの適用範囲拡大が記載されています。17.0.0で追加されたこのオプションは、表に入る文字列を無害化する関数を差し込む仕組みです。

17系以前で止めている案件には、この修正が入っていません。独自のHTMLレンダラーを書いた画面ほど影響を受けやすいので、18.1系へ上げてsanitizerを通しているか確認してください。

Handsontableのライセンス区分と商用で無償キーが使えない条件

採用判断で最も揉めるのがライセンスです。ここでは「自社の案件で無償キーを使ってよいか」の判定に絞って整理します。

無償の評価用キーが認める利用範囲と社内業務システムでの商用判定

npmパッケージに同梱されたLICENSE.txtは、用途によって2種類のライセンスに分かれると定めています。商用目的とは「商業上の利益や金銭的な対価を意図する、またはそれにつながる」利用のことです。無償の条件が適用されるのは、厳密に個人的な利用か、本番環境の外で適合性や性能を試す評価目的に限られます。

この定義に従うと、会社の業務システムは社内向けで売り物でなくても、業務の効率化という利益につながるため商用側に入ります。つまりnon-commercial-and-evaluationキーのまま本番に載せる運用は認められません。料金ページに価格の掲載は無く、45日間の試用版のあとは営業への見積もり依頼になります。契約形態の詳細は別途確認が必要ですが、予算確保のタイミングは要件定義の段階に置いてください。OSSライセンスとの違いを整理したい場合はオープンソースライセンスの主要9種と商用利用の可否が前提知識になります。

MITだった6.2.2を新規案件で使い続ける選択が割に合わない理由

Handsontableは6.2.2（2018年12月19日公開）までMITライセンスでした。7.0.0（2019年3月6日）から現在の独自ライセンスに切り替わったため、無償で使い続けるために6.2.2に固定する例が今もあります。kintone向けの解説記事でも6.2.2が使われています。

結論として、新規案件で6.2.2を選ぶべきではありません。7年近く更新が無く、前の章で触れた貼り付け時のスクリプト実行の修正やアクセシビリティ改善は入りません。テーマやラッパーの仕組みも現行版と別物なので、公式ドキュメントのコードがほぼ流用できなくなります。費用を抑えたいなら、古い版に固定するより、MITで保守が続いている別のライブラリへ移るほうが長期の保守費は小さくなります。

Handsontableを採用する案件と見送ってOSSやBIへ回す案件の判断基準

ここまでの機能と費用を踏まえ、どの案件で採用し、どの案件で見送るかを条件で切り分けます。

採用してよい条件はExcel操作の再現度が入力工数を左右する画面

採用を勧めるのは、次の3条件がそろう画面です。1つ目は、利用者が1日に数百セル以上を手で直すこと。2つ目は、Excelからの貼り付けや連続入力を使えないと、Web化によって作業時間が延びること。3つ目は、商用ライセンスの費用を、削減できる入力工数と比べて説明できることです。

生産計画の数量調整、予算編成の部門別入力、商品マスタの一括修正が典型です。範囲選択や取り消しを自作すると、操作系の実装とテストだけでライセンス費を上回りやすくなります。

見送る場面は閲覧中心の一覧・予算ゼロの社内ツール・ブック管理が主役の画面

逆に、次の場面ではHandsontableを選びません。1セルずつ直す程度の一覧画面、ライセンス費を一切出せない社内ツール、複数シートやファイル保存まで要る画面です。代わりの候補は次のとおりです。

以前よく比較されたLuckysheetは、npmの最終版が2021年1月の2.1.13で、GitHubリポジトリもアーカイブ済みです。新規採用は避け、後継にあたるUniverを候補にしてください。また、表の目的が集計結果を眺めることなら、編集UIを作らずBIツールやグラフ表示で済む場合もあります。グラフ側の選び方はChart.jsとはで整理しています。

Excel業務をWeb化する前に決めておく入力ルールと権限の線引き

Handsontableを入れても、Excel時代の運用ルールが曖昧なままだと失敗します。誰がどの列を直せるか、貼り付けで他人の行を上書きしたときにどう戻すか、同時に2人が同じ行を直したらどちらを残すか。この3点を決めないまま表だけを移すと、Excelの共有ファイルで起きていた事故がWeb上で再現されます。どこまでがExcelのまま回せる範囲かはエクセル管理の限界はどこかで条件を整理しています。

列単位のreadOnlyはログイン利用者の権限から組み立て、行の更新には版番号を持たせて後勝ちの上書きを防ぐ、といった設計はHandsontableの外側の仕事です。表の操作感と、裏側の権限・排他・監査ログを一体で設計する場合は、業務用・Webアプリ開発として要件の段階から相談いただけます。

よくある質問：Handsontableの無料利用・kintone連携・代替ライブラリ

Handsontableの導入検討でよく出る質問に、2026年10月29日時点の公式情報をもとに答えます。

Handsontableは無料で使えますか？

個人的な利用と、本番環境の外での評価・テストに限って無料です。この場合はlicenseKeyにnon-commercial-and-evaluationを指定します。会社の業務で使う画面は社内向けでも商用利用にあたり、購入したライセンスキーが必要です。料金は公開されておらず、45日間の試用版を経て見積もりを依頼する流れになります。

kintoneの一覧をHandsontableでExcelのように編集できますか？

できます。kintoneのJavaScriptカスタマイズで一覧画面に表を描き、変更をkintoneのREST APIで書き戻す構成が一般的です。ただし、公開されている解説の多くはMITだった6.2.2を前提にしています。kintoneを業務で使っている時点で商用利用にあたるため、現行版を使うならライセンス購入が必要です。カスタマイズの範囲や内製と外注の分け方は、kintoneカスタマイズ・開発とはで整理しています。

ReactでHandsontableを使うときのパッケージ名は何ですか？

18系では@handsontable/react-wrapperです。以前の@handsontable/reactは17.0.0で削除され、npm上も16.2.0で止まっています。古い記事のコードを写すとインポート文が合わずビルドが通らないため、本体と同じ版番号のラッパーを入れ、HotTableコンポーネントを使ってください。

Excelの関数はどこまで使えますか？

数式エンジンHyperFormulaを組み合わせると、SUMやIFなどの関数をセルで計算できます。18.0以降は別途インストールしてformulasオプションに渡す方式です。本体とは別ライセンスで、無償で使えるのはGPLv3で公開できる案件に限られます。社内の非公開システムでは、本体と合わせて数式エンジンの費用も見込んでください。

無料で使えるHandsontableの代替ライブラリはありますか？

用途によって選べます。表計算風の入力ならJspreadsheet CE（MIT）、閲覧中心の一覧ならAG Grid Community（MIT）やTabulator（MIT）、複数シートを持つ表計算ならUniver（Apache-2.0）が候補です。ただし貼り付けや取り消しの完成度ではHandsontableが先行しており、入力量が多い画面ほど差が出ます。無償の代替で操作感を試作し、利用者が受け入れるかを確かめてから決めると判断を誤りません。

関連記事

• 業務アプリとは？業務システムとの違い・作り方3通りと内製と外注の判断基準：表を組み込む業務アプリ全体の作り方を選ぶ前提です
• エクセル管理の限界はどこか｜プロジェクト・工程・案件管理で崩れる条件と専用ツールへ移る判断基準：Web化に踏み切るかどうかの判断材料になります
• オープンソースライセンスとは？主要9種の商用利用可否と義務を条項番号で解説：代替ライブラリのMIT・Apache-2.0・GPLv3の違いを確認できます
• Chart.jsとは？v4.5の導入コードと大量データの限界・他ライブラリとの選び分け：表と並べて置くグラフの実装に進むときに役立ちます
• ReactとVue 3の違いを比較｜どっちを選ぶべきか【React 19.3・Vue 3.5対応】：ラッパー選びの手前にあるフレームワーク選定です