Chart.jsで長い項目を表示するときのハマりどころ

ウェイブ×ゆめみ ふなよいJS/TS LT会2025/11/12
https://yumemi.connpass.com/event/368987/

で話した内容のまとめ直しです

Transcript

1. Chart.jsで長い項目を表示 するときのハマりどころ ウェイブ×ゆめみ ふなよいJS/TS LT会 2025/11/12 @__yumechi
2. 当日スライドが 間に合わなかったので 作り直したバージョンです
3. X: @__yumechi misskey: @__yumechi@misskey.systems 自己紹介 • Motoki Hirao (X: __yumechi) • 普段はバックエンドエンジニア • JavaScript の話でLTするのは10年ぶり…？ ◦ キャリアの最初はフロントエンドエンジニアをやっていたため • 普段はゲームしてるか、読書してるか、カンファレンスにいるか、カ ンファレンスのスタッフをしています ◦ PyCon mini Shizuoka にもぜひ来てね ◦ https://shizuoka.pycon.jp/2026
4. X: @__yumechi misskey: @__yumechi@misskey.systems 概要 • Chart.js で表示を良くするためには色々大変！ ◦ 実演を交えて紹介します ◦ 特に長いデータを入れた時の挙動が結構微妙だな… と思っています • ちょっと前にやったものをClaude Codeで再現して、実現しているも のになります ◦ なのでコード自体はほぼ Claude Code に書かせていて、細かめのチューニングだ け行っています
5. X: @__yumechi misskey: @__yumechi@misskey.systems Chart.js って何？ • データをグラフに変換できるライブラリ ◦ https://www.chartjs.org/ • canvas 機能を使って描画する • 棒グラフ以外にも円グラフ、チャートなどを作ることができる • 今回取り上げている通り、ちょっと癖があるので日本語環境で使う場 合は気を付けるポイントあり
6. コード見たい方は リポジトリへ https://github.com/yumech i/my-playground-chartjs
7. 実例見たい方は ページを見てください https://www.yumechi. work/my-playground-c hartjs/
8. そのまま入れてみる
10. X: @__yumechi misskey: @__yumechi@misskey.systems 気になる点 • 項目名がめっちゃ切れてる ◦ 見た目としてはかなりひどい ◦ 左揃えにしてある程度のところで文字列を切る戦略にすればよさそう ◦ まずはここを何とかしたい
13. X: @__yumechi misskey: @__yumechi@misskey.systems 気になる点 • だいぶもったりして見える ◦ 縦幅に対し、フォントが小さいためすごくスカスカな印象を受ける ◦ バー、カテゴリのサイズを調整する ◦ CSSでも高さを制限する ▪ 本来は項目数分でうまく計算して出せるとよいのですが、今回はデモで html, javascript というシンプルな構成なので固定値です
16. X: @__yumechi misskey: @__yumechi@misskey.systems 気になる点 • 項目名が横にすごく伸びてしまっている ◦ 読みづらさがある ◦ システムとしてみた時のだらしなさも感じる ◦ CSS による width の調整 ◦ 細かめのレイアウト調整
19. X: @__yumechi misskey: @__yumechi@misskey.systems 気になる点 • width を調整したことで左に寄りすぎて見えている ◦ html タグで調整する（AIに聞くと Chart.js の機能でできるよ！って言ってくる が、なんかうまくできませんでした（解決策募集）） • これまで見せていなかったが、環境によってはツールチップが非常に 見ずらい ◦ ツールチップも折り返そう
23. これでかなり 一般的な基準で見ても 違和感がないレベルに なった… かも？
24. X: @__yumechi misskey: @__yumechi@misskey.systems まとめると • Chart.js で項目をグラフ化するのはかんたんにできる • 一方で、長い項目については割と作り込みが必要 ◦ 商品名 ◦ 所属名 • 表示に関しても Chart.js で提供されている機能だけでなく、CSSな どの機能を使って補助したほうが良い • どちらにしろ落とし所としては業務要件とか満たしたいものに合わせ ること
25. X: @__yumechi misskey: @__yumechi@misskey.systems 宣伝 • https://x.com/oyakata2438/status/1986061495785152711 • こちらの『ワンストップ食』に寄稿しております ◦ いろいろ合間を縫って書きました、意外とチャレンジしたことがないものを取り 上げたと思うので、興味を持っていただけると幸いです • 11/16(日) 技術書典19 『え11』にて頒布予定！
26. X: @__yumechi misskey: @__yumechi@misskey.systems 利用情報 • スライド作成: Google Slide https://www.google.com/slides/about/ • フォント: BIZ UDGothic https://fonts.google.com/specimen/BIZ+UDGothic