ホーム

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： Choose… をクリックして 書類（Documents, Mac）または ドキュメント（Documents, Windows）フォルダを選択（初期設定ではドキュメント内の GitHub フォルダになっているので、変更してください）
  • 「Initialize this repository with a README」にチェック
• GitHub Desktopに「appears to be a Git repository」（Gitリポジトリのようです）と表示された場合は、Gitのチュートリアルで作った test_claude フォルダがすでにあります。その古いフォルダの名前を エクスプローラー（File Explorer）または Finder で変更し（例：test_claude_old）、もう一度試してください
• Create Repository をクリック
• 上部の Publish repository をクリック
• Publish Repository をクリック

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

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

• ターミナルを開く：Windowsでは PowerShell、Macでは ターミナル（Terminal）
• プロジェクトに移動：

  cd ~/Documents/test_claude
  

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

• Claude Codeを起動：

  claude
  

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

  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 1 file to main のように表示されています）

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

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

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

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

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

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

• Claude Codeのターミナルで：

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

• テスト：ブラウザを更新し、タイマーを1分に設定し、開始（または Start）をクリック

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

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

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

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

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

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

• Claude Codeで：

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

• すぐにテスト（ブラウザを更新、1分に設定、開始（または Start）をクリック）

動作すれば： ステップ11へ進む。

動作しなければ： エラーをClaudeに貼り付けるか、再試行。

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

• Claude Codeで：

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

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

Claudeがプッシュに失敗したと言った場合（たとえば could not read Username や、git が認識されないなど）：GitHub Desktop に切り替えます。変更されたファイルがまだ表示されている場合は、自分でコミットします（ステップ6と同様）。その後、上部の Push origin をクリックします。GitHub DesktopはすでにGitHubにサインインしています。

いつ使うか：

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

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

• Claude Codeで：

  最後のコミットで何が変わりましたか？
  

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

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

ステップ13：履歴を確認

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

以下のように表示されます（新しいものが上）：

• サウンド通知を追加したClaudeのコミット（文言は異なる場合があります）
• 開始/停止機能付きの初期タイマーアプリを作成（ステップ6で入力したメッセージ）
• Initial commit

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

発展課題

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

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

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

トラブルシューティング

「Authentication failed」と表示される： GitHub Desktopで File → Options → Accounts（Windows）または GitHub Desktop → Settings → Accounts（Mac）を開き、サインアウトして再度サインイン

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日）