VS CodeでGitを始める

プログラミングを楽しく安全に進めるために、Gitというバージョン管理システムの使い方を説明します。

Gitは、プログラムの変更を記録して管理する便利な道具です。

Gitはなんとなくいいなぁとは思っているのですが、これまで使った経験がありません。
VS Codeを使ってプログラミングをしているのですが、バージョン管理にGitを使いたいです。
コマンドまたはGUIのGitを使ってバージョンを管理できるようにしたいです。

VS Codeはインストールされていますが、Git用のプログラムはインストールされていません。
どのような構成でセッティングして使っていったらいいのか、具体的な構成や利用シーンを教えてください。
ただし、ローカルで完結させたいので、今のところGitHubを使うことは考えていません。

Gitとは何か

コードを書いていくと、「この機能を追加したらうまく動かなくなった」とか「前の状態に戻したい」と思うことがあります。

Gitは、プログラムのコードを管理するためのバージョン管理システムです。

コードを書く過程で、「この時点のコードを保存しておきたい」と思ったらコミットします。
「コミット」は写真を撮るようなもので、コードの変更履歴を「スナップショット」という形ですべて記録します。
いつでもその時点の状態に戻れます。

Gitを使うと、いつでも過去の状態に戻れます。
これが「バージョン管理」です。

Gitを使うメリットと注意点

Gitを使うメリットはたくさんあります。

1. 間違えても安心です。
   いつでも前の状態に戻れます。
2. 変更の履歴がわかります。
   いつ、何を、なぜ変更したのかが記録されます。
3. チームで開発する場合、誰がどんな変更をしたのかが明確になります。
4. 複数の機能を同時に開発できます。
   ブランチを使えば、一つの機能を作りながら、別の機能も試せます。

Gitと「スナップショット」

Gitの仕組みの特徴は、プロジェクトにあるフォルダやファイルの全体を「スナップショット」として保存することです。

ただし、毎回、すべてのファイルを保存していくとデータ容量を食ってしまうので、変更がないファイルは前回のスナップショットへのリンクだけを保存します。

これらの情報は、プロジェクト内に作られる「.git」フォルダに保存されます。

Gitツールは、このデータを解釈してプロジェクトを復元します。

Gitは、ストレージ容量を節約するため、各ファイルの「内容」からハッシュ値と呼ばれる固有の識別子を計算します。
新しいファイルが追加されても、同じ内容のファイルなら必ず同じハッシュ値になるため、重複するファイルを認識できます。
すると、既存のファイルを参照するだけにして、重複するファイルは1つだけ保存すれば済むようになります。

また、ファイルに変更があった場合でも、差分管理と呼ばれる方法で、変更された部分だけを新しく保存することが可能です。

VSコードでGitを使えるようにする（インストール）

VSコードがインストールされているなら、まずはGitをパソコンにインストールしましょう。

1. Gitの公式サイト（https://git-scm.com/）にアクセスします。
2. ダウンロードボタンをクリックします。
3. あなたのパソコンのOSに合ったものをダウンロードします。
4. ダウンロードしたファイルを実行して、画面の指示に従ってインストールします。

brew install git

私は、brewコマンドでインストールしました。

<a href=”https://chiilabo.com/2025-03/homebrew-install-root-privileges-error/”>https://chiilabo.com/2025-03/homebrew-install-root-privileges-error/</a>

インストールが終わったら、VSコードを再起動します。
VSコードを起動すると、自動的にGitが認識されます。
左側のサイドバーに、ブランチのようなマークがあれば、Gitの機能が使えるようになっています。

ほとんどの場合、デフォルト設定のままでOKです。

バージョン管理を始める

ここからは、実際にバージョン管理をしていきましょう。

VSCodeでターミナルを開き（メニューの「表示」→「ターミナル」）、次のコマンドを入力します：

git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"
Code language: PHP (php)

これで、誰が変更を加えたのかが記録されるようになります。

新しいプロジェクトでGitを使い始める

プログラムのフォルダでGitを使い始めるには、VSCodeでそのフォルダを開き、ターミナルで次のコマンドを入力します：

git init

これで、そのフォルダの中の変更を記録できるようになります。

リポジトリの作成

バージョン管理する場所を「リポジトリ」と呼びます。これを作るには：

1. VSコードでフォルダを開きます（あなたのプロジェクトがあるフォルダです）。
2. 左側のGitアイコン（ブランチのマーク）をクリックします。
3. 「リポジトリを初期化する」ボタンをクリックします。

これで、そのフォルダ内にGitリポジトリが作られました。

基本的な使い方

変更を保存する（コミット）

プログラムを書いているとき、「ここまでうまくできた！」と思う場面があります。
その変更を記録することを「コミット」と呼びます。

1. VSCodeの左側にある「Git（ソース管理）」アイコンをクリックします。
2. 変更したファイルの一覧が表示されます
   （ファイルをクリックすると、変更内容が確認できます）
3. 変更を記録したいファイルの横にある「+」ボタンをクリックします
   （これを「ステージング」といいます）
4. 入力欄に変更の内容がわかるメッセージ（例：「ログイン機能を追加した」）を書きます。
5. 「コミット（チェックマーク）」ボタンをクリックして変更を記録します。

これで変更が記録されました。
例えば、「ログイン機能を追加した」「バグを修正した」などのメッセージを書くと、後で見たときに何をしたのかすぐわかります。

Gitは便利ですが、注意点もあります。

1. コミットはこまめにしましょう。
   大きな変更を一度にコミットすると、問題が起きたときに戻りにくくなります。
2. コミットメッセージは具体的に書きましょう。
   「修正」ではなく「ログインボタンのスタイルを修正」のように書くと、後で見たときにわかりやすいです。
3. パスワードや秘密の情報はGitに含めないようにしましょう。
   一度コミットすると、その情報は履歴に残ります。

変更を記録するときは、次のような書き方がお勧めです：

• 良い例：「ログインボタンの色を青に変更した」
• 良い例：「パスワード入力時のエラーメッセージを追加した」
• 悪い例：「修正」「変更」（具体的な内容が分からない）

変更の確認や破棄（差分管理）

どんな変更をしてきたか確認するには：

1. VSコードのGitアイコンをクリックします。
2. 「変更履歴を表示」をクリックします。

コミットの一覧が表示されます。
それぞれのコミットをクリックすると、どんな変更をしたのかが表示されます。

変更の差分（何が変わったのか）を見たいときは：

1. 変更したファイルをクリックします。
2. 画面に古い内容と新しい内容が並んで表示されます。

変更を取り消したいときは：

1. 変更したファイルを右クリックします。
2. 「変更の破棄」を選びます。

過去の状態に戻る方法（チェックアウト）

間違えて変更してしまったときは、以下の手順で元に戻せます：

1. 「ソース管理」画面の「タイムライン」をクリックします。
2. 表示される履歴から、戻りたい時点を探します。
3. その時点を右クリックして「チェックアウト」を選びます。
4. 確認のダイアログが表示されたら「はい」をクリックします。

大事な変更がある場合は、まず現在の状態をコミットしてから戻るといいでしょう。
そのまま「巻き戻す」と直近の変更はなくなってしまいます。

ブランチを使った共同開発（新機能を試すとき）

Gitの便利な機能の一つに「ブランチ」があります。
これは、メインのコードとは別の場所で新機能を試したりできる機能です。

1. 左下の「main」（または「master」）と書かれた部分をクリックします。
2. 「新しいブランチを作成」を選びます。
3. ブランチ名（例：「新機能テスト」）を入力します。

これで新しいブランチができました。
このブランチで変更を加えても、メインのコードには影響しません。
うまくいった後でメインのブランチに取り込むことができます。

ブランチを使うと、メインのコードを守りながら新しい機能を試せます。
うまくいったら取り込み、うまくいかなかったら捨てることもできます。

VS Codeプラグイン

VSCodeとGitを組み合わせて使用する際の標準的な構成とおすすめのプラグインについて説明します。

まず、VSCodeにはGit機能が標準で組み込まれています。
左側のサイドバーにある「ソース管理」アイコンをクリックすると、基本的なGit操作（コミット、プッシュ、プル、ブランチ操作など）が行えます。

さらに、以下のプラグインを追加することで、Git操作をより効率的に行えます：

• GitLens：
  コードの変更履歴や最終編集者を表示し、過去のコミット内容を確認できます。
• Git Graph：
  Gitの作業ツリーを視覚的に表示し、ブランチの状況を把握しやすくします。
• Gitmoji：
  コミットメッセージに絵文字を追加し、コミットの種類を視覚的に判断しやすくします。

その他、開発効率を向上させる一般的なプラグインとして：

• Prettier：コードを自動的にフォーマットし、読みやすく整えます。
• Auto Close Tag / Auto Rename Tag：HTMLタグの閉じタグを自動で追加・リネームします。
• Code Spell Checker：コード内の英単語のスペルをチェックします。

これらのプラグインを組み合わせることで、VSCodeでのGit操作がより簡単かつ効率的になります。

また、将来的にはGitHubも検討してみるといいでしょう。
GitHubを使うと、コードをインターネット上に保存できるので、パソコンが壊れても安心です。
また、他の人とコードを共有したり、協力して開発したりすることもできます。