ハンズオン② ブラウザだけで始めるClaude Code

前回は、自分の手でHTMLを打ちました。今日は同じものを“AIに頼んで”作ってもらいます。しかも、PCに何もインストールしません。使うのはブラウザだけ。これが、このサイトでずっと学んできた「AIと一緒に作る」の本番です。

STEP1：GitHubのアカウントを作る

GitHubは「Git／GitHub」の回で学んだ、セーブデータ（リポジトリ）をネットに置く保管庫です。Web版Claude Codeは、この保管庫の中身に対して作業します。あとで④「公開」でも必須になるので、ここで作っておくと一石二鳥。

1. 1ブラウザで github.com を開き、「Sign up」へ。
2. 2メールアドレス・パスワード・ユーザー名を決めて登録（無料でOK）。
3. 3届いた確認メールを開いて、登録を完了する。

STEP2：はじめての“保管庫（リポジトリ）”を作る

1. 1GitHubにログインし、右上の「＋」→「New repository」。
2. 2Repository name に hello-ai と入力。
3. 3公開範囲は迷ったら Private（非公開） でOK。
4. 4「Add a README file」にチェックを入れて、「Create repository」。

これで、あなた専用の保管庫ができました。ここにAIがファイルを置いていきます。

STEP3：Web版Claude Codeにログインして、つなぐ

1. 1ブラウザで claude.ai/code を開く。
2. 2Claudeのアカウントでログイン（有料プランが必要な場合があります→「API・トークン・料金」の回）。
3. 3画面の案内に従ってGitHubとの連携を許可する（「どのリポジトリに触っていい？」の確認が出ます）。
4. 4作業する場所として hello-ai を選ぶ。

STEP4：はじめての“お願い”

接続できたら、日本語でこう頼んでみましょう（コピペOK。〇〇は自分の名前に変えて）。

hello.html というファイルを作って。中身は、大きな見出しで「こんにちは、〇〇です」と表示するシンプルなWebページにして。できたらコミットして保存して。

Claudeが計画→作成→保存（コミット）まで自分で進めます。画面に流れていく作業ログが、まさに「AIエージェントが働いている」様子です。眺めていてください。

STEP5：GitHubで“答え合わせ”

1. 1GitHubの hello-ai を開き、ファイル一覧に hello.html が増えているか見る。
2. 2見当たらなければ、ファイル一覧の上にあるブランチ切り替えを押して、別のブランチを見る（Gitの回で学んだ“別の作業レーン”の実物です！）。
3. 3hello.html を開いて、中身を見てみる。

おまけ：今すぐ画面で見たい人へ

GitHubは“保管庫”なので、このままではWebページとして表示されません（それは④「公開」のお楽しみ）。でも今すぐ見たいなら——hello.html の中身を全部コピーして、下に貼ってみてください。第1回のプレイグラウンド、再登場です。

おさらい：今日使った“言葉”

リポジトリ

プロジェクトの保管箱。今日 hello-ai を作った。

コミット

セーブすること。AIが hello.html を作って保存した。

ブランチ

本線を汚さない“別の作業レーン”。AIの変更はここに入ることがある。

連携（許可）

「触れていい範囲」を渡すこと。必要最小限が鉄則。