Rechartsは2015年に公開されたReact向けチャートライブラリで、内部でD3.jsのscale/shape系モジュールを利用しつつ描画はReactの仮想DOMに委ねる「Use D3 for math, React for DOM」パターンを採用しています。LineChart、BarChart、AreaChart、PieChartといったコンポーネントをJSXで組み合わせれば、JSON設定オブジェクトを書かずに宣言的にチャートを構築できるのが特徴です。AlibabaのフロントエンドチームRecharts Groupが立ち上げ、現在はOSSコミュニティが運営しています。本記事ではRechartsの設計思想とReact開発者にとっての価値を整理します。
この記事の目次
- コンポーネント合成で組み立てる
- Reactエコシステムとの親和性
- Recharts の歩み
- 他のReactチャートとの違い
- まとめ
コンポーネント合成で組み立てる
Rechartsの最大の特徴はチャートを「コンポーネントの組み合わせ」で構築できる点です。LineChartの内側にXAxis、YAxis、CartesianGrid、Tooltip、Legend、Lineを並べるだけで、ReactのJSX文法のままチャート構造を表現できます。巨大なoptions辞書を覚える必要がなく、各要素のpropsで挙動を制御できるため、Reactに慣れた開発者にとっては学習コストが最小限です。Compositionパターンに沿うため、独自要素を差し込んだ拡張も自然です。
内部実装はSVGベースで、D3のscaleLinear、scaleTime、scaleBand、d3-shapeのline/area/arcといった計算系モジュールが活用されています。一方でDOM更新はReactの再レンダリングサイクルに乗るため、D3のselection.data()によるDOM操作とReactの仮想DOMが衝突する問題は発生しません。「D3で数学、Reactで描画」という役割分担の現代的な実装例として位置付けられます。
Reactエコシステムとの親和性
RechartsはReactのライフサイクルとフックを前提に設計されているため、useState/useEffect/useMemoとの組み合わせが自然です。データが変わるたびにpropsを更新するだけで再描画が走り、外部状態管理ライブラリ（Redux、Zustand、Jotai）から流れてくるデータもそのまま渡せます。ResponsiveContainerでラップすれば親要素のサイズ変化に追従するレスポンシブ対応も自動で、ダッシュボードのグリッドレイアウトに組み込んでも崩れにくくなります。
TypeScript型定義も最初から同梱されており、Lineのstroke、Barのfill、XAxisのdataKeyといった主要propsが補完されます。Storybookとの組み合わせでコンポーネントカタログを作るのも容易で、デザインシステムの一部としてチャートを管理する現代的なフロントエンド開発に馴染みます。Tailwind CSSと組み合わせるサンプルも豊富で、デザインカスタマイズのハードルが低い点も魅力です。
Recharts の歩み
Rechartsは2015年にAlibabaグループのフロントエンドエンジニアrecharts-bot（GitHubハンドル）らが立ち上げ、GitHubで公開されました。当時はReactの普及期で、D3.jsをReactアプリに組み込む方法が定まっていなかったため、「Reactらしくチャートを書く」という需要に応える形で急速に支持を集めました。GitHubスター数は2.2万を超え、npm週次ダウンロード数は120万に達する規模となりました。
v1からv2へのメジャーアップデートではTypeScript完全対応とReact 18のConcurrent Mode対応が進み、Strict Modeでの警告も解消されました。ライセンスはMITで、商用利用に制限はありません。現在はBoston大学のMaintainerチームを中心にコミュニティ運営に移行しており、AlibabaのRecharts Groupは実質的な手を離れた状態です。OSSが企業発から純粋なコミュニティプロジェクトへ移行した好例とも言えます。
他のReactチャートとの違い
Recharts と並ぶReact向けチャート選択肢にはvisx（Airbnb製）、Nivo、Victoryなどがあります。visxは低レベル部品志向で、Rechartsより自由度が高い反面、自前で軸やツールチップを組み立てる必要があります。Nivoは高機能・高デザイン志向で、サンキーやコードダイアグラムを含む数十種類のチャートを揃えますが、バンドルサイズも大きくなります。Rechartsはこれらの中間で、「定型チャート8〜10種類を最短で書きたい」用途に最適です。
弱点としては、複雑なカスタマイズになるとRechartsのAPIだけでは表現しきれず、Customized要素でSVGを直接書く場面が出てくる点があります。サンキーや3Dなど特殊チャートも標準装備していないため、高度な可視化が必要な場合はvisxやNivo、もしくはECharts/D3.jsを検討することになります。用途と学習コストのバランスでRechartsを選ぶか、別ライブラリにするかが判断軸になります。
まとめ
RechartsはD3.jsの計算力とReactの宣言的UIを橋渡しする位置付けで、React開発者にとって最も学習コストが低いチャートライブラリの一つです。コンポーネント合成のAPIはReactらしく、TypeScriptとの相性も良好です。定型チャート中心のダッシュボードや管理画面では第一候補になり、より高度な可視化が必要になった時点でvisxやECharts、D3.jsに移行する経路が現実的でしょう。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント