Windows版Claude Codeでローカルバージョン管理

AIの支援を受けて作業しています。AIはファイルを変更します。変更が素晴らしいこともあれば、そうでないこともあります。バージョン管理はプロジェクト全体の取り消しボタンのようなものです。 スナップショット（「コミット」と呼ばれる）を保存するたびに、いつでも戻れる復元ポイントが作成されます。しかも、すべてコンピューター上で実行でき、Claude Codeがすべて処理してくれます。

主要な概念

PowerShell：Windowsに標準搭載されているコマンドラインツール。ここではGitとClaude Codeの実行に使用します
Git：ファイルの変更履歴をすべて記録し、任意の時点に戻れるようにするバージョン管理システム
コミット：特定の時点でのプロジェクトの状態を説明付きで保存したもの
Claude Code：自然言語で指示するだけでコード作成・修正・Git操作まで行ってくれるAIアシスタント

必要なもの

WindowsにClaude Codeをインストールが完了していること
20〜30分

ステップ1：PowerShellを開く

スタートメニューをクリック
PowerShell と入力
Windows PowerShell をクリックして開く

注意： ネイティブインストールではなく、オプションのWSL/Ubuntuの方法を設定した場合は、代わりに Ubuntu アプリを開いてください。GitとClaude Codeは同じように動作します。ただし、パスは ~\Documents\... ではなくLinux形式（/mnt/c/Users/...）になります。

ステップ2：Gitをインストール

Gitがすでにインストールされているか確認します：
```
git --version
```
git version 2.45.0 のようなバージョン番号が表示された場合は、ステップ3に進みます
エラーが表示された場合は、Git for Windowsをインストールします：
- git-scm.com/download/win にアクセス
- そのページの上部にある Click here to download をクリックし、ダウンロードが完了したらインストーラーを開きます
- デフォルトのオプションのまま Next をクリックして進みます
- Install をクリックし、次に Finish をクリック
- PowerShellを閉じて開き直し、もう一度 git --version で確認します

ステップ3：Gitに身元情報を登録

Gitはコミットメッセージに誰が変更したかを記録する必要があります。

名前とメールアドレスを設定します（架空のものでも構いません）

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

複数人で作業する場合、名前とメールアドレスを使うことで誰が変更したかを識別できます。

ステップ4：ドキュメント（Documents）フォルダへ移動

ドキュメント（Documents）フォルダに移動します：
```
cd ~\Documents
```
正しい場所にいることを確認します：
```
pwd
```

\Documents で終わるパスが表示されるはずです。

Cannot find path と表示された場合は、ドキュメントフォルダがOneDriveでバックアップされている可能性があります。代わりに cd ~\OneDrive\Documents を実行してください。

ステップ5：プロジェクトフォルダを作成

test_claude というフォルダを作成します：
```
mkdir test_claude
```
フォルダ内に移動します：
```
cd test_claude
```

ここがプロジェクトの作業場所になります。

ステップ6：Claude Codeを起動

Claude Codeを起動します：
```
claude
```

インストールチュートリアルに従って、Claudeサブスクリプションでログインしてください。ログイン後、ウェルカムメッセージとClaude Codeのプロンプトが表示されます。

ステップ7：ClaudeにGitの初期化を依頼

このリクエストを入力します：

変更の追跡を開始してください

ClaudeがフォルダにGitリポジトリを初期化します（2〜5秒かかります）。これでバージョン管理の準備が整いました。

Claudeが許可を求める場合は、YesとNoを含む小さなメニューが表示されます。矢印キーでYesを選び、Enterを押してください。このチュートリアルでは何度かこの表示が出ることがあります。

ステップ8：タイマーアプリを構築

Claude Codeに、次のリクエスト全体をコピーして貼り付けます（貼り付けるとすべての行がまとまったままになります。Enterを押すと途中で送信されてしまいます）：

timer.htmlという単一のファイルにシンプルなカウントダウンタイマーアプリを作成してください。
以下の機能を含めてください：
- 分数を設定する入力フィールド
- 開始ボタンと停止ボタン
- MM:SS形式で残り時間を表示する画面

Claudeが timer.html を作成します（10〜30秒かかります）。CSSとJavaScriptのコードも含まれます。

ステップ9：タイマーをテスト

Windowsの エクスプローラー（File Explorer）を開く
ドキュメント > test_claude に移動
timer.html をダブルクリックしてブラウザで開く
タイマーを試します：
- 入力フィールドに 1 と入力
- 開始（または Start）ボタンをクリック
- カウントダウンを確認

test_claude が見つからない場合： OneDriveでドキュメントをバックアップしている場合、エクスプローラーには別のドキュメントフォルダが表示されます。エクスプローラーのアドレスバーをクリックし、%USERPROFILE%\Documents\test_claude を貼り付けて Enter を押してください。

何か問題がある場合： Claude Codeでエラーを説明します：このエラーが表示されます：[何が起こったかを説明]。修正してもらえますか？

ステップ10：Claudeにコミットを依頼

Claude Codeで次のように入力します：

これらの変更を保存してください

Claudeが次の処理を行います：

変更されたファイルを確認
説明的なコミットメッセージを作成
コミットを作成（5〜10秒かかります）

最初のセーブポイントが作成されました。いつでもこの動作するバージョンに戻ることができます。

ステップ11：プリセットボタンを追加

Claude Codeで次のように入力します：

上部に2つのボタンを追加してください。クリックすると自動的に1分と5分のタイマーが開始されるようにしてください。

ブラウザタブを更新（F5 または Ctrl + R を押す）
テスト：5分（または 5 min）ボタンをクリック
動作する場合は、変更をコミットします：
```
これらの変更を保存してください
```

2つ目のセーブポイントが作成されました。このバージョンでは2つのボタンが動作します。

ステップ12：別のボタンを追加

Claude Codeで次のように入力します：
```
15分ボタンを追加してください
```
ブラウザタブを更新（F5 または Ctrl + R を押す）
テスト：15分（または 15 min）ボタンをクリック

このチュートリアルでは： 15分ボタンが正しく動作しないと仮定してください。まだコミットしないでください。失敗した変更を破棄する練習をします。

ステップ13：変更を破棄

AIのコードが動作しない場合があり、最後のセーブポイントからやり直す必要があります。

Claude Codeで次のように入力します：

これらの変更を破棄してください

通常、Claudeはまず確認を求めてきます。メニューが表示された場合は、Yesを選択し（矢印キーまたは横にある番号）、Enterを押します。メッセージで尋ねてきた場合は、はい、timer.htmlの変更を破棄してくださいと入力してEnterを押します
ブラウザを更新すると、15分ボタンが消えます

Claudeが気に入らない新しい変更を破棄してくれます。タイマーは1分と5分のボタンだけで再び動作します。

ステップ14：サウンド通知を追加

Claude Codeで次のように入力します：

タイマーがゼロになったら音で通知するようにしてください

Claudeの処理が終わったらブラウザを更新してテスト（タイマーを1分に設定）
動作する場合は、変更をコミットします：
```
これらの変更を保存してください
```

ステップ15：スヌーズボタンを追加

Claude Codeで次のように入力します：

スヌーズボタンをクリックするまで音が鳴り続けるようにしてください

Claudeの処理が終わったらブラウザを更新してテスト（タイマーを1分に設定）
動作する場合は、変更をコミットします：
```
これらの変更を保存してください
```

ステップ16：コミット履歴を表示

Claude Codeで次のように入力します：
```
変更履歴を表示してください
```

Claudeがコミットを読みやすい形式で表示します。次のように表示されるはずです：

初期のタイマーアプリのコミット
プリセットボタン（1分と5分）のコミット
サウンド通知のコミット
スヌーズボタンのコミット

15分ボタンの試みはありません。破棄したからです。

ステップ17：コードを確認

アプリを表示しているブラウザで、右クリックして ページのソースを表示（View Page Source）を選択
ソースコードが表示されます

Claude Codeで次のように尋ねます：

このコードを説明してください。全体像だけで構いません

完全なワークフロー

Claudeに変更を依頼
テスト
動作する場合 → Claudeにコミットを依頼
失敗する場合 → Claudeに修正を依頼
修正できない場合 → 変更を破棄して再試行
繰り返し

いつでも任意のコミットに戻ることができます。恐れずに破棄してください。動作するコードだけをコミットします。

次のステップ

タイマーにさらに機能を追加してみましょう：

15分ボタン： 動作する15分プリセットボタンを追加してください（破棄したものをやり直します）
一時停止ボタン： タイマーの状態を切り替える一時停止/再開ボタンを追加してください
スタイル改善： モダンな配色と大きめのフォントで見た目を改善してください
プログレスバー： 残り時間を視覚的に示すプログレスバーを追加してください

各機能の後にテストし、成功したらコミット、失敗したら破棄することを忘れないでください。

トラブルシューティング

“not a git repository” エラー： test_claudeフォルダにいることを確認してください（cd ~\Documents\test_claude。ステップ4でOneDriveのパスを使った場合は cd ~\OneDrive\Documents\test_claude）
Windows上でtimer.htmlが見つからない： ファイルは C:\Users\YOUR_USERNAME\Documents\test_claude\timer.html にあります（ステップ4でOneDriveのパスを使った場合は C:\Users\YOUR_USERNAME\OneDrive\Documents\test_claude\timer.html）
git コマンドが見つからない： Git for WindowsをインストールしたらPowerShellを閉じて開き直してPATHを更新し、もう一度 git --version を実行してください
タイマーが動作しない： ブラウザコンソールを開いて（ページを右クリック、検証（Inspect）を選択、コンソール（Console）タブをクリック）、赤いエラーメッセージをコピーしてClaudeに貼り付けてください

Claudeに依頼できること

どのファイルを変更しましたか？ - コミットされていない変更を確認
差分を表示してください - 変更されたコードを正確に確認
タイマーのコードが何をしているか説明してください - 実装を理解
experimentという名前のブランチを作成してください - リスクのある変更を安全に試す
最後のコミット以降の変更をすべて元に戻してください - まだ保存していない変更を破棄

ClaudeはすべてのGit操作を自然言語で処理します。コマンドを覚える必要はありません。

ワークフロー概要

セットアップ： Gitを一度インストールし、名前とメールアドレスを一度設定
開発： Claudeがコードを書き、ブラウザでテスト
バージョン管理： ClaudeがシンプルなリクエストですべてのGit操作を処理
安全性： いつでも不適切な変更を破棄し、任意の過去のコミットに戻れる
ローカル： Gitの履歴はコンピューター上にとどまり、GitHubアカウントは不要（Claude Code自体にはインターネット接続とClaudeアカウントが必要です）

Steven Ge 作成（2025年12月8日）