Web制作をしていると「Gitを使えるようになりたい」と思う場面が増えてきます。私自身、最初はなんとなく怖くて避けていましたが、基本的なコマンドを覚えてしまえば日常的に使えるようになりました。

この記事では、私がGitを使い始めたときに「これだけ知っておけばよかった」と感じたコマンドや考え方を備忘録としてまとめています。後半ではVSCodeとの連携や、過去の変更履歴の確認・復元方法についても触れています。

Gitとは

Gitはファイルの変更履歴を記録・管理するためのバージョン管理システムです。「いつ・誰が・何を変更したか」を追跡できるので、過去の状態に戻したり、複数人で同じプロジェクトを安全に編集したりできます。

Web制作の現場ではGitHubやBitbucketなどのホスティングサービスと組み合わせて使うのが一般的です。

インストールと初期設定

インストール確認

ターミナル（Macならターミナル.app、WindowsならGit Bash）で以下を実行して、バージョンが表示されればインストール済みです。

git --version

まだの場合は公式サイトからダウンロードしてインストールします。

ユーザー名とメールアドレスの登録

Gitを使い始める前に、コミットに記録されるユーザー情報を設定しておきます。

git config --global user.name "自分の名前"
git config --global user.email "自分のメールアドレス"

設定内容は git config --list で確認できます。

基本の流れ：init → add → commit

Gitの基本的なワークフローは「リポジトリを作る → 変更をステージングする → コミットする」の3ステップです。

リポジトリの作成

プロジェクトのディレクトリに移動して git init を実行すると、そのディレクトリがGitリポジトリになります。

cd my-project
git init

これで .git という隠しフォルダが作成され、変更履歴の追跡が始まります。

変更をステージングに追加する

git add で「次のコミットに含めるファイル」を選択します。これをステージングと呼びます。

# 特定のファイルをステージング
git add index.html

# 変更されたファイルをすべてステージング
git add .

コミットする

ステージングした変更を履歴として記録します。-m オプションでコミットメッセージを付けます。

git commit -m "ヘッダーのレイアウトを修正"

コミットメッセージは「何をしたか」が分かるように書くのがポイントです。

状態を確認するコマンド

# 現在の状態を確認（変更ファイル、ステージング状況）
git status

# コミット履歴を確認
git log

# コミット履歴を1行ずつ表示（見やすい）
git log --oneline

# 変更内容の差分を表示
git diff

git status は一番よく使うコマンドです。迷ったらまずこれを実行すると、今何が起きているか把握できます。

変更履歴を確認する方法

「あのとき何を変えたんだっけ？」というのはよくある場面です。Gitではコミット単位で変更履歴を細かく追えます。

特定のコミットの変更内容を見る

# コミットIDの一覧を表示
git log --oneline

# 出力例
# a1b2c3d ヘッダーの色を変更
# e4f5g6h フッターを追加
# i7j8k9l 初回コミット

# 特定のコミットで何が変わったか確認
git show a1b2c3d

特定ファイルの変更履歴を追う

# そのファイルに関するコミット一覧
git log --oneline -- style.css

# 各コミットでの変更差分もまとめて見る
git log -p -- style.css

「このCSSいつ変えたっけ？」というときに重宝します。

過去のある時点のファイル内容を見る

# 特定コミット時点のファイル内容を表示（ファイルは変更されない）
git show a1b2c3d:style.css

現在のファイルを上書きせず、中身だけ確認できるので安全です。

過去のバージョンに戻す方法

Gitを使う大きなメリットのひとつが「前の状態に戻せる」ことです。戻し方にはいくつかパターンがあるので、状況に応じて使い分けます。

特定のファイルだけ前の状態に戻す

# 特定コミット時点のファイルをワーキングツリーに復元
git restore --source a1b2c3d -- style.css

この方法なら他のファイルに影響を与えず、指定したファイルだけ過去の状態に戻せます。復元されたファイルは未コミットの変更として扱われるので、確認してから git add → git commit すればOKです。

直前のコミットを取り消す

# コミットを取り消し、変更内容はステージングに残る
git reset --soft HEAD~1

# コミットを取り消し、変更内容はワーキングツリーに残る
git reset --mixed HEAD~1

--hard を使うと変更内容ごと消えてしまうので、慣れないうちは --soft か --mixed を使うのが安全です。

過去のコミットを打ち消す新しいコミットを作る（revert）

git revert a1b2c3d

revert は指定したコミットの変更を打ち消す「新しいコミット」を作成します。履歴を書き換えないので、すでにリモートにプッシュ済みのコミットを取り消したいときはこちらが安全です。

resetとrevertの使い分け

ざっくり言うと、まだプッシュしていないコミットなら reset、すでにプッシュ済みなら revert を使います。reset は履歴自体を巻き戻すので、他の人がすでにプルしている状態で使うと混乱の原因になります。

ブランチの基本

ブランチは「作業の分岐」を作る機能です。メインのコードに影響を与えずに、新機能の開発や修正を進められます。

# ブランチの一覧を表示
git branch

# 新しいブランチを作成して切り替え
git switch -c feature/header-redesign

# ブランチを切り替え
git switch main

# ブランチをマージ（mainにいる状態で実行）
git merge feature/header-redesign

# マージ済みのブランチを削除
git branch -d feature/header-redesign

ブランチ名は feature/〇〇 や fix/〇〇 のように、何のための作業かが分かる名前にしておくと管理しやすいです。

なお、以前は git checkout -b でブランチ作成・切り替えをしていましたが、最近は git switch が推奨されています。checkout は機能が多すぎて分かりにくいという理由から、ブランチ操作専用のコマンドとして switch が追加されました。

リモートリポジトリとの連携（GitHub）

ローカルのリポジトリをGitHubなどのリモートリポジトリと紐づけることで、コードのバックアップや共有ができます。

リモートの追加とプッシュ

# リモートリポジトリを登録
git remote add origin https://github.com/ユーザー名/リポジトリ名.git

# ローカルの変更をリモートに送信
git push origin main

クローンとプル

# 既存のリモートリポジトリをローカルにコピー
git clone https://github.com/ユーザー名/リポジトリ名.git

# リモートの最新状態をローカルに取り込む
git pull origin main

VSCodeとGitの連携

VSCodeにはGit機能が標準で組み込まれているので、ターミナルでコマンドを打たなくてもGUI上でほとんどの操作ができます。コマンドに慣れていないうちは、VSCodeの画面を見ながら操作すると理解が進みやすいです。

ソース管理パネル

サイドバーの分岐アイコン（またはショートカット Ctrl + Shift + G）でソース管理パネルが開きます。ここで変更されたファイルの一覧、差分の確認、ステージング、コミットまで一通りの操作ができます。

具体的には以下のような操作がGUIでできます。

  • ファイル名の横にある + ボタンでステージング（git add に相当）
  • 上部の入力欄にメッセージを入力して「コミット」ボタンを押す（git commit に相当）
  • 「…」メニューからプッシュ、プル、ブランチ作成なども実行可能

差分の確認（diff）

ソース管理パネルで変更ファイルをクリックすると、左右に分割されたdiffビューが開きます。赤が削除された行、緑が追加された行です。コマンドの git diff と同じ情報ですが、色付きで視覚的に確認できるのでかなり見やすいです。

ブランチの切り替え

VSCodeの左下にあるブランチ名をクリックすると、ブランチの一覧が表示されて切り替えや新規作成ができます。git switch と同じ操作がワンクリックでできるので便利です。

タイムラインビューで過去の変更を確認

エクスプローラーパネルの下部にある「タイムライン」セクションを開くと、選択中のファイルに対する過去のコミット履歴が時系列で表示されます。各コミットをクリックするとその時点との差分が確認できるので、「このファイルがいつどう変わったか」を追うのに最適です。

おすすめ拡張機能：GitLens

VSCode標準のGit機能でも十分使えますが、GitLensという拡張機能を入れるとさらに便利になります。

  • 行ごとのblame表示：各行の右側に「誰がいつ変更したか」が薄く表示される。チームで作業するときに特に便利
  • ファイル履歴ビュー：ファイルを右クリック →「Open File History」で、そのファイルの全コミット履歴を一覧表示
  • コミット同士の比較：任意の2つのコミット間の差分を表示できる

個人開発でもファイル履歴ビューは重宝するので、入れておいて損はないと思います。

コマンドとGUIの使い分け

VSCodeのGUIだけでも一通りの操作はできますが、ターミナルでのコマンドも覚えておくことをおすすめします。GUIは「何が起きているか」を視覚的に把握するのに向いていて、コマンドは「慣れると操作が速い」「トラブル時の情報がコマンドベースで書かれていることが多い」というメリットがあります。

私の場合、普段のadd・commit・pushはVSCodeのGUIで行い、ブランチ操作やresetなど少し複雑な操作はターミナルで行う、という使い分けに落ち着いています。

.gitignoreの設定

Git管理に含めたくないファイルやフォルダを .gitignore に記載します。Web制作プロジェクトでは以下のような設定が定番です。

node_modules/
dist/
.DS_Store
.env
*.log

.gitignore はリポジトリのルートに置き、プロジェクト開始時に作っておくのがおすすめです。

よく使う便利コマンド

# ステージングを取り消す（ファイルの変更自体は残る）
git restore --staged index.html

# ファイルの変更を元に戻す（注意：変更が消える）
git restore index.html

# 直前のコミットメッセージを修正
git commit --amend -m "新しいメッセージ"

# 特定のファイルをGit管理から除外（.gitignore）
echo "node_modules/" >> .gitignore
echo ".DS_Store" >> .gitignore

困ったときの対処法

コンフリクト（競合）が起きた

マージ時に同じ箇所を別々に編集していると、コンフリクトが発生します。該当ファイルを開くと以下のような表示になっています。

<<<<<<< HEAD
自分の変更内容
=======
相手の変更内容
>>>>>>> feature/some-branch

不要な部分と区切り記号（<<<<<<< ======= >>>>>>>）を削除して、正しい状態に編集してから git add → git commit すれば解決です。

VSCodeではコンフリクト箇所がハイライト表示され、「Accept Current Change」「Accept Incoming Change」「Accept Both Changes」といったボタンが表示されます。クリック一つで選択できるので、ターミナルだけで解決するよりも楽です。

まとめ

Gitは覚えることが多く見えますが、普段の作業で使うコマンドは add・commit・push・pull・switch あたりがほとんどです。まずはこの基本の流れに慣れて、必要になったら都度調べていく形で十分だと思います。

VSCodeのGUIを活用すれば、差分確認や履歴の追跡もかなり直感的にできます。コマンドに抵抗があるうちはGUIから始めて、慣れてきたらターミナルも併用していくのがおすすめです。

私自身もまだまだ勉強中ですが、Gitを使い始めてから「前の状態に戻せる安心感」は大きいと実感しています。

Otherの一覧を見る