Claude CodeのHandsontableプラグインでデータグリッドとHyperFormulaを実装する

handsontable-skillsプラグインを入れると、Claude Codeが表計算風のデータグリッド(Handsontable)と、その数式エンジン(HyperFormula)を、製品側が書いた指針に沿って実装するようになります。中身はスキル2つだけです。MCPサーバーもフックも含まれません。

ここではClaude Codeでの導入、2つのスキルの使い分け、依頼の書き方、v18系で実際に踏みやすい落とし穴を順に説明します。

プラグインの中身はスキル2つだけ

マーケットプレイスのページは、このプラグインを「HandsontableとHyperFormula向けのClaudeスキル」と説明しています。HandsontableはJavaScriptのデータグリッドコンポーネント、HyperFormulaはUIを持たない表計算の計算エンジンです。提供元はHandsontable社で、リポジトリの .claude-plugin/marketplace.json には handsontable-skills という名前のプラグインが1つだけ登録されています。

スキル	担当	向く場面
`handsontable`	担当データグリッド本体	向く場面Webアプリに編集できる表を置く
`hyperformula`	担当計算エンジン単体	向く場面UIなしで数式を評価する

handsontable スキルが扱うのは、React・Angular・Vue 3・素のJavaScriptでの導入、設定、テーマ、セルタイプ、並べ替えと絞り込み、フック、性能、移行です。hyperformula スキルは、インスタンスの作成、セルの読み書き、カスタム関数、名前付き式、エラー処理、バッチ操作、Node.jsでの利用をカバーします。

READMEは使い分けを一文で示しています。画面に表を出すなら handsontable、サーバー側の料金計算やwhat-if分析のようにUIなしで数式を評価するなら hyperformula です。両スキルは互いを参照し合う作りです。

同梱MCPがあるわけではない

プラグインがMCPサーバーを抱える型もありますが、このプラグインは違います。入るのはスキルのフォルダ(SKILL.md と references/)だけです。リポジトリ構成を見ても、skills/ の下に2つのスキルがあるだけで、.mcp.json に相当するファイルはありません。

READMEの設計方針も、公式ドキュメントの複製ではなく「製品をどう考えるか」を教える概念中心のスキルだと述べています。SKILL.md は500行未満に抑え、詳細は references/ に逃がして必要なときだけ読ませる構成です。仕組みの詳細はスキルの解説にあります。

導入手順

手順

マーケットプレイス経由の導入

1
マーケットプレイスを追加する
Claude Codeのプロンプト欄に、スラッシュコマンドとして入力します。ターミナルのコマンドではありません。
2
プラグインをインストールする
同じくプロンプト欄で /plugin install を実行します。2つのスキルが一緒に入ります。
3
再読み込みする
Claude Codeを再起動するか、/reload-plugins を実行します。

READMEが推奨する入力は次の2行です。

/plugin marketplace add handsontable/handsontable-skills
/plugin install handsontable-skills@handsontable-skills

入れたあとは、スキルを名指しする必要はありません。READMEによれば、Claude Codeが依頼の内容に応じて handsontable と hyperformula を自動で読み込みます。handsontable の description には、HotTable、@handsontable/react-wrapper、「編集できる表をWebアプリに入れたい」、コピー&ペースト、固定行、結合セルなどの語がきっかけとして並んでいます。マーケットプレイスの全体像はプラグインとマーケットプレイスの解説が詳しい資料です。

プラグインを使わない入れ方

READMEは、環境ごとに別の入口を用意しています。

環境	方法
Cowork / claude.ai	方法GitHubのリリースから `handsontable.zip` と `hyperformula.zip` を取得し、チャットへドラッグするか、Settings → Features → Skillsからアップロードする
Claude Code(手動)	方法リポジトリをcloneし、`skills/handsontable` と `skills/hyperformula` を `~/.claude/skills/`(全プロジェクト)か `.claude/skills/`(1プロジェクト)へコピーする
Claude API	方法2つのフォルダをSkills APIへアップロードする
npm	方法`npm install @handsontable/hyperformula-skill`(hyperformulaスキルのみ)
Codexなど	方法`npx skills add handsontable/handsontable-skills --agent codex --global --skill '*' --copy --yes`

手動コピーは、新しいリリースが出るたびにgit pullして入れ直す必要があります。プラグイン経由なら、更新はプラグインのバージョンが上がったときに配られます。READMEによると、スキルを変更するPRではCIがプラグインのパッチ版を自動で上げる仕組みです。

依頼の書き方

スキルを入れた状態でも、依頼は普通の日本語で足ります。ただし前提を渡したほうが、スキルが選ぶ分岐が狂いません。

フレームワーク(React 18以上など)と、TypeScriptの有無
用途が非商用か商用か(ライセンスキーの値が変わる)
数式をグリッド内で使うのか、サーバー側で計算するのか

依頼の例です。

ReactのHotTableで、請求明細の編集グリッドを作って。
列は品名・数量・単価・金額。金額は数量×単価を数式で出し、
下に合計行を置く。HyperFormulaで計算して、非商用のライセンスキーで。

handsontable スキルの記述に沿うと、手順は次の形になります。以下は公式スキルのサンプルに沿った例示であり、Claudeの実際の出力ではありません。

npm install handsontable @handsontable/react-wrapper hyperformula

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import { HyperFormula } from 'hyperformula';
import 'handsontable/styles/handsontable.min.css';
import 'handsontable/styles/ht-theme-main.min.css';
 
registerAllModules();
 
<HotTable
  themeName="ht-theme-main"
  data={[
    ['りんご', 3, 120, '=B1*C1'],
    ['みかん', 5, 80, '=B2*C2'],
  ]}
  formulas={{ engine: HyperFormula }}
  colHeaders={true}
  rowHeaders={true}
  height="auto"
  licenseKey="non-commercial-and-evaluation"
/>

注目点は3つあります。hyperformula を別途インストールしていること、formulas に HyperFormula のクラスをそのまま渡していること、height と licenseKey を明示していることです。いずれも、次の節で触れる罠を避ける書き方です。

複数シートで同じ計算エンジンを共有したいときは、HyperFormula.buildEmpty で外部インスタンスを作り、licenseKey に 'internal-use-in-handsontable' を渡して、各 HotTable の formulas.engine に同じものを渡します。シート名を変えれば =SUM(Sheet1!A:A) のようなシート間参照が使えます。

v18系で踏みやすい落とし穴

スキルの Common Pitfalls 節が、実際に事故になりやすい点をまとめています。ここは公式ドキュメントを読むだけでは気づきにくい部分です。スキルに注意点が書かれているため、Claudeは実装時にそれを参照できます。

ライセンスキーがないとグリッドが閉じられない

v18.1以降、licenseKey が未設定または不正だと、グリッドの上に閉じられないモーダルが出て操作できなくなります。v18.0では、グリッドの下に通知が出るだけでした。ローカル開発、CI、E2Eテスト、Storybook、デモのビルドなど、これまで通知を無視していた環境で突然壊れます。

対策は、すべての環境のすべてのインスタンスに有効なキーを渡すことです。非商用なら 'non-commercial-and-evaluation' を使います。キーは初期化時に一度だけ読まれ、updateSettings() で渡し直しても再評価されないため、変えたいときはインスタンスを作り直します。期限切れの商用キーはグリッドをブロックせず、通知とコンソールエラーだけです。ブロックされるのは、期限切れの試用キーが猶予期間を過ぎた場合に限られます。

高さを指定しないとグリッドの大きさが安定しない

height を指定しないグリッドは、これまでも縦に潰れるなど挙動が安定しませんでした。v18.1では、width だけを指定して height がないグリッドが縦に潰れるケースが直っています。ただしスキルは、版をまたいで大きさを予測しやすくするため、"auto"、ピクセル値、CSSの文字列のいずれかで必ず明示するよう勧めています。

HyperFormulaが同梱されなくなった

v18で handsontable のパッケージは依存を持たなくなり、HyperFormulaは別途インストールして formulas.engine に渡す形に変わりました。古い記事のコードをそのまま写すと、数式が動きません。

古いパッケージとCSSの指定

v17で @handsontable/react と @handsontable/angular は廃止され、@handsontable/react-wrapper と @handsontable/angular-wrapper に移りました
handsontable.full.min.css もv17で削除され、handsontable/styles/handsontable.min.css とテーマファイルの組み合わせになりました
hot.undo() と hot.redo() のコアメソッドはv17で削除され、hot.getPlugin('undoRedo').undo() を使います

日付・数値の書式オプション

v18でmoment.jsとnumbroが外れ、日付はISO 8601の元データと Intl.DateTimeFormat 形のオプション、数値は Intl.NumberFormat 形の numericFormat と列ごとの locale で指定する形に変わりました。旧来の文字列形式の dateFormat や numericFormat.pattern は、無視されるかコンソールに警告が出ます。

その他

afterChange は初期データ読み込み時にも source === 'loadData' で発火するため、状態へ書き戻すときはsourceを確かめないとループします
ヘッダー、コンテキストメニュー、ダイアログに信頼できないHTMLを出すなら、v18以降は sanitizer 関数を自分で渡します(DOMPurifyが同梱から外れたため)
数式は、ネストしたオブジェクトの配列をデータにした場合は動きません。配列の配列かフラットなオブジェクトにします

落とし穴

スキルが古いと、新しいバージョンの変更に追いつけない

スキルは製品リリースに合わせた「スナップショット」です。READMEによると、更新は製品リリースと公式ドキュメント、ブログ記事がすべてそろったあとに作られ、メンテナーがAPI名を確かめてからマージされます。プロジェクトが使っているHandsontableのバージョンが、スキルの対象より新しい場合は、その差分を疑ってください。スキル自身も、その場合は最新のドキュメントで確認するよう促しています。

CLAUDE.mdに足しておくと安定する断片

スキルは依頼の文脈から自動で呼ばれますが、プロジェクトの前提をCLAUDE.mdに書いておくと、毎回の依頼で繰り返さずに済みます。次は一例です。

## データグリッド
- 表は Handsontable(@handsontable/react-wrapper)を使う
- 数式は HyperFormula を formulas.engine に渡す。別途 npm install が必要
- licenseKey は全環境で必須。開発・CIは 'non-commercial-and-evaluation'、本番は環境変数から読む
- height は必ず明示する

実装後は、Claudeに次のような検証を回させると取りこぼしが減ります。

npm run build と型検査を実行させ、licenseKey と height の指定漏れがないか自分で確かめさせる
テスト環境(CIやStorybook)にも同じキーが渡っているかをコードから追わせる
数式セルを含むグリッドをレンダリングし、=B1*C1 のようなセルの計算結果が期待どおりかをテストで確認させる

3つ目は特に、サーバー側で hyperformula を単体で使う場合に効きます。UIがないぶん、結果の確認はテストコードで行うことになるからです。

費用とライセンスの境界

スキルはMITライセンスですが、HandsontableとHyperFormula自体は別ライセンスです。READMEの表によると、区分は次のとおりです。

	Handsontable	HyperFormula
非商用	Handsontable無料(`non-commercial-and-evaluation`)	HyperFormula無料(GPLv3、`gpl-v3`)
商用	Handsontable有償(開発者あたり年額、HyperFormulaを含む)	HyperFormula有償(ユーザーあたり年額)

商用のHandsontableライセンスは、グリッド内で使うHyperFormulaを含みます。HyperFormulaを単体でUIなしに使うなら、別途の購入が必要です。スキルが入っていても、ライセンス上の判断までは肩代わりしません。商用利用では、導入前に料金ページと契約条件を確かめるのが先です。

まとめ

handsontable-skillsは、実行基盤を増やさず「製品の癖」だけをClaude Codeに渡す軽いプラグインです。入れて損が出にくい一方で、効果が出るのはHandsontableを使うと決めたあとです。ライブラリ選定そのものは助けてくれません。

最初に確かめる価値があるのは、licenseKey を全環境に通すことと、hyperformula を別途入れることの2点です。この2つはv18以降の定番のつまずきで、スキルの落とし穴の節にも書かれています。

Claude CodeのHandsontableプラグインでデータグリッドとHyperFormulaを実装する

プラグインの中身はスキル2つだけ

同梱MCPがあるわけではない

導入手順

プラグインを使わない入れ方

依頼の書き方

v18系で踏みやすい落とし穴

ライセンスキーがないとグリッドが閉じられない

高さを指定しないとグリッドの大きさが安定しない

HyperFormulaが同梱されなくなった

古いパッケージとCSSの指定

日付・数値の書式オプション

その他

最新ドキュメントを引くには別にMCPを足す

CLAUDE.mdに足しておくと安定する断片

費用とライセンスの境界

まとめ

Claude Codeとは — できること・料金・始め方と使い方の全体像

Claudeのbio-researchプラグインで機器データをASM JSONに変換する

Claudeのvalidate-dataで分析を共有前に点検する手順と使いどころ

Claudeのwrite-specスキルで機能仕様書(PRD)を書く手順

Claudeのsprint-planningスキルでスプリント計画と容量見積もりを作る

Claudeのmetrics-reviewで週次・月次の指標レビューを回す手順

プラグインの中身はスキル2つだけ

同梱MCPがあるわけではない

導入手順

プラグインを使わない入れ方

依頼の書き方

v18系で踏みやすい落とし穴

ライセンスキーがないとグリッドが閉じられない

高さを指定しないとグリッドの大きさが安定しない

HyperFormulaが同梱されなくなった

古いパッケージとCSSの指定

日付・数値の書式オプション

その他

最新ドキュメントを引くには別にMCPを足す

CLAUDE.mdに足しておくと安定する断片

費用とライセンスの境界

まとめ

関連する記事

Claude Codeとは — できること・料金・始め方と使い方の全体像

Claudeのbio-researchプラグインで機器データをASM JSONに変換する

Claudeのvalidate-dataで分析を共有前に点検する手順と使いどころ

Claudeのwrite-specスキルで機能仕様書(PRD)を書く手順

Claudeのsprint-planningスキルでスプリント計画と容量見積もりを作る

Claudeのmetrics-reviewで週次・月次の指標レビューを回す手順