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

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

主要な概念

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

必要なもの

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

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

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

Spotlight：Command (⌘) + Spaceを押し、ターミナルと入力してEnterを押す
Finder：アプリケーション（Applications） > ユーティリティ（Utilities） > ターミナル（Terminal）を開く

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

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

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

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

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

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

ポップアップのインストール（Install）をクリックするか、次のコマンドを実行します：
```
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サブスクリプションでログインしてください。ログイン後、ウェルカムメッセージと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：タイマーをテスト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Claude Codeで次のように入力します：
```
15分ボタンを追加してください
```
ブラウザタブを更新します（Command (⌘) + 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）を選択（またはOption (⌥) + Command (⌘) + Uを押します）
Safariを使っている場合： まずSafari > 設定 > 詳細をクリックし、Webデベロッパ用の機能を表示にチェックを入れます。次にページを右クリックしてページのソースを表示を選択します
ソースコードが表示されます

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をインストールしたことを確認してください
タイマーが動作しない： ブラウザコンソールを開き（ページを右クリックして検証（Inspect）を選択し、コンソール（Console）タブをクリック。Safariの場合は、まずステップ17の手順で開発者向け機能を有効にしてから要素の詳細を表示を選択）、赤いエラーメッセージをコピーしてClaudeに貼り付けます

Claudeに依頼できること

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

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

ワークフロー概要

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

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