コンテンツにスキップ
非エンジニアのためのVibeCoding入門

発展:データを見せる(CSVから集計・グラフ・共有)

この章でわかること: すでに手元にある**分析結果(CSV)**を、静止画のグラフや Excelの表のままではなく、**相手が自分で絞り込んで確かめられる「触れるダッシュボード」**に 仕立て、URLで共有するまで。数字を扱う企画職やアナリストが、日々の集計を 「見せて終わり」から「渡して触ってもらう」に一段引き上げるための発展課題です。

今回の題材:売上CSVを「触れる」ダッシュボードに

Section titled “今回の題材:売上CSVを「触れる」ダッシュボードに”

題材は、売上CSV(日付・商品カテゴリ・地域・金額……のような表)を読み込んで、 一覧で見せ、絞り込みや並び替えができ、合計・平均・件数を出し、グラフを1枚描く、 というものです。もちろん自分の手元にある別のCSV(問い合わせ件数、アンケート集計、 在庫など)に置き換えて構いません。自分が普段BIツールやスプレッドシートでやっている 集計を思い浮かべると、頼む内容がすぐ決まります。

ゴールは「きれいなグラフを1枚作る」ことではありません。相手が地域や期間を自分で 切り替えて、その場で数字を確かめられる——この「触れる」状態こそが、静止画の レポートとの違いです。

進め方

Section titled “進め方”

前提として、作ってみるで一度アプリを作る流れを通していると スムーズです。ここでは新しい空フォルダを用意し、Claude Code で開いた状態から始めます。

  1. CSVを取り込む土台を頼む

    まずは「CSVを読み込んで、そのまま表に出す」だけの最小形から。いきなり集計や グラフまで欲張らず、読み込めることを先に確認します。

    Next.js で、手元のCSVファイルを画面からアップロードして読み込み、 中身を表として表示するページを作って。1行目は見出し(ヘッダー)として 扱って。まずはアップロードした内容がそのまま表に出るところまで、動く形を見せて。

  2. 表示を確認し、絞り込み・並び替えを足す

    プレビューでCSVをアップロードし、表に出ることを確かめたら、閲覧しやすくします。

    いま表に出ているデータに、**絞り込み(地域やカテゴリで選ぶ)**と、 **列見出しをクリックしての並び替え(昇順・降順)**を付けて。件数が多くても 見やすいように、金額は3桁区切りのカンマを付けて右寄せにして。

    ここまでで「Excelを開いて眺める」に近いことが、URLの上でできるようになります。

  3. 集計を頼む(合計・平均・件数、そしてグループ集計)

    数字を扱う人にとっての本題です。単純な合計・平均だけでなく、 「地域ごとの売上合計」のようなグループ集計まで頼みます。これは表計算の ピボットテーブル、SQLでいう GROUP BY(項目ごとにまとめて集計する)に当たる操作です。

    表の上にサマリーを出して。全体の合計金額・平均金額・件数を大きく表示。 さらに、地域ごとの売上合計とカテゴリごとの件数を、それぞれ小さな表で まとめて。絞り込みを変えたら、サマリーの数字もその場で連動して変わるように。

  4. グラフを1枚描く

    数字の表だけより、推移や大小が一目で伝わるグラフが1枚あると商談で効きます。 まずは欲張らず1枚から。ライブラリ(グラフを描くための部品)選びはAIに任せて構いません。

    集計結果をもとに、グラフを1枚描いて。「地域ごとの売上合計」なら棒グラフ、 「月ごとの売上推移」なら折れ線グラフが合うと思う。使うグラフ用ライブラリは 任せる(Recharts など、扱いやすいものでよい)。絞り込みに連動して更新して。

  5. 区切りでコミットする

    いい状態になったら「ここまでをコミットして。変更内容がわかるメッセージで」と 頼みます。安全に巻き戻せる地点ができます(Git とは)。

公開して共有する

Section titled “公開して共有する”

手元で動いたら、URLで渡せる状態にします。基本ハンズオンと同じ流れで公開できます ——公開して共有するへ進んでください。相手はブラウザで開くだけで、 自分で絞り込みながら数字を確かめられます。

データ量が増えてきたら:保存先を検討する

Section titled “データ量が増えてきたら:保存先を検討する”

CSVを毎回アップロードする方式は「その場で見せる」には十分ですが、データが増える・ 何度も更新する・複数人で同じ数字を見るとなると、都度アップロードは窮屈になります。 その段階では、CSVではなくデータベースに貯めることを検討します。

なぜ大事か

Section titled “なぜ大事か”

分析の価値は、数字そのものより「相手が納得して次に動けるか」で決まります。 静止画のグラフは説明が要りますが、触れるダッシュボードは相手が自分で確かめられる分、 腹落ちが早い。しかも、いつもの集計を渡すだけで作れます。「見せて終わり」から 「渡して触ってもらう」へ——この一段が、企画やアナリストの提案の説得力を大きく変えます。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”