データの準備と基本的なダッシュボード構築
本章では、実際にClaude Codeを使ってダッシュボードを実装していきます。フォークしたリポジトリには、サンプルデータのCSVファイルが用意されているので、これを使ってClaude Codeに具体的な指示を出していきます。
サンプルデータのcsvファイルは、 public/sample_data ディレクトリに配置されています。
データの内容から分析方針を立てる
最初のステップとして、これらのファイルからClaude Codeに分析方針を立ててもらいます。以下のようにClaude Codeに指示を出します。
@app/page.tsx に分析機能を追加したいです。 @public/sample_data/users.csv と@public/sample_data/orders.csv のデータを読み込み分析の方針を立ててください。Claude Codeがデータの構造を理解し、以下のような分析アイデアを提案してくれます。 (実際の返答は以下の例とは少し異なるかもしれません)
推奨分析機能
1. 基本KPI ダッシュボード
- 総ユーザー数、総注文数
- 注文ステータス別分布（Cancelled、Completed等）
- 平均注文アイテム数
2. 時系列分析
- 新規ユーザー登録推移
- 注文数の時系列変化
- 月別/週別トレンド
3. 地理的分析
- 州別ユーザー分布マップ
- 地域別注文パフォーマンス
4. ユーザー行動分析
- トラフィックソース別ユーザー獲得
- 年齢・性別別注文傾向
- ユーザーセグメント分析
5. インタラクティブフィルタリング
- 期間フィルター
- 地域フィルター
- ユーザー属性フィルター
● 実装アプローチ：
- CSVデータを読み込むためのユーティリティ関数
- Chart.jsまたはRecharts等でビジュアライゼーション
- サーバーサイドでデータ処理、クライアントサイドで表示
- 段階的に機能追加（基本KPI → 時系列 → 地理的分析の順）
どの分析機能から始めたいですか？Claude Codeの提案が、実装したいアイデアの方向性とズレている場合はこの時点でやり取りをして方向性の修正をしましょう。
実装してほしいものが見つかれば、Claude Codeに伝えて実装を進めましょう。
作成されたコードの動作確認
Claude Codeはたびたびあなたにファイル編集の許可を求めてきます。都度、許可を与えて進めるか、まとめて許可を与えて進めるかを選択してください。
開発が完了すると開発サーバーの起動の許可を求めてくることがあるので、許可してあげましょう。開発サーバーが起動したら、ターミナル中のURLをCmd(Windowsの場合はCtrl) + クリックしてアプリケーションを確認しましょう。以下のような形で、新しいコンポーネントが画面に追加されているでしょうか。
いい感じですね！これでダッシュボードの基本機能が実装されました。
テンプレートに含まれているモックデータのコンポーネントはもう必要ないので削除しましょう。
@app/page.tsx このファイルからモックデータのコンポーネントを削除してください。コードとライブラリの解説
本章で使用したコードとライブラリについて解説します。
Next.jsのファイル構造
今回使用したテンプレートでは、Next.jsのApp Routerというモードを使用しています。このモードでは、ファイル構造が以下のようになっています。
app/- ページファイルとレイアウトファイル。このフォルダ内にページとなるファイルを配置します。components/- 再利用可能なUIコンポーネント。このフォルダ内に再利用可能なUIコンポーネントを配置します。lib/- ユーティリティ関数と設定。このフォルダ内にユーティリティ関数と設定を配置します。public/- 静的ファイル。このフォルダ内にプログラムファイル以外の静的ファイル (画像など) を配置します。
shadcn/uiのコンポーネント
今回使用したテンプレートでは、 shadcn/ui のコンポーネントがあらかじめ追加されています。shadcn/uiを用いることでモダンでシンプルなUIを実現することができます。Claude Codeは、コードベース中に用意されたコンポーネントを積極的に使ってくれるので、あらかじめ追加しておくことで成果物が安定します。
振り返り
本章では、Claude Codeを使ってダッシュボードを実装していきました。次章では、もう少し複雑なインタラクションを実現してみましょう。