Zenn
🍓

Vue + Chart.js でSNSダッシュボードを作った話

に公開
Python
Vue.js
axios
Chart.js
Supabase
tech

Vue + Chart.js でSNSダッシュボードを作った話

FastAPI × Supabaseでデータの永続化まで実装できたので、
今回はそのデータを可視化するために、フロントエンドを組み立てていきました。

選んだのは、

  • Vue 3（Composition API）

  • Chart.js（v4）

  • Axios（API通信）

この記事では、

  • FastAPIで取得したデータの受け取り方

  • Chart.jsでの折れ線グラフ描画の方法

  • JWTトークンの扱い（ログイン後のセキュアな通信）

  • 表示されないときのデバッグポイント

を、フロントエンド視点で丁寧に解説していきます。

データ構造（バックエンドAPIからのレスポンス）

[
  {
    "date": "2025-04-18",
    "instagram": 0,
    "tiktok": 0,
    "x": 1
  },
  {
    "date": "2025-04-19",
    "instagram": 1,
    "tiktok": 2,
    "x": 3
  }
]

この形式のデータを受け取り、日付をラベルに、各SNSの数値を折れ線グラフとして描画します。

Chart.jsの初期化コード（サンプル）

const chartData = ref({
  labels: [],
  datasets: []
})

const loadData = async () => {
  const token = localStorage.getItem("access_token")
  const res = await axios.get(`${import.meta.env.VITE_API_URL}/metrics`, {
    headers: {
      Authorization: `Bearer ${token}`
    }
  })

  const metrics = res.data
  chartData.value.labels = metrics.map(item => item.date)
  chartData.value.datasets = [
    {
      label: "Instagram",
      data: metrics.map(item => item.instagram),
      borderColor: "rgb(255, 99, 132)",
      fill: false
    },
    {
      label: "TikTok",
      data: metrics.map(item => item.tiktok),
      borderColor: "rgb(54, 162, 235)",
      fill: false
    },
    {
      label: "X",
      data: metrics.map(item => item.x),
      borderColor: "rgb(75, 192, 192)",
      fill: false
    }
  ]
}

表示されない時のチェックポイント

ref()やreactive()の使い忘れ

<Line :data="chartData" /> のdataが undefined のまま

metricsの中に null や undefined 値がある

Chart.jsがVueで正しくマウントされていない

CSSで canvas 要素が非表示になってる可能性

フロントエンドならではの気づき

バックエンドでは「データを正しく返すこと」ばかり気にしてたけど、
実際にフロントに表示して初めて「順序が揃っているか」「見やすいか」「エラー処理が必要か」など、
ユーザー体験の最前線に立つという視点が加わると、設計の解像度が一気に上がった感覚がありました。

📦 完成コードはこちら👇
Github

次回は、**ログイン/認証状態の管理（ログイン状態による表示切替）**や、
**より高機能なダッシュボード機能（フィルター、CSV出力など）**に挑戦予定です 💪

Discussion