【React×Redux×Chart.js】誰でも作れるダッシュボード管理ツール完全ガイド｜コード付き解説

プログラミング

「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での管理が向いています：

  • ユーザー情報
  • 数値や統計データ
  • フィルターの条件
  • グラフに表示する内容
1
npm install redux react-redux

Chart.jsで何ができる？

結論：棒グラフ・折れ線・円グラフなどを簡単に表示できます。

Chart.jsは以下のような点で便利です：

  • 軽量で読み込みが速い
  • グラフの種類が豊富
  • デザインのカスタマイズも自由
1
npm install chart.js react-chartjs-2

画面構成と設計の基本

ダッシュボードのレイアウト設計

結論：データ表示の目的に応じて「カード＋グラフ」の組み合わせが効果的です。

構成例：

  • ヘッダー（アプリ名・ログアウトボタン）
  • サイドメニュー（切り替え機能）
  • メインエリア：
  • 総合指標（売上・ユーザー数など）
  • グラフ表示（折れ線・円グラフ）
  • 更新日・フィルター
1
2
3
4
5
6
7
8
9
function Dashboard() {
  return (
    <div className="dashboard">
      <Header />
      <Sidebar />
      <MainContent />
    </div>
  );
}

Reduxでデータを管理する方法

グローバル状態の設計と操作

結論：slice（スライス）を使って管理対象ごとに整理すると扱いやすくなります。

1
2
3
4
5
6
7
8
// store.js
import { configureStore } from '@reduxjs/toolkit';
import dataReducer from './dataSlice';
export const store = configureStore({
  reducer: {
    data: dataReducer,
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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に渡せば簡単にグラフ表示できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

1
2
3
4
5
6
7
8
9
10
11
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（レイアウト）

1
2
3
4
5
6
7
8
9
import SalesChart from './SalesChart';
function Dashboard() {
  return (
    <div>
      <h2>売上ダッシュボード</h2>
      <SalesChart />
    </div>
  );
}

まとめ

この記事ではReactとRedux、Chart.jsを組み合わせて、誰でも作れるダッシュボード管理ツールの作成方法を解説しました。

重要なポイントは以下の通りです：

  • Reduxで状態を一括管理することでデータの一貫性を確保
  • Chart.jsで誰でも使えるグラフ表示機能を実装
  • Reactなら保守性・拡張性の高いダッシュボードが簡単に構築可能

実務でも役立つスキルですので、ぜひコードを動かしながら習得してみてください。

タイトルとURLをコピーしました