Rechartsで楽にゴリゴリにカスタマイズする！

・イベント
ゆめみ×LayerX×サイボウズ3社合同フロントエンドカンファレンス北海道2024後夜祭＠東京
https://yumemi.connpass.com/event/326311/

・関連記事
『Rechartsでグラフをごりごりカスタマイズするぞ！（RadarChart編 第二回）』
https://zenn.dev/10tera/articles/5d0109142be96c

Transcript

1. Rechartsで楽にゴリゴリに カスタマイズする！ by 10tera (ゆーと) ゆめみ ×LayerX× サイボウズ 3 社合同 フロントエンドカンファレンス北海道 2024 後夜祭＠東京
2. 自己紹介 ゆーと/10tera（谷村悠斗） • 所属：YUMEMI Inc. フロントエンドエンジニア • 属性：24卒,20歳 • X：@10tera1 • フロントエンドカンファレンス北海道では 現地参加していました 2
3. 本日のお品書き 1. 本LTの前提 2. グラフをゴリゴリにカスタマイズする方法 3. なぜ楽にカスタマイズできないのか/その問題点 4. 楽にカスタマイズできるようにする方法2選 3
4. 前提 このLTではグラフライブラリとして有名なRechartsについて扱います • その中でも特にRadarChartを例として扱います • https://recharts.org/en-US/api/RadarChart ※他のライブラリでも応用できる内容です 4
5. 皆さんはグラフをゴリゴリに カスタマイズしたいと思ったことは ありますか？ （僕はあります。エグいグラフを実装していました） 5
6. 「ゴリゴリにカスタマイズ」の定義 定義 - 「ゴリゴリにカスタマイズする」とは色やサイズを変えたり、 渡すデータをちょっといじったりするだけでは留まらず、 DOMを1から作っていくこと 6
7. 今回カスタマイズしたい部分 • グラフのラベルにあたる部分 • RadarChartでは PolarAngleAxisで表示されてい る 7
8. ゴリゴリにカスタマイズするには？ • tickに任意のコンポーネントを渡し てあげるだけ ◦ 楽にカスタムできそうだが...でき ない 8
9. なぜ楽にカスタマイズできないのかと その問題点 9
10. ゴリゴリにカスタマイズするには？ • tickにコンポーネントを渡してあげ るだけ • ただしSVG Elementという 制限付き ◦ WHY:<RadarChart/>は<svg/> で構成されているから 10
11. つまり何が言いたい？ • divとかbuttonとかよく使うHTML Elementが使えない！！ • 複雑なデザインの時に、rect,text,circleとかを手動で頑張るしかない ◦ (実体験) ◦ めんどい、つらい、苦しい ◦ textの位置制御よくわからん（主観） ◦ 要素間の位置関係がめんどい 11
12. 願望：どうにかしてHTML Element を使って構築したい！ 12
13. ということで、HTML Elementを使って楽に カスタマイズする方法を2つ紹介します！ ここからが本題 13
14. 方法1: foreignObjectを使う • 『<foreignObject> は SVG 要 素で、異なる XML 名前空間の要 素を含みます。ブラウザーのコ ンテキストでは、ほとんどの場 合 (X)HTML です。』by MDN • 要約：<svg/>のなかにHTMLテ キストを埋め込むことができま す 14
15. 方法1: foreignObjectを使う 特徴：Chart内に描画 15
16. 方法2: createPortal(React)を使う • createPortalとはReactのAPI で、これを使うことで要素を DOM上の任意の場所にrender できる • createPortalでChartの外側に表 示させたい要素をrenderさせるこ とで、SVG Elementという制限を 外すことができる 16
17. 方法2: createPortalでWrapComponentを作る • 毎回createPortal周りの処理を 書くのも面倒なので、コンポー ネント化したい ◦ wrapして渡すだけで使える こんな感じに→ 特徴：Chart外に描画 17
18. 色々頑張るとこうなります 18
19. まとめ Rechartsで楽にゴリゴリにカスタマイズする方法 1. foreignObjectでwrapして、RadarChart内でrenderする 2. createPortalを使って、RadarChart外にrenderする 皆さんも↑を使って、グラフゴリゴリカスタマイズしてみませんか？ このLTの詳しいverが知りたい方はZennへ 19