Claude Codeでデータ可視化を実装する方法

Claude Codeでグラフ・チャートを効率的に作る

データ可視化はWebアプリに欠かせない機能ですが、Chart.jsやD3.jsのAPI仕様を覚えるのは大変です。Claude Codeなら「こんなグラフを作りたい」と伝えるだけで、すぐに動くコードを生成できます。

Chart.jsでダッシュボードを作る

次のプロンプトでChart.jsを使った売上ダッシュボードを生成できます。

> Chart.jsを使って月次売上のダッシュボードコンポーネントをReactで作って。
> 棒グラフと折れ線グラフを切り替えられるようにして。

生成されるコード例：

import { useState } from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar, Line } from "react-chartjs-2";

ChartJS.register(
  CategoryScale, LinearScale, BarElement,
  LineElement, PointElement, Title, Tooltip, Legend
);

const salesData = {
  labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
  datasets: [
    {
      label: "売上（万円）",
      data: [120, 190, 150, 210, 180, 250],
      backgroundColor: "rgba(99, 102, 241, 0.5)",
      borderColor: "rgb(99, 102, 241)",
      borderWidth: 2,
    },
  ],
};

const options = {
  responsive: true,
  plugins: {
    legend: { position: "top" as const },
    title: { display: true, text: "月次売上レポート" },
  },
};

export function SalesDashboard() {
  const [chartType, setChartType] = useState<"bar" | "line">("bar");

  return (
    <div className="p-4">
      <div className="mb-4 flex gap-2">
        <button
          onClick={() => setChartType("bar")}
          className={chartType === "bar" ? "btn-active" : "btn"}
        >
          棒グラフ
        </button>
        <button
          onClick={() => setChartType("line")}
          className={chartType === "line" ? "btn-active" : "btn"}
        >
          折れ線グラフ
        </button>
      </div>
      {chartType === "bar" ? (
        <Bar data={salesData} options={options} />
      ) : (
        <Line data={salesData} options={options} />
      )}
    </div>
  );
}

リアルタイムデータの可視化

APIから取得したデータをリアルタイムでグラフ更新する実装も簡単です。

import { useEffect, useRef } from "react";
import { Chart } from "chart.js/auto";

export function RealtimeChart({ endpoint }: { endpoint: string }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const chartRef = useRef<Chart | null>(null);

  useEffect(() => {
    if (!canvasRef.current) return;

    chartRef.current = new Chart(canvasRef.current, {
      type: "line",
      data: {
        labels: [],
        datasets: [{
          label: "リアルタイムデータ",
          data: [],
          borderColor: "rgb(34, 197, 94)",
          tension: 0.3,
        }],
      },
      options: {
        animation: { duration: 300 },
        scales: { x: { display: true }, y: { beginAtZero: true } },
      },
    });

    const interval = setInterval(async () => {
      const res = await fetch(endpoint);
      const { value, timestamp } = await res.json();
      const chart = chartRef.current;
      if (!chart) return;

      chart.data.labels!.push(timestamp);
      chart.data.datasets[0].data.push(value);

      // 直近20件のみ表示
      if (chart.data.labels!.length > 20) {
        chart.data.labels!.shift();
        chart.data.datasets[0].data.shift();
      }
      chart.update();
    }, 2000);

    return () => {
      clearInterval(interval);
      chartRef.current?.destroy();
    };
  }, [endpoint]);

  return <canvas ref={canvasRef} />;
}

CSVデータからグラフを自動生成

Claude Codeに「CSVをアップロードしたらグラフを表示する機能を作って」と依頼すると、ファイル読み込みからパース、表示まで一気に実装してくれます。

function csvToChartData(csv: string) {
  const lines = csv.trim().split("\n");
  const headers = lines[0].split(",");
  const labels = lines.slice(1).map((line) => line.split(",")[0]);

  const datasets = headers.slice(1).map((header, i) => ({
    label: header,
    data: lines.slice(1).map((line) => parseFloat(line.split(",")[i + 1])),
    borderColor: `hsl(${i * 60}, 70%, 50%)`,
    backgroundColor: `hsla(${i * 60}, 70%, 50%, 0.2)`,
  }));

  return { labels, datasets };
}

効果的なプロンプトの書き方についてはプロンプトを改善する5つのTipsが参考になります。Claude Codeの生産性を上げるテクニックは生産性を3倍にする10のTipsをご覧ください。

まとめ

Claude Codeはデータ可視化の実装を大幅にスピードアップします。Chart.jsの設定やデータ変換ロジック、インタラクティブ機能まで、要件を伝えるだけで動くコードが得られます。

詳しい使い方はClaude Code公式ドキュメントを参照してください。