「Reactでデータ管理や可視化がしたいけど、何から始めればいいかわからない」
「状態管理とグラフ表示って難しそう」と感じていませんか？
実は、ReactとRedux、そしてChart.jsを組み合わせれば、誰でも簡単に管理ダッシュボードが作れます。
この記事では、データ取得・状態管理・グラフ描画・画面構成までを一つひとつ丁寧に解説します。
初心者でも理解できる表現とコード付きで、すぐに動かせる実例つきの構成です。
Reactでダッシュボードを作る意味
なぜダッシュボードが重要なのか？
結論：情報を一目で把握できる仕組みは、あらゆる場面で必要です。
現代のビジネスでは、データの見える化が重要視されています。たとえば：
- 経営状況の把握（売上・利益の推移）
- 学習管理（学習時間や習得状況の分析）
- システム監視（サーバー稼働状況やアクセス数）
- 在庫や顧客管理の効率化
経済産業省も、「データ利活用による経営支援」をDX推進政策の中核に据えています（参考：https://www.meti.go.jp/policy/it_policy/dx/index.html）。
Reactを使うことで、リアルタイムにデータを更新しながら美しく表示するUIを効率よく構築できます。
ReduxとChart.jsの役割を理解する
Reduxで状態をどう管理するのか？
結論：複数の画面やコンポーネントで共有されるデータはReduxで集中管理するのが便利です。
以下のようなデータはReduxでの管理が向いています：
- ユーザー情報
- 数値や統計データ
- フィルターの条件
- グラフに表示する内容
npm install redux react-redux
Chart.jsで何ができる？
結論：棒グラフ・折れ線・円グラフなどを簡単に表示できます。
Chart.jsは以下のような点で便利です：
- 軽量で読み込みが速い
- グラフの種類が豊富
- デザインのカスタマイズも自由
npm install chart.js react-chartjs-2
画面構成と設計の基本
ダッシュボードのレイアウト設計
結論：データ表示の目的に応じて「カード＋グラフ」の組み合わせが効果的です。
構成例：
- ヘッダー（アプリ名・ログアウトボタン）
- サイドメニュー（切り替え機能）
- メインエリア：
- 総合指標（売上・ユーザー数など）
- グラフ表示（折れ線・円グラフ）
- 更新日・フィルター
function Dashboard() {
return (
<div className="dashboard">
<Header />
<Sidebar />
<MainContent />
</div>
);
}
Reduxでデータを管理する方法
グローバル状態の設計と操作
結論：slice（スライス）を使って管理対象ごとに整理すると扱いやすくなります。
// store.js
import { configureStore } from '@reduxjs/toolkit';
import dataReducer from './dataSlice';
export const store = configureStore({
reducer: {
data: dataReducer,
},
});
// dataSlice.js
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
sales: [12, 19, 3, 5, 2, 3],
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
};
export const dataSlice = createSlice({
name: 'data',
initialState,
reducers: {
updateSales: (state, action) => {
state.sales = action.payload;
},
},
});
export const { updateSales } = dataSlice.actions;
export default dataSlice.reducer;
Chart.jsでグラフを表示する方法
棒グラフの描画を実装してみよう
結論：useSelectorでReduxの値を取得し、Chart.jsに渡せば簡単にグラフ表示できます。
import { Bar } from 'react-chartjs-2';
import { useSelector } from 'react-redux';
function SalesChart() {
const sales = useSelector((state) => state.data.sales);
const labels = useSelector((state) => state.data.labels);
const data = {
labels: labels,
datasets: [
{
label: '月別売上',
data: sales,
backgroundColor: 'rgba(75,192,192,0.6)',
},
],
};
return <Bar data={data} />;
}
改善ポイントと発展的な使い方
より実用的なダッシュボードにするには？
以下のような改善を加えることで、実務レベルのツールへと進化させられます：
- APIからの動的データ取得（axiosやfetchを使用）
- 日付フィルターや項目の切り替え
- テーマの切り替え（ダークモード対応）
- データベースとの連携（FirebaseやSupabase）
完成形コードの全体構成
App.js
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import Dashboard from './Dashboard';
function App() {
return (
<Provider store={store}>
<Dashboard />
</Provider>
);
}
Dashboard.js（レイアウト）
import SalesChart from './SalesChart';
function Dashboard() {
return (
<div>
<h2>売上ダッシュボード</h2>
<SalesChart />
</div>
);
}
まとめ
この記事ではReactとRedux、Chart.jsを組み合わせて、誰でも作れるダッシュボード管理ツールの作成方法を解説しました。
重要なポイントは以下の通りです：
- Reduxで状態を一括管理することでデータの一貫性を確保
- Chart.jsで誰でも使えるグラフ表示機能を実装
- Reactなら保守性・拡張性の高いダッシュボードが簡単に構築可能
実務でも役立つスキルですので、ぜひコードを動かしながら習得してみてください。
Japanese 
English