エージェントに実データ(CSV)を与える
beginner~35 分0/3 ステップ
エージェントに実データ(CSV)を与える
CSV ファイルは地球上で最もシンプルなデータセットです — 1レコード1行、フィールドの間はカンマで区切られています。エージェントは CSV を何の準備もなくパースできるので、CSV が大好きです。
エージェントのワークフロー: プロジェクトフォルダに CSV を置き、エージェントに*「sales.csv を読んで、上位3製品を要約して」*と伝えれば、組み込みのファイルツールを使ってやってくれます。
このレッスンでは、エージェントが CSV を処理した後に公開する結果ページを作ります。出力テンプレートのようなものだと考えてください — 目玉となる指標、上位3のリスト、生の行数です。後ほどエージェントがこれを実際の数値で埋めていきます。
サンプル CSV(エージェントがこれをパースし終えたところを想像してください):
product,units_sold,revenue_usd
Agentic Dashboard,142,14200
Claude Code Training,89,8900
Negotiation Cheatsheet,312,9360
手順
1
「Sales」または「Results」という単語を含む <h1> を追加してください
ヒント: `<h1>Sales Results — Q1</h1>`
2
目玉となる数値を1つ表示する <div class="metric">(総売上、総行数、何でも構いません)を追加してください
3
CSV の内容(製品名+数値)を示すデータ行を少なくとも1つ持つ <table> を追加してください
あなたのコード
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ViBotでバイブコーディング無料メッセージ 0 / 12
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ:「Sales」または「Results」という単語を含む <h1> を追加してください
ライブプレビュー
ライブプレビュー