VSCodeのソース管理でGitが簡単に！コマンド不要の最強Git活用術

git

「Gitって難しそう…黒い画面でコマンド打つんでしょ？」

「git add、git commit、git push…覚えることが多すぎる！」

「間違えてデータ消しちゃいそうで怖い…」

そんな不安、全部解決します！

実は、VSCodeのソース管理機能を使えば、マウスクリックだけでGitの操作が完結。

しかも、視覚的に分かりやすいから、初心者でも安心して使えるんです。

この記事では、VSCodeでGitを使う基本から、チーム開発で役立つ高度な機能まで、画面付きで丁寧に解説します。

スポンサーリンク

そもそもソース管理（Git）って何？なぜ必要？

セーブポイントを作る魔法のシステム

ゲームに例えると分かりやすいです：

ゲームのセーブ機能：

  • ボス戦の前にセーブ
  • 失敗したらロード
  • 複数のセーブデータを管理

Gitのバージョン管理：

  • コードを変更する前に保存（コミット）
  • バグったら前の状態に戻す（リバート）
  • 変更履歴をすべて記録

つまり、**「コードの時間旅行ができるツール」**なんです！

VSCodeのソース管理でできること

基本機能：

  • ファイルの変更を記録
  • 過去のバージョンに戻る
  • 変更内容を比較
  • チームで共有

便利機能：

  • ブランチを切り替え（複数の作業を並行）
  • コンフリクトを解決（変更の衝突を修正）
  • GitHub/GitLabと連携
  • プルリクエストの作成

これ全部、VSCodeの画面上でできちゃいます！

初期設定：5分で完了するGit環境構築

Step 1：Gitのインストール確認

確認方法：

  1. VSCodeでターミナルを開く（Ctrl/Cmd + `）
  2. 以下を入力：
git --version

表示されない場合：

  • Windows: https://git-scm.com からダウンロード
  • Mac: brew install git または Xcodeツールをインストール
  • Linux: sudo apt install git

Step 2：ユーザー情報の設定

VSCodeのターミナルで実行：

git config --global user.name "あなたの名前"
git config --global user.email "your.email@example.com"

これは最初の1回だけでOK！

Step 3：VSCodeでGitを有効化

  1. サイドバーのソース管理アイコンをクリック
    • 左側の3つ目のアイコン（分岐しているマーク）
    • ショートカット：Ctrl/Cmd + Shift + G
  2. 「リポジトリを初期化」をクリック
    • フォルダが Git 管理下に
    • .gitフォルダが作成される（見えないけど存在）

準備完了！もう使い始められます。

基本操作：日常で使う5つの機能

1. 変更の確認（何を変えたか一目瞭然）

変更されたファイルの見方：

ソース管理パネルに表示される記号：
M = Modified（変更）
U = Untracked（新規追加）  
D = Deleted（削除）
A = Added（追加済み）
C = Conflict（競合）

差分の確認方法：

  1. 変更されたファイルをクリック
  2. 左右に分割画面が表示
  3. 削除された行は赤、追加された行は緑

めちゃくちゃ見やすい！

2. ステージング（保存する変更を選ぶ）

個別にステージング：

  • ファイル名の横の「+」をクリック
  • または右クリック → 「変更をステージ」

全部まとめてステージング：

  • 「変更」の横の「+」をクリック
  • すべてのファイルが「ステージされた変更」に移動

部分的にステージング（上級技）：

  1. ファイルの差分表示を開く
  2. 保存したい行を選択
  3. 右クリック → 「選択した行をステージ」

特定の変更だけコミットできる！

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

コミットの手順：

  1. メッセージ欄に変更内容を記入
  2. Ctrl/Cmd + Enter でコミット

良いコミットメッセージの例：

✅ 良い例：
- ログイン機能を追加
- バグ修正：ユーザー名が表示されない問題
- スタイルを調整：ヘッダーの余白を修正

❌ 悪い例：
- 修正
- update
- あああああ

コミットメッセージのテンプレート：

[種類] 変更内容

種類の例：
feat: 新機能
fix: バグ修正
docs: ドキュメント
style: コードスタイル
refactor: リファクタリング
test: テスト
chore: その他

4. プッシュ（リモートに送信）

GitHubにプッシュ：

  1. 「…」メニュー → 「プッシュ」
  2. または同期ボタン（↻）をクリック

初回プッシュの設定：

1. GitHubでリポジトリを作成
2. VSCodeで以下を実行：
   - コマンドパレット（F1）
   - 「Git: Add Remote」
   - URLを入力
3. プッシュ

5. プル（最新版を取得）

他の人の変更を取り込む：

  • 同期ボタン（↻）をクリック
  • または「…」メニュー → 「プル」

自動的にマージされます！

ブランチ操作：並行作業の極意

ブランチとは？

道路工事に例えると：

メイン道路（mainブランチ）：

  • 本番環境のコード
  • みんなが使う大事な道

迂回路（featureブランチ）：

  • 新機能を開発する場所
  • 工事中でも本線に影響なし
  • 完成したら本線に合流

ブランチの作成と切り替え

新しいブランチを作る：

  1. 左下のブランチ名をクリック
  2. 「新しいブランチを作成」
  3. ブランチ名を入力（例：feature/login）

ブランチを切り替える：

  1. 左下のブランチ名をクリック
  2. 切り替えたいブランチを選択

便利なブランチ名の付け方：

feature/機能名    # 新機能開発
bugfix/バグ内容   # バグ修正
hotfix/緊急修正   # 緊急対応
release/v1.0.0   # リリース準備

マージ（ブランチを統合）

VSCodeでマージする方法：

  1. 統合先のブランチに切り替え（通常はmain）
  2. コマンドパレット → 「Git: Merge Branch」
  3. マージしたいブランチを選択

コンフリクトが起きたら：

<<<<<<< HEAD
現在のブランチの内容
=======  
マージしようとしているブランチの内容
>>>>>>> branch-name

対処法：
1. どちらか選ぶ or 両方を組み合わせる
2. <<<<, ====, >>>> の記号を削除
3. ファイルを保存してコミット

VSCodeなら「Accept Current」「Accept Incoming」ボタンで簡単解決！

便利な拡張機能で更にパワーアップ

GitLens（必須！）

機能：

  • 各行の最終更新者を表示
  • コミット履歴を視覚化
  • ファイルの変更履歴を追跡

使い方：

1. 拡張機能でGitLensをインストール
2. コード上にホバーすると情報表示
3. サイドバーにGitLens専用パネル追加

Git Graph

機能：

  • ブランチを図で表示
  • コミット履歴をグラフ化
  • マージの流れが一目瞭然

GitHub Pull Requests and Issues

機能：

  • VSCode内でPR作成
  • Issue管理
  • レビューコメント対応

よく使うGit操作のショートカット集

キーボードショートカット

Ctrl/Cmd + Shift + G    # ソース管理パネルを開く
Ctrl/Cmd + Enter        # コミット
Ctrl/Cmd + Shift + P    # コマンドパレット

# コマンドパレットから実行
Git: Stage All Changes      # 全変更をステージ
Git: Unstage All Changes    # 全ステージを解除
Git: Discard All Changes    # 全変更を破棄（注意！）

ステータスバーの活用

左下のステータスバーで確認できること：

  • 現在のブランチ名
  • 同期状態（↓プル可能 ↑プッシュ可能）
  • 変更ファイル数

クリックするだけで操作可能！

トラブルシューティング

問題1：コミットできない

原因と対策：

エラー：「Please tell me who you are」

解決：
git config --global user.name "名前"
git config --global user.email "メール"

問題2：プッシュが拒否される

原因：リモートが先に進んでいる

解決法：

  1. まずプル（同期ボタン）
  2. コンフリクトがあれば解決
  3. 再度プッシュ

問題3：間違ってコミットした

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

コマンドパレット → Git: Undo Last Commit
変更内容は残るので、修正して再コミット

特定のコミットまで戻る：

1. GitLensでコミット履歴を表示
2. 戻りたいコミットを右クリック
3. 「Reset to Commit」→「Soft」を選択

問題4：.gitignoreが効かない

すでに追跡されているファイルの場合：

# キャッシュをクリア
git rm -r --cached .
git add .
git commit -m "gitignoreを適用"

チーム開発のベストプラクティス

コミットのルール

1コミット1機能の原則：

  • 機能追加とバグ修正を分ける
  • レビューしやすい単位で
  • あとで revert しやすい

ブランチ運用

Git Flow：

main（本番）
  ├─ develop（開発）
  │   ├─ feature/機能A
  │   └─ feature/機能B
  ├─ hotfix/緊急修正
  └─ release/v1.0

プルリクエストの作り方

VSCode + GitHub拡張機能：

  1. 変更をプッシュ
  2. 「GitHub」パネルを開く
  3. 「Create Pull Request」
  4. タイトルと説明を記入
  5. レビュアーを指定

実践！プロジェクトでの使用例

新機能開発の流れ

1. ブランチ作成
   feature/user-authentication

2. 開発・テスト
   - ログイン画面作成（コミット）
   - バリデーション追加（コミット）
   - エラー処理（コミット）

3. プルリクエスト作成
   - レビュー依頼
   - フィードバック対応

4. マージ
   - developブランチに統合
   - 不要なブランチ削除

ホットフィックスの対応

1. 本番でバグ発見！
2. mainからhotfix/bug-fixブランチ作成
3. 修正してコミット
4. mainとdevelopの両方にマージ
5. タグを付けてリリース

まとめ：VSCodeでGitマスターになろう

VSCodeのソース管理機能を使えば、Gitは怖くない！

覚えておくべきポイント：

  • 基本は「変更→ステージ→コミット→プッシュ」
  • ブランチで安全に作業
  • コンフリクトは落ち着いて解決
  • 拡張機能でさらに便利に
  • チームルールを守る

今すぐやること：

  1. VSCodeでGitを初期化
  2. 最初のコミットをする
  3. GitLensをインストール
  4. GitHubにプッシュしてみる
  5. ブランチを作って実験

最後に： Gitは「失敗しても大丈夫」なツール。

むしろ失敗することで、戻し方を学べます。

VSCodeの視覚的なインターフェースなら、安心して練習できる。

さあ、今日からバージョン管理のある安全な開発を始めましょう！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました