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

Claude Codeに変更を任せると、コードベースはどんどん書き換わります。完璧に動くときもあれば、期待とは違う結果になることも。そんなとき、Gitは「プロジェクト全体の取り消しボタン」として力を発揮します。スナップショット（コミット）を積み重ねれば、いつでも安全な状態に戻れます。しかもコミットや差分確認といった操作もClaude Codeに任せられます。

主要な概念

ターミナル：Macに標準搭載されているコマンドラインツール
Git：変更履歴を記録し、復元ポイントを作るバージョン管理システム
コミット：特定時点の状態を説明付きで保存するスナップショット
Claude Code：自然言語の指示でコード作成やGit操作までこなすAIアシスタント

必要なもの

MacにClaude Codeをインストール済み
所要時間：30分

ステップ1：ターミナルを開く

次のいずれかの方法を選択してください：

Spotlight：Command (⌘) + Spaceを押し、ターミナルと入力してEnterを押す
Finder：アプリケーション > ユーティリティ > ターミナルを開く
Launchpad：DockのLaunchpadをクリックし、ターミナルを検索

$または%で終わるコマンドプロンプトが表示されます。

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

Macには多くの場合Gitが事前にインストールされています。確認してみましょう：

次のコマンドを入力してEnterを押します：
```
git --version
```

バージョン番号が表示される場合（例：git version 2.39.0）、Gitはすでにインストールされています。ステップ3に進んでください。

「command not found」と表示される場合、または開発者ツールをインストールするポップアップが表示される場合：

ポップアップのインストールをクリックするか、次のコマンドを実行します：
```
xcode-select --install
```
インストールが完了するまで待ちます（1〜5分）
Gitがインストールされたことを確認します：
```
git --version
```

git version 2.39.0のような表示が出ればOKです。

ステップ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
```

/Users/YOUR_USERNAME/Documentsと表示されるはずです。

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

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

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

ステップ6：Claude Codeを起動

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

Claude Codeが起動し、リクエストを待機します。

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

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

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

Claudeがフォルダ内にGitリポジトリを初期化します（2〜5秒かかります）。これでバージョン管理が有効になりました！

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

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

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

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

Finderを開く
書類 > test_claudeに移動
timer.htmlをダブルクリックしてブラウザで開く
タイマーを試してみます：
- 入力欄に1と入力
- Startをクリック
- カウントダウンを確認

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

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

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

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

Claudeは次のことを行います：

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

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

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

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

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

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

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

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

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

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

ステップ13：変更を破棄

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

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

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

Claudeが確認を求めます
yesと入力してEnterを押します
ブラウザを更新すると、15分ボタンが消えます

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

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

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

時間になったら音で通知するようにしてください

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

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

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

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

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

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

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

Claudeがコミットを読みやすい形式で表示します。次のものが表示されます：

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

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

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

アプリを表示しているブラウザで、右クリックしてページのソースを表示を選択（またはOption (⌥) + Command (⌘) + Uを押します）
ソースコードが表示されます

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

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

完全なワークフロー

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

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

次のステップ

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

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

覚えておいてください：各機能の後にテストし、成功したらコミットし、失敗したら破棄します。

トラブルシューティング

「not a git repository」エラー： test_claudeフォルダにいることを確認してください（cd ~/Documents/test_claude）
Finderでtimer.htmlが見つからない： ファイルは/Users/YOUR_USERNAME/Documents/test_claude/timer.htmlにあります
Gitコマンドが動作しない： ステップ2を完了してGitをインストールしたことを確認してください
タイマーが動作しない： ブラウザコンソールを開き（ページを右クリックして検証を選択し、コンソールタブをクリック）、赤いエラーメッセージをコピーしてClaudeに貼り付けます

Claudeに依頼できること

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

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

ワークフロー概要

セットアップ： Gitを一度インストールし、一度IDを設定
開発： Claudeがコードを書き、ブラウザでテスト
バージョン管理： Claudeが簡単なリクエストを通じてすべてのGit操作を処理
安全性： いつでも失敗した変更を破棄し、以前のコミットに戻れる
ローカル： すべてがコンピュータ上にとどまり、アカウントやインターネットは不要

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