新卒がHandsontableでツールチップデザイン変更に挑戦！想像以上に苦戦した話

システムエンジニア
藤井萌惠

2025年12月21日掲載

みなさんこんにちは、システムエンジニアの藤井です。

この記事は、2025年のソフトバンクアドベントカレンダーの21日目の記事です。

システムのフロント改修をしていると、初めて触るライブラリが、思わぬ落とし穴を含んでいることがあります。今回取り組んだHandsontableを使った画面のデザイン変更もまさにその一例でした。

正直なところ、「デザインを少し変えるだけならCSSの変更ですぐ終わるだろう」と思っていました。しかし、いざ改修を進めてみると、原因の特定に時間を費やすことになり、予想以上に苦戦しました。

本記事では、その時に直面した課題と解決の手がかり、そして過程で得た知見について共有したいと思います。

1 - Handsontableとは？

Handsontableとは、下記画像のようなスプレッドシートライクなUIを手軽に実現できるJavaScriptのライブラリです。

データの編集やフィルター、ソートなどの操作が可能で、Web上に表機能を簡単に組み込めるのが特徴です。
公式デモページから、実際に操作を体験することができるので、ぜひ見てみてください。

Handsontable公式サイト

図１：Handsontableの実装イメージ

2 - 取り組んだ内容と、デザインまわりでの苦戦

2-1 - CSSで挑戦してみるも失敗

今回は、Handsontableのセルにマウスホバーしたときに表示されるツールチップの背景色変更に取り組みました。

図２：Handsontableのセルにマウスホバーしたときの
ツールチップのイメージ

はじめは CSS の調整だけで対応できると考えていました。しかし、既存のツールチップはHTMLの title 属性によって表示されていて、title 属性はブラウザ標準のツールチップ機能であるため CSSを適用できないという制約がありました。

そのため、下記のようにCSS を変更しても反映されず、別の方法を検討する必要が出てきました。

.custom-Tooltip {
background-color: #fdaa06; // 背景色を変更
}

2-1 - （余談）擬似要素も試してみた

CSSの変更で挑戦する中で、擬似要素を使ってツールチップを再現する方法も試してみました。

擬似要素は、実際のHTML構造には存在せず、見た目だけの要素を追加できる仕組みです。

しかし、擬似要素を使ってもうまく反映はできませんでした。

GitHub Copilot も活用しながら調査を進めた結果、Handsontable のセルは、テーブルの描画時にDOMが動的に生成されるような仕組みになっていることがわかりました。

つまり、Handsontable ではセルのDOMが再生成されると、擬似要素を付与した元の要素が別の要素に置き換えられ、結果としてツールチップが表示されなくなる、というのが原因でした。

2-2 - DOMを動的に生成することで成功

最終的には、JavaScript で動的にツールチップを生成・削除するようなコードを新たに追加することで解決しました。

具体的には、下記のコードをHandsontableのセルのRenderで呼び出し、安定したツールチップ表示を実現しています。

図３：Handsontable描画の仕組みイメージ

// ツールチップのDOMを作る
showCustomTooltip (event) {
  this.hideCustomTooltip() // 既にツールチップがあれば削除
  const tooltip = document.createElement('div')
  tooltip.innerHTML = '<b>' + ツールチップに表示させたいテキスト + '</b>'
  tooltip.id = 'custom-tooltip-popup'
  tooltip.style.position = 'fixed'
  tooltip.style.background = '#fdaa06' // 背景色
  tooltip.style.pointerEvents = 'none' // ポインターイベントを無効化
  tooltip.style.left = event.clientX + 10 + 'px'
  tooltip.style.top = event.clientY + 10 + 'px'
  document.body.appendChild(tooltip)
},

// 既にあるツールチップを削除する
hideCustomTooltip () {
  const old = document.getElementById('custom-tooltip-popup')
  if (old) old.remove()
},

3 - ライブラリの内部処理理解の重要性

UI実装において、利用しているライブラリの内部処理を意識する視点は、今後の開発でも確実に役立つと感じています。

通常の DOM 操作であれば追加した要素にそのままスタイルを適用できます。しかし、Handsontable はスクロールなどのタイミングでテーブルを頻繁に再描画するため、手動で追加した要素が想定通り残らない場合があります。

このHandsontable の描画の仕組みを理解できたことで、ようやく問題の原因にたどり着きました。
そして、「ライブラリが DOM をどう操作しているのかを知ることが、正しくUIを作るうえで欠かせない」ということが今回の改修で得た最も大きな学びです。

4 - AI活用についての学び

Handsontable の中でも一部の機能（ツールチップの表示部分）しか触れていませんが、それでも思ったようにスタイル適用するのが難しく、既存ライブラリの仕組みを理解する大変さを実感しました。ただ、その都度調べて、手を動かしてみることで、少しずつ仕組みを理解していくことができたと思います。

今回、調査や実装にGitHub Copilot を活用しながら進めて行きましたが、AIを補助的に使いながら理解を深めていく力も、今後の開発で重要になると感じました。
理解が伴わないままコードだけ得てもスキルとして定着しないため、今後もAIを活用しつつ自分で考える姿勢を忘れずにいたいと思います。

また、この課題解決において、GitHub Copilot の提案が大いに助けになった一方で、「提案されたコードがライブラリの仕組みに適合するか」を判断する力も必要だと強く感じました。
Handsontable のように独自のレンダリングサイクルを持つライブラリでは、 Copilot が生成したコードは、そのままでは正しく動かない場面もありました。

そのため、提案を鵜呑みにせず、“AI を査読しながら使う姿勢”が重要だと実感しています。

5 - まとめ

本記事では、Handsontable を使ったツールチップデザイン変更の過程で直面した課題と、そこから得た学びを紹介しました。

初めて触るライブラリということもあり、思うように進まない場面も多くありましたが、試行錯誤を重ねる中で少しずつ理解を深めていくことができました。

また、GitHub Copilot などのAIツールを活用しながら、自分で調べ、考え、納得して進める姿勢の大切さも実感できたのは、今後に向けた良い気付きだったと思います。これからも技術的な気付きを積み重ねていきたいです。

この記事が、これから Handsontable をカスタマイズする方にとって同じ悩みを解決するためのヒントになれば幸いです。

＼業務課題をデジタルで支援／

デジタルツールの選定から導入の手引きまで、中小規模のお客さまへわかりやすくお伝えします。

中小規模のお客さま向けサイトをみる

メールマガジン登録（無料）
ビジネスに役立つ記事やウェビナー情報をお届けします。