表を書くならCheetah Gridで！

表を書くなら Cheetah Gridで！ Sudo Mayu #vuesapporo

自己紹介須藤真由(Sudo Mayu) 内定先のFuture株式会社でシステム開発アルバイト中他にも・・・ JavaDoのスタッフ、修了した研究室で研究員アルバイトをきっかけにフロントもVueも触り始めた（歴5ヶ月） Vue
fes Japan 2026にも参加予定 #vuesapporo

「表」、書きますよね？ #vuesapporo

FutureにはVueで表を描画する「Cheetah Grid」というOSSがある #vuesapporo

何が強い？？ #vuesapporo

#vuesapporo

速さ！だからチーター🐆 #vuesapporo

どれくらい速いの？弊社のota-meshiさんが検証済み https://qiita.com/ota-meshi/items/a2b68e132fa7c5a32c3d SlickGrid（通常のGridライブラリ）と比較９環境中、６環境で勝利 DOMの多さが速さに影響 #vuesapporo

速さの秘訣ページ内のDOMの量を最小限にしたい →Canvasで描画しよう！！ DOM : ツリー構造をブラウザが読み解き、動的に生成する Canvas : 1枚の絵として
ピクセル単位での描画が可能 https://udemy.benesse.co.jp/development/dom.html #vuesapporo

調べてみると… どうやら Canvasで表を書くのはあんまり向かないらしい #vuesapporo

私の感覚的には… Cheetah Gridでは普通のコンポーネントを使う感覚で Canvasを描画できてる！ #vuesapporo

比べてみた #vuesapporo

比べ方比較対象・Cheetah Grid ・一般的なCanvas 同一の機能を持つVueファイルを作成機能・表の描画・セルの選択・セルの編集
Vueファイルの書き方を比較！ #vuesapporo

#vuesapporo

違い① セルの選択「どのセルがクリックされたか」をイベントでくれる。クリック座標から行・列を自分で逆算する。 #vuesapporo

違い② セルの編集列コンポーネントとして input/select処理を隠蔽してくれる。 Canvasは「絵」なので、入力したいとき HTMLのinput/selectを上に重ねる必要がある #vuesapporo

違い③ 表の描画入力列やメニュー列など多くの種類の列コンポーネントが宣言できる Gridの構造を自分で定義するところからやらなくてはならない #vuesapporo

Cheetah Gridはコンポーネント指向のための Canvas描画ライブラリ #vuesapporo

ぜひ一度使ってみてください！ #vuesapporo

表を書くならCheetah Gridで！

表を書くならCheetah Gridで！

Sudo Mayu

More Decks by Sudo Mayu

Featured

Transcript