logta5 https://blog.hatena.ne.jp/logta5/ DIGGLE開発者ブログ https://diggle.engineer/ フロントエンド javascript パフォーマンス改善 はじめに Canvasとは DIGGLEで活用している部分 DIGGLEでCanvasを利用することにした経緯 初期のPLレポート つい最近のPLレポート CanvasによるPLレポート 実装上の工夫 避難ハッチを使う部分(useRef)を隔離 Canvasに関わるRefはカスタムHookなどに押し込み、基本的にはcanvasタグに渡すときのみ利用する スクロールイベントなどのユーザーの操作に伴って描画が変わるイベントハンドラー（イベントの管理）は一つのコンポーネントにまとめることで、どのコンポーネントでイベントハンドラーが発火された結果Canvasの描画が変化したのか分かりやすくする 複数キ… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdiggle.engineer%2Fentry%2Fcanvas-table" title="ReactでのCanvasの活用 - 巨大なテーブルの表示を高速化 - DIGGLE開発者ブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/l/logta5/20241209/20241209115102.png Hatena Blog https://hatena.blog 2024-12-21 00:00:00 rich https://diggle.engineer/entry/canvas-table 1.0 100%