ハンズオンガイドDay1 Claude Code の基礎とバイブコーディング

Claude Codeの基礎

開講の [15min]で、画面の読み方と、よく使う操作を見ます。研修中に迷ったら、この節に戻ってください。

モード

Shift+Tabを押すたびに、モードが切り替わります。いまのモードは、入力欄の下に出る表示で分かります。研修で使うのは、通常のモードとPlanモードの2つです。

表示はmanual、accept edits、plan、autoの順に変わり、manualに戻ります。autoは、アカウントの設定によっては出ません。

承認の画面

通常のモードでは、Claudeがファイルを書き換える前と、コマンドを動かす前に、承認の画面が出ます。ファイルの変更なら、ファイル名と、差分の赤と緑の行を読みます。コマンドのときに読むのは、コマンドの全文と、どのフォルダで動くかです。

研修では、内容を読んで問題がなければ1. Yes、違うと思ったらNoを選びます。2番と3番は、同じ種類の操作を以後は確かめずに通す選択肢なので、研修では選びません。

Planモードの計画の画面は、1番のYes, and use auto modeが選ばれた状態で出ます。Enterだけを押すと自動のモードで進むので、研修では2. Yes, manually approve editsを選んでください。

よく使う操作

対話型AIとAIエージェントの違い

講義では、同じ依頼をブラウザのチャットとClaude Codeに出して、返ってくるものの違いを見せます。

D1-1 で、Claudeはフォルダの中のファイルを自分で開いてから答えました。対話型AIなら、人がファイルの中身を貼るところです。

AIエージェントでできること

講師がClaude Codeで、次の5つを順に見せます。受講者は見るだけです。

どのデモも、道具を使って結果を見るループの繰り返しです。デモの途中で、承認の画面に何が出ているかにも目を向けてください。

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

この演習の [55min]は、必須のSTEP 1〜5の合計です。STEP 6は発展で、合計 [10min]です。この演習の枠には入っていません。

ねらい

コードを自分で書かずに、言葉だけで動く画面を作ります。最後に画面の数字を元のデータで検算し、AIの出力を人が確かめる手順を自分の手で通します。

押さえること

完成度は問いません。表が出れば達成で、そこから言葉で直す往復を3回は通してください。1回の指示は短くします。

できあがりの目安

• ブラウザでhttp://localhost:8000/app/を開くと、12名分の今月の工数が表とグラフで出る
• メモ_D1-2.mdに、自分で決めた3行と、言葉で直した指示が3つ以上残っている
• 1人分の合計をCSVで検算し、画面の数字と一致している。一致しないときは、どこが違ったかがメモに書いてある

使うファイルと作るファイル

この演習は、1つの会話で最後まで進めます。STEPの文面は前のSTEPの続きとして送るので、途中で/clearを打たないでください。演習が変わったら、/clearで会話を空にしてから始めます。

STEP 1 画面に出したいものの3行 AIを開かない [5min]

ブラウザでお題カードのhttp://localhost:8000/を開き、条件を読みます。サーバが止まっているときは、事前セットアップのStep 7のとおりに動かしてください。

VS Codeでメモ_D1-2.mdを作り、画面に出したいものを3行で書きます。1行目は誰が何のために見るか、2行目は表の列、3行目はグラフの形です。

別の題材での3行の例を見る

総務の担当者が、会議室の使われ方の偏りを見るために使う

表の列は、会議室名、今月の利用回数、利用時間の合計

利用時間の合計を、会議室ごとの横向きの棒グラフにする

会議室の予約という別の題材での例です。工数の画面の3行は、自分で考えて書いてください。

STEP 2 Planモードでの計画 [10min]

Shift+Tabで入力欄の下にplan mode onを出してから、文面を送ります。<ここに…>は、STEP 1の3行に置き換えます。

Claude に送る文面メモ帳で <ここに…> を埋めてから貼るコピー

お題カードの index.html と data/列の説明.md を読んで、次の3行を満たす画面の計画を立ててください。作るのは app/index.html の1ファイルで、HTML と JavaScript だけで書き、外部のライブラリは使いません。

<ここに STEP 1 で書いた3行>

返ってきた計画で、次の4つを読みます。

• 作るファイルの名前と場所がapp/index.htmlか
• CSVのどの列を、どう足して工数にするか。分を時間に直す計算も入っているか
• 外部のライブラリを使っていないか
• 表とグラフの両方があるか

1. 直したい点を1つ選びます。実行するかを聞かれた画面で、↓キーで3. Tell Claude what to changeを選んでEnterを押します。入力欄に戻ったら、直す点を1文で送ってください。
2. 直った計画が返ったら、↓キーで2. Yes, manually approve editsを選んでEnterを押します。モードはmanual mode onに変わり、ファイルを作る前に承認の画面が出ます。

STEP 3 ページの作成と表示 [15min]

ファイルを作る前に、承認の画面が出ます。ファイル名がapp/index.htmlになっているかを見てから1. Yesを選んでください。

ファイルを作ったあと、Claudeが自分で確かめようとして、nodeや別のコマンドの承認を求めることがあります。研修のPCにはNode.jsが入っていません。nodeのコマンドは4. Noを選び、「Node.jsは入っていないので、確かめは自分でブラウザとCSVで行います」と送ってください。

サーバは自分で動かします。Claudeがpython3 -m http.serverなどのサーバを起動するコマンドの承認を求めてきたら、止める側の選択肢を選び、「サーバは自分で動かします」と送ってください。サーバのコマンドは終わらないので、Claudeの会話が止まります。

ファイルができたら、VS Codeのターミナルの右上の+で2つ目のターミナルを開き、サーバを動かします。お題カードを見たときのサーバが動いていれば、そのままで構いません。

2つ目のターミナルに打つコマンドコピー

cd ~/idcc-day1
python3 -m http.server 8000

Windowsのブラウザで次のURLを開きます。表とグラフが出れば、このSTEPは済みです。

ブラウザのアドレス欄コピー

http://localhost:8000/app/

STEP 4 言葉だけの修正 [15min]

ブラウザの画面を見て、直したいところをClaudeに言葉で頼みます。1回の指示は1文にして、3回直してください。ファイルを書き換える承認の画面では、差分の赤と緑の行を見てから許可します。

1回の指示で、書き換えの承認が何回か続くことがあります。撮影したときは、1回の指示で7回続きました。毎回、差分を見てから1. Yesを選んでください。

直すたびにブラウザでCtrl+Shift+Rを押し、画面を読み込み直します。送った指示は、メモ_D1-2.mdに1行ずつ書き足してください。

指示の例を見る

• グラフの棒の右に、時間の数字を出してください。
• 160時間を超える人の行に、薄い色を付けてください。
• 表の上に、12名の合計時間と平均時間を出してください。

Tips思ったとおりに直らないときは、指示を長くせずに、いまの画面のどこが、どう違うかを1文で伝え直してください。

Tips書き換えの承認が続いて手が止まるときは、Shift+Tabで入力欄の下をaccept edits onにして構いません。ファイルの書き換えは聞かずに進み、コマンドの承認は出ます。STEP 5の前にmanual mode onに戻してください。

STEP 5 検算と承認の振り返り AIを開かない [10min]

画面の数字が正しいかを、AIに聞かずに自分で確かめます。1人を選び、その人の作業分をCSVで足して60で割ります。2つ目のターミナルでCtrl+Cを押してサーバを止め、次を打ってください。田中のところは、選んだ人の表示名に変えてください。

2つ目のターミナルに打つコマンドコピー

cd ~/idcc-day1
awk -F, '$2=="田中" {s+=$11} END {print s/60}' data/勤怠工数_202609.csv

出た数字と、画面の同じ人の数字を比べます。画面が小数第1位までのときは、四捨五入して比べてください。合っていれば、メモ_D1-2.mdに「検算 一致」と、選んだ人と数字を書きます。合わなければ、どちらがいくつだったかを書いてください。

最後に、Claudeの会話を上へさかのぼり、この演習で許可した操作を数えます。ファイルの作成と書き換え、コマンドの実行のそれぞれが何回あったかを、メモに1行で書いてください。

Tipsawkは、表の形のテキストを列ごとに計算するUbuntuのコマンドです。-F,で区切りの文字をカンマにし、2列目の表示名が一致する行の11列目の作業分を足しています。サーバを止めずに試すときは、もう1つターミナルを開いてください。

表とグラフの上に、PJコードごとのボタンを並べてください。ボタンを押すと、そのプロジェクトの作業分だけで表とグラフを作り直します。「すべて」のボタンで元に戻します。

うまくいかないとき

ブラウザで app/index.html を開くと表が空です。コンソールに次のエラーが出ています。原因を調べて直してください。

<ここにコンソールの赤い行>

早く終わった方へ

追加と考察

STEP 5 の検算を、もし行わなかったらどうなっていたかを考えてください。画面がきれいでも、足している列が違えば数字は誤ります。AIは、もっともらしい画面を作るのが得意です。

発展課題

D1-2+は、上のSTEP 6です。早く終わった方は、STEP 6のあとに、グラフの色やレイアウトを自由に直してみてください。