概要
- Reactアプリケーションで、データ可視化や分析ダッシュボードを作成する際に利用される
Rechartsライブラリを紹介 -
LineChartやBarChartなどのコンポーネントを用いて、シンプルかつ拡張可能なチャート描画を実現 - プロジェクトの規模や目的に応じて、ディレクトリ構成や**責務分離（FE/BE/DB）**をどう設計するかが重要
Rechartsを導入することで 「データを視覚的に理解しやすい形で提示する」 Reactアプリを効率的に作成できる
実施条件
- React + TypeScript プロジェクトが構築済みであること
- APIとの通信（
axiosなど）に関する基礎知識があること - データの保存方法（DB利用 or 直接API呼び出し）を理解していること
環境
| ツール | バージョン | 目的 |
|---|---|---|
| Node.js | 22.5.1 | Reactアプリ実行環境 |
| React | 19.1.0 | UI構築 |
| TypeScript | 4.9 | 型定義による安全な開発 |
| Recharts | 2.15.4 | データ可視化ライブラリ |
ディレクトリ構成
Rechartsを使ったReactプロジェクトは、データの流れ方によって3つの構成パターンに分類できる。
パターン①：保存型（FE + BE + DB）
履歴分析や安定性が必要な場合、バックエンドとデータベースを組み合わせてチャートに描画。
Sequelize
project-root/
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ └── CryptoChart.tsx
│ │ ├── services/
│ │ │ └── api.ts
│ │ └── pages/
│ │ └── Dashboard.tsx
├── backend/
│ ├── routes/
│ │ └── cryptoRoutes.js
│ ├── controllers/
│ │ └── cryptoController.js
│ ├── services/
│ │ └── coingeckoService.js
│ └── models/
│ └── CryptoPrice.js
├── database/
│ └── schema.sql
Prisma（推奨）
project-root/
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ └── CryptoChart.tsx
│ │ ├── services/
│ │ │ └── api.ts
│ │ └── pages/
│ │ └── Dashboard.tsx
├── backend/
│ ├── routes/
│ │ └── cryptoRoutes.js
│ ├── controllers/
│ │ └── cryptoController.js
│ ├── services/
│ │ └── coingeckoService.js
│ └── prisma/
│ └── schema.prisma
パターン②：リアルタイム型（FE + BE）
データベースを使わず、バックエンドがAPIから直接データを取得 → フロントに返す。
project-root/
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ └── CryptoChart.tsx
│ │ ├── services/
│ │ │ └── api.ts
│ │ └── pages/
│ │ └── Dashboard.tsx
├── backend/
│ ├── routes/
│ │ └── cryptoRoutes.js
│ ├── services/
│ │ └── coingeckoService.js
パターン③：直接呼び出し型（FE）
最小構成で、フロントから直接APIを呼び出しRechartsに描画。
プロトタイプや個人ツールに最適。
project-root/
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ └── CryptoChart.tsx
│ │ ├── services/
│ │ │ └── coingecko.ts
│ │ └── pages/
│ │ └── Dashboard.tsx
データフロー
パターン①：保存型（FE + BE + DB）
データの流れ（クライアント入力データ）
データの流れ（外部APIデータ）
パターン②：リアルタイム型（FE + BE）
データの流れ
パターン③：直接呼び出し型（FEのみ）
データの流れ
ディレクトリ設計まとめ
| パターン | 特徴 | 適用例 |
|---|---|---|
| 保存型 | 履歴分析・安定性あり | ダッシュボード、統計分析 |
| リアルタイム型 | 即時性・軽量 | トレンド表示、速報性重視アプリ |
| 直接呼び出し型 | 最速・最小構成 | プロトタイプ、個人利用ツール |