【非エンジニア向け】Claude Code（VSCode版）を使ってGit管理を始めよう

「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。

14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。

（先着限定、5月10日まで）

» 「司令塔」側に回る14日間プランを見る

Web制作ではほぼ必修、最近ではWeb以外の業種でも使われる機会の増えているGit。
始めてみようと思っても、自分一人だと「出来ているのかよくわからない」とか、「コマンドを調べてターミナルに入力して…面倒…」なんてこと、あるのではないでしょうか。

実はClaude Codeを使うと、毎回ターミナルで操作をしなくても、言葉で伝えるだけでGit操作をしてくれます。非エンジニアの方、ターミナル操作が苦手な方でも作業しやすいので、ぜひClaude Codeと一緒にチャレンジしてみてください。

• Git管理について知ろう
• Webサイトの作成・編集の問題
• Gitとは「セーブポイント」を作る仕組み
• Gitを活用するとできるようになること
• Gitを使ってみよう
• 1. デモで行うこと
• 2. Gitのセットアップを行う
• 3. 最初のコミット（セーブポイント）を作る
• 4. コミット地点に戻してみよう
• 5. ブランチを使ってみよう
• 今回のまとめ

Git管理について知ろう

Webサイトの作成・編集の問題

Webサイトを作っていると、こんな場面に出くわすことがあります。

修正したら別のところが壊れた。でも元に戻せない…

Claudeにコードを直してもらったけど、どこを変えたのかわからなくなった…

昨日までは動いていたところが動かなくなった。どこの編集が原因かわからない…

Webサイト制作を学習している方、実際にお仕事でコードに触れる方の多くが経験しているのではないでしょうか？

予防策として、作業前にフォルダやファイルを複製してバックアップを作る方法もあります。
ですが、手間がかかるし、ファイルが増えて嵩張るし、わかりにくい。
時々、バックアップを取り忘れた…なんてことも起こります。

AIにコーディングをお願いする場合は、自分で修正する以上に「何をどこまで変えたのか」がわからなくなりがち。

しかも、直前の変更以外は元に戻せない・戻すのが大変です。
「色々AIと相談しながら進めているけど、コードがぐちゃぐちゃになってきた。一旦作業開始前までリセットしたい」なんて時に、結構困りますよね。

そこで登場するのが Git を使用したファイル管理です。

Gitとは「セーブポイント」を作る仕組み

Git（ギット）とは、ファイルの変更履歴を記録・追跡するバージョン管理システムです。

イメージとしては、ゲームのセーブポイントです。
セーブしておけば、育成に失敗したり、ボスに負けても、セーブ地点からやり直せますよね。

Gitも同じように「今の状態を記録しておく」ことができます。
何かおかしくなったときに記録した時点まで戻すことができます。

Gitでは記録することを コミット と言います。
コミットするたびに、その時点のスナップショットが保存されます。

Gitを活用するとできるようになること

• AIが修正した箇所をひと目で確認できる
• 「やっぱり元に戻したい」をいつでも実行できる
• ブランチを活用して、安全に更新・修正作業を進めることができる
• GitHubと連携して、ファイルをクラウドに保存できる

Gitを使ってみよう

1. デモで行うこと

前回の記事ではHTMLを修正ました。
これからWordPressサイト（テーマ）に移し替えをするところですので、テーマディレクトリwpedbase_2をGit管理下に置いてみます。

そして、実際にGitを使いながら、テーマへの変更反映を行っていきます。

素材：02-wpedbase_2_git
ダウンロードはこちら

ローカル環境にあるWordPressのthemesディレクトリ内に素材を入れ、WordPressサイトでテーマを有効化すると確認しやすいと思います。

2. Gitのセットアップを行う

2-1. Gitのインストール

VSCodeのメニューから ターミナル → 新しいターミナル を開いてください。

ターミナルが開いたら、以下のコードを入力してEnterキーを押してください。

git --version

↓

git version 2.○○.○ のように表示されたら、インストール済みです。
次のステップに進んでください。

「command not found」など、エラーが出た場合

Gitがインストールされていないので、インストールを行ってください。

◆ Windowsの場合
ターミナルに以下を貼り付けて実行してください。

winget install Git.Git

◆ Macの場合
ターミナルに以下を貼り付けて実行してください。

xcode-select --install

画面の指示に従ってインストールしてください。

インストールが完了したら、VSCodeを再起動して git --version をもう一度試してください。

2-2. 名前とメールアドレスの登録

Gitはコミットするたびに「誰がセーブしたか」を記録します。
そのために必要となる、名前とメールアドレスを登録します。

まず、すでに登録されているか確認してみましょう。

git config --global user.name

git config --global user.email

名前とメールアドレスが表示されたら登録済みです。
次のステップに進んでください。

何も表示されなかった場合は、以下の2行を順番に実行してください。
" " の中だけ、あなたのものに書き換えます。名前は本名でなくニックネームでOKです。

git config --global user.name "あなたの名前"

git config --global user.email "your@email.com"

何も表示されなければ設定出来ています。
不安な方は、もう一度、最初の確認用コマンド（ git config --global user.name など）で再確認してください。

2-3. テーマフォルダをGit管理下に置く

ここまでで下準備は出来ました。Git管理を始めましょう！

まず、Git管理したいフォルダに自分がいるか確認してください。

以下のコマンドを入力し、実行してください。
こちらは、新しいGitリポジトリを作成するコマンドです。 リポジトリとは、ファイルやディレクトリの「状態」を記録する場所のようなものです。

git init

Initialized empty Git repository と表示されたら成功です。
下図のようにすべてのファイル名の横に 「U」 という緑色の文字が表示されますが、正常です。

この U という表示は「Gitに認識されたけど、まだコミットしていない」という状態を表しています。

3. 最初のコミット（セーブポイント）を作る

初期設定が出来たので、これからGitを使って、ファイル管理をしていくことになります。
通常であればaddしてcommitして…とターミナルでコマンド操作をしていくのですが、VSCodeとClaude Codeを連携している場合はチャットでClaude Codeへ日本語で指示するだけで管理ができます。

Claude Codeのパネルを開いて、以下のように話しかけてみましょう。
ターミナルは邪魔なら閉じてしまってもOKです。

今の状態をコミットしてください。
メッセージは"最初の状態"でお願いします。

ClaudeがすべてのファイルをGitに登録して、最初のコミットを作ってくれます。

コミットが完了すると、VSCodeのサイドバーからUの表示が消えます。
「記録された」という合図です。

VSCodeの左サイドバーにある ソース管理アイコン（枝分かれのマーク）をクリックしてみてください。 Claude Codeにお願いした「最初の状態」という表示、その横にあなたの名前が表示されているはずです。

ここに表示されているのがGitのコミット、つまりセーブを実行した場所です。
何のためにセーブをしたかを示す見出しのような部分、今回でいう最初の状態のことを「コミットメッセージ」と言います。

4. コミット地点に戻してみよう

コミットを追加しておくことで、コミット後の変更をなかったことにできます。
「あ、これ失敗した…」と思ったときに、コミットした時の状態にすぐ復旧できるのです。

試しにファイルを変更してみましょう。
わかりやすく、style.cssでbody要素の背景色を変えてみます。 Claude Codeに頼んでもいいですし、直接編集してもOKです。

ここで左サイドバーのソース管理アイコン（枝分かれのマーク）をクリックしてみましょう。

「変更」の欄に、今変更したstyle.css が表示されています。
左にあるMはModified（修正済み）の略で、ファイルが前回のコミット以降に変更されていることを示しています。

では、本題。
Claude Codeに頼んで、変更を元に戻してもらいましょう。

コミット後に行った変更を無くしたい。
最後にコミットした状態まで戻してください。

メッセージを送信すると、ClaudeがGit操作を行ってくれます。
「元に戻せないけど良い？」というように確認が出た場合は、返信しましょう。

Claudeが git restore を実行して、最後にコミットした状態に戻してくれます。
ファイルも、ブラウザ表示も、変更前の表示に戻りました。

今回はstyle.css一行だけでしたが、例えば「新しいクラスを作って、そのクラスにスタイル指定をして…」など複数ファイルを更新しますよね。こうした場合、その作業を取りやめるときに、複数ファイルを一気に元の状態に戻せるので便利です。

コミットは「ここまでOK」という意思表示です。
コミットする前であれば、どんな変更も気軽になかったことにできます。

逆に言うと、「ここまでは戻れる」というセーブポイントを作っておくことが大切です。
AIに大きな修正を頼む前なども、一度コミットしておくと確実でしょう。

5. ブランチを使ってみよう

これまでの作業はすべて master（環境によってはmain） という名前のブランチで行っていました。
VSCodeのや、ターミナルで現在地の後にカッコで表示されているのがブランチです。

Gitのブランチとは、安全に作業を行うために用意されている機能です。
ブランチを使うと、本線（master/main）を触らずに作業できる平行世界を作ることができます。

• 更新するためにAブランチ（本データのコピー）を作る。
  • Aブランチの作業が上手くいったら本データに取り込む。
    
  • 上手くいかなければ、Aブランチごと捨ててしまう。（本データは無傷）

本線（master/main）ブランチだけ、先ほど試したように「コミットした状態まで戻す」ことは出来ます。
ですが、コミットが増えすぎたりして分かりにくい、本線がおかしくなってしまう…などのデメリットがあります。

本線には極力触らずに作業をすることで、もっと気軽に色々な更新を試すことができます。

以下のように使い分けるイメージです。

• 本線（master/main）ブランチ：確定版
• その他のブランチ：開発作業用

AIに修正を頼むときも、ブランチを切ってから作業するのがおすすめです。

5-1. ブランチを切る

新しく作業用のブランチを作ることを「ブランチを切る」と言います。
ここも、コマンドを使わずに、Claude Codeに頼むだけでOKです。

feature/navという名前でブランチを作って、そちらに切り替えてください。

　↓
Claude Codeがブランチの作成・切り替えを行ってくれます。
VSCodeの左下に表示されているブランチ名が、feature/nav に変っていれば、作ったブランチに移動出来ています。

※ ターミナルでの表示が変わらない場合は、新しいターミナルを開き直すと最新の位置feature/nav になります。

ちなみに、ブランチ名はお好きに命名して良いです。
本記事ではfeature/やること という形で進めます。

5-2. ブランチ上でAIに修正してもらう

feature/navブランチで、Claude Codeに作業をお願いしてみましょう。

header.phpのナビゲーションを修正したい。
company.html で設定した、スマホ幅ではハンバーガーメニューになるナビゲーションを適用してください。

Claude Codeから完了報告が来たら、ブラウザで表示を確認しましょう。

デモの場合は、PC幅表示は問題なし。
ただ、スマホ幅にした時の開閉が出来ませんでした。

追加でClaude Codeに修正を依頼しましょう。
もちろん、原因がわかっていれば原因を記述したり、自分で直してしまっても良いです。

Claude Codeに修正を依頼するなら...

スマホ幅にした時に、ハンバーガーメニューをタップしても開閉しません。
原因を探して修正してください。

自分で直すなら...

再びブラウザで動作を確認し、問題なく使える状態になればコミットします。

ここまでの変更をコミットしてください。
メッセージは"ナビゲーション修正"でお願いします。

これで feature/headerブランチのコミットは作成できました。
次に、この変更を本線（master/mainブランチ）に取り込む作業を行います。

5-3. 変更箇所の確認は？

変更作業をしていると、どこを修正したのか分からなくなってくることがあります。

そんな時は、VSCode左サイドバーにあるソース管理アイコン（枝分かれのマーク）を使って差分を確認しましょう。 コミット前、コミット後により表示位置が少し違いますが、どちらでもファイル名をクリックすると差分が確認できます。

• 緑色の行：追加された部分
• 赤色の行：削除された部分

差分確認後は、×アイコンでタブを閉じてしまって良いです。

「今回の変更内容を日本語で説明してください。」などとチャットで送信すれば、Claude Codeに差分確認、変更箇所箇所の要約をしてもらうこともできます。
コード逐一を読まなくても、何がどう変わったかを言葉で把握できるのがAIを使う利点です。

5-4. 本線にマージする

feature/headerブランチでコミットを作成しました。
これはまだ平行世界でのセーブポイントが出来ただけの状態です。

次に、この変更を本線（master/mainブランチ）に取り込む作業を行います。 これを マージ（merge） と言います。

マージする場合は、本線に戻ってそこからブランチの変更を取り込む…という操作が必要ですが、ClaudeCodeに以下の一行を送るだけで済みます。

feature/navブランチを、mastarにマージしてください。

mergeが完了しました。
VSCodeの左下にある現在使っているブランチ名の表示が、masterに戻っています。

もう一度ローカルWordPressを開いて、ヘッダーの修正が反映されたままか確認しましょう。
ナビゲーションが正しく動いていれば成功しています。

補足：マージしたけど、やっぱりおかしい…という場合

マージ後にブラウザで確認したら、表示が壊れてしまった。
そんなときは、ブランチを削除して切り直すのが一番シンプルです。

まず本線（masterブランチ）を修正前の状態に戻します。

マージしたら表示がおかしくなってしまった。
masterブランチを、feature/navをマージする前の状態に戻してください。

次に、先ほどのブランチに戻って調整・修正するか、削除して作り直します。

元のブランチに戻って調整をしたい場合は、その旨をチャットで送ります。

feature/navブランチで修正を行います。
ブランチを切り替えてください。

削除してやり直したい、という場合は、以下のように送信すればOK。

feature/navブランチを削除してください

その後は、もう一度 5-1：新しいブランチを作成 からの流れで進めていきます。
mainは無傷、ブランチはいつでも捨てて作り直せる。
これがブランチを使う一番の安心ポイントです。

今回のまとめ

CloudeCodeを使うと、ターミナル操作をほとんど使わずにGit管理ができます。

• 本線（master / main ）があること
• コミットを使ってセーブポイントを作れること
• 作業用のブランチが作れること
• 作業用のブランチでの変更は、本線にマージできること

この４つのイメージだけあれば、CloudeCodeにチャットで指示をするだけで使えます。

Git管理を取り入れることで、Webサイトの制作が安全に行えます。
自分で逐一バックアップファイルを作らなくても良いので、作業負担も減ります。
メリットがたくさんあるので、ぜひ活用していきましょう。

今回お伝えしたGit作業は、すべて自分のパソコンの中だけで完結しています。

次の記事では GitHub を使って、Git管理している情報をインターネット上に保存する方法を紹介します。

この方法が使えると、ファイル管理を更に万全にできるほか、他の人と共同作業ができるようになります。
お仕事でも使用する機会が多いところですので、GitHubにもチャレンジしてみてください。

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。