お題カード

このページがブラウザに出ていれば、事前セットアップの確認は完了です。

D1-2 バイブコーディング演習のお題

条件

1. HTMLとJavaScriptの1ファイルで作り、このフォルダの app/index.html に置く
2. data/勤怠工数_202609.csv を読み込む。外部のライブラリは使わない
3. 社員ごとの今月の工数の合計が、表とグラフの両方に出る

作った画面は、ブラウザで http://localhost:8000/app/ を開いて確かめます。

データ

2026年9月の、12名分の勤怠と工数のデータです。1行は「1人の1日の、1つのプロジェクトの作業」です。列の意味は data/列の説明.md にあります。

列	中身
社員ID、表示名	S1001、田中 のような形
日付	作業した日
実働分	その日の実働の分数。同じ日の行には同じ値が入る
PJコード、作業区分	作業したプロジェクトと作業の種類
作業分	その行の作業の分数

最後に自分で確かめること

画面に出た数字が正しいかは、AIではなく自分で確かめます。1人を選び、その人の行の作業分をCSVで足して60で割り、画面の工数と一致するかを見てください。