ホーム

GitHub DesktopとClaude Codeを組み合わせて使う

AIが自動でファイルを書き換えると、ときには完璧に動き、ときには思わぬ不具合が出ます。そこで役立つのがGit。Gitはプロジェクト全体に対する「取り消しボタン」です。コミット（スナップショット）を重ねれば、いつでも安全な状態に戻せます。

このガイドでは、GitHub Desktop の視覚的なGit操作と Claude Code のAIコーディングを組み合わせ、シンプルなタイマーアプリを作りながらバージョン管理の流れを体験します。

キーコンセプト

• Git：ローカルPCでファイルの全変更履歴を記録
• GitHub：クラウド上のバックアップ兼共有先
• GitHub Desktop：GitをGUIで操作できる公式アプリ
• Claude Code：コード作成・修正・コミットまで自然言語でこなすAIアシスタント

このチュートリアルで行うこと

シンプルなタイマーアプリをClaude Codeで作成し、GitHub Desktopで全ての変更を管理します：

• プロジェクトとタイマーアプリを作成
• テストしてエラーを修正
• 変更をコミットしてプッシュ
• 失敗した変更を破棄して再試行
• Claudeにコミットを自動化させる

必要なもの

• WindowsへのClaude CodeインストールまたはMacへのClaude Codeインストールが完了していること
• バージョン管理を始めようが完了していること
• 20分

ステップ1：プロジェクトを作成

• GitHub Desktop を開く
• File → New Repository をクリック
• 入力：
  • Name： test_claude
  • Description： A timer app built with Claude Code
  • Local Path： Documentsフォルダ
  • 「Initialize this repository with a README」にチェック
• Create Repository をクリック
• 上部の Publish repository をクリック
• Publish Repository をクリック

ローカルプロジェクトとGitHub上のクラウドバックアップが作成されました。

ステップ2：Claudeにタイマーアプリを作成させる

• ターミナルを開く
• プロジェクトに移動：

  cd ~/Documents/test_claude
  

• Claude Codeを起動：

  claude
  

• 次のリクエストを入力： ``` timer.htmlという単一のファイルにシンプルなカウントダウンタイマーアプリを作成してください。 以下の機能を含めてください：
  • 分数を設定する入力フィールド
  • 開始ボタンと停止ボタン
  • MM:SS形式で残り時間を表示する画面
  • タイマーがゼロになったら「時間です！」と表示 インラインCSSとJavaScriptでシンプルに作成してください。 ```

Claudeが timer.html ファイルを作成します（10〜30秒）。

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

• GitHub Desktopで、Repository → Show in Finder/Explorer をクリック
• timer.html をダブルクリックしてブラウザで開く
• タイマーを試す：
  • 入力フィールドに 1 と入力
  • Start をクリック
  • カウントダウンを確認

動作すれば： ステップ5へ。 何か壊れていれば： ステップ4へ。

ステップ4：エラーを修正（必要な場合）

• ブラウザコンソールを開く（ページ上で右クリック → 検証 → Console タブ）
• 赤いエラーメッセージをコピー
• ターミナルのClaude Codeに戻る
• エラーを貼り付け：

  このエラーが表示されます：[エラーを貼り付け]。修正してもらえますか？
  

• ブラウザを更新（再読み込みボタンをクリックまたは右クリック → 再読み込み）して再テスト

ステップ5：変更を確認

• GitHub Desktop に切り替え
• 左パネル： 変更されたファイル（timer.html）を表示
• 右パネル： コード（緑＝追加）を表示
• Claudeが作成した内容を読んで理解する

AIが生成したコードはコミット前に必ず確認しましょう。

ステップ6：手動でコミット

• 左下の Summary フィールドに入力：

  開始/停止機能付きの初期タイマーアプリを作成
  

• Commit to main をクリック

セーブポイントが作成されました！

良いメッセージ例： 「初期タイマーアプリを作成」、「開始ボタンを修正」 悪いメッセージ例： 「変更」、「更新」、「asdf」

ステップ7：GitHubへプッシュ

• 上部の Push origin ボタンをクリック
• 確認：Repository → View on GitHub でコードがオンラインで見られることを確認

コードがクラウドにバックアップされました。

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

• Claude Codeのターミナルで：

  タイマーがゼロになったら音で通知するようにしてください。ブラウザ標準のビープ音か、
  シンプルなオーディオアラートを作成してください。
  

• テスト：ブラウザを更新し、0.1分でタイマーを設定し、Startをクリック

このチュートリアルでは： サウンドがうまく動作しない設定にします。まだコミットしないでください！

ステップ9：GitHub Desktopで変更を破棄

AIが間違った方向に進んでしまうことがあります。そんなときは最後のコミット（セーブポイント）からやり直しましょう。

1. GitHub Desktop を開く
2. Branch メニュー → Discard All Changes
3. 確認ダイアログで Discard Changes をクリック
4. ブラウザを更新 - サウンド機能なしのタイマーに戻ります！

壊れたコードを捨てて、最後のセーブポイントに戻ることができました。

ステップ10：最初からやり直す

• Claude Codeで：

  タイマーがゼロになったら音で通知するようにしてください。今回はHTML5のaudio要素と
  Web Audio APIで生成したシンプルなビープ音を使用してください。ブラウザの自動再生制限に
  適切に対応するようにしてください。
  

• すぐにテスト（ブラウザを更新、0.1分に設定、Start）

動作すれば： ステップ11へ進む。 動作しなければ： エラーをClaudeに貼り付けるか、再試行。

ステップ11：Claudeにコミットとプッシュを任せる

• Claude Codeで：

  変更をコミットしてプッシュしてください
  

Claudeが変更を確認し、コミットメッセージを書き、コミットしてプッシュします（10〜20秒）。

いつ使うか：

• 手動コミット：学習中、または制御したいとき
• Claudeコミット：素早く作業したい、良いメッセージが欲しいとき

ステップ12：Claudeに変更を要約してもらう

• Claude Codeで：

  どのファイルを変更しましたか？
  

Claudeが変更内容を分かりやすく説明してくれます。

試してみましょう： 音声コードが何をしているか説明してください や 最近の5つのコミットを表示してください

ステップ13：履歴を確認

• GitHub Desktop で History タブをクリック

以下のように表示されます：

• Initial commit（README）
• Create initial timer app
• Add improved sound notification

最初に失敗したサウンドの試みはありません - 破棄したからです！動作するコードだけがコミットに残っています。

発展課題

• カスタム音源：freesound.orgから無料の.mp3をダウンロードし、プロジェクトフォルダに配置、Claudeに使用させる
• 複数タイマー：ユーザーが複数のタイマーを同時に作成・実行できるようにしてください
• プログレスバー：残り時間を視覚的に示すプログレスバーを追加してください

覚えておきましょう： 各機能の後で必ずテスト → 成功ならコミット → 失敗なら即破棄、というリズムを守りましょう。

GitHub.comでプロジェクトを表示： GitHub Desktopで Repository → View on GitHub をクリックすると、完全なコミット履歴とコードをオンラインで確認できます。

トラブルシューティング

「認証失敗」： GitHub Desktop → File/環境設定 → Accounts → サインアウトして再度サインイン

Claudeが「not a git repository」と表示： 正しいフォルダにいることを確認（cd ~/Documents/test_claude）

タイマーが動作しない： ブラウザコンソールを開き（右クリック → 検証 → Console）、エラーをコピーしてClaudeに貼り付け

困ったときは： GitHub Desktopドキュメント • Claude Codeドキュメント

完全なワークフロー

• Claudeに変更を依頼
• ブラウザでテスト
• 動作すれば → レビューしてコミット
• 失敗すれば → 破棄して再試行
• GitHubにプッシュ
• 繰り返し

手動コミットは制御が必要なとき。Claudeコミットはスピードが欲しいとき。恐れずに破棄しましょう - 動作するコードだけをコミット！

次のステップ

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

簡単な改善：

• 5、10、15分のプリセットボタン：3つのプリセットボタンを追加してください：「5分」「10分」「15分」
• 一時停止ボタン：タイマーの状態を切り替える一時停止/再開ボタンを追加してください
• スタイリングの改善：モダンな配色で見た目を改善してください

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