GitHub初心者ガイド：基本の使い方からVSCode連携・注意点まで実践解説

「GitHubを始めたいけど何から手をつければいいかわからない」「VSCodeやCLIでの効率的な使い方を知りたい」そんな初心者の疑問に答えます。この記事では、GitHubの基本操作から、VSCode/CLIを使った実践的な活用法、個人利用での注意点まで、確実に理解できるよう段階的に解説します。

GitHubを始める前に
1. 必要なもの
2. アカウント作成
GitHubの基本概念
ブラウザでの基本操作
VSCodeでのGit操作
CLIでの効率的な操作
個人利用での注意点
トラブルシューティング
学習のロードマップ
まとめ
関連記事

GitHubを始める前に

必要なもの

必須：

GitHubアカウント（無料）
Git（バージョン管理システム）
テキストエディタ（VSCode推奨）

推奨：

GitHub CLI（コマンドライン操作用）

アカウント作成

1. https://github.com にアクセス
2. Sign upをクリック
3. メールアドレス、パスワード、ユーザー名を入力
4. メール認証
5. 完了！

ユーザー名選びのポイント：

変更可能だが、推奨しない
プロフィールURLになる：github.com/username
本名または認知されやすいID

GitHubの基本概念

リポジトリ（Repository）

プロジェクトを管理する単位です。

my-project/           ← リポジトリ
  ├── README.md       ← プロジェクト説明
  ├── index.html      ← ソースコード
  ├── style.css
  └── .gitignore      ← 管理対象外ファイル指定

コミット（Commit）

変更の記録単位です。

コミット1: 「初回作成」
コミット2: 「ログイン機能追加」
コミット3: 「バグ修正」

各コミットには誰が、いつ、何を変更したか記録されます。

ブランチ（Branch）

並行開発のための分岐です。

main（本番コード）
  ↓
develop（開発中）
  ↓
feature/login（ログイン機能開発中）

ブランチの詳しい使い方は「Git Branch戦略完全ガイド：チーム開発を成功させる実践パターン」をご覧ください。

リモートとローカル

ローカルリポジトリ（あなたのPC）
  ↕️ git push / git pull
リモートリポジトリ（GitHub）

ブラウザでの基本操作

リポジトリ作成

手順：

1. GitHubホーム右上の「+」
2. New repository
3. Repository name: my-first-repo
4. Public（公開）またはPrivate（非公開）
5. Add a README file: ✅チェック
6. Create repository

完了！ リポジトリが作成されました。

ファイル追加

Webインターフェースで：

1. Add file → Create new file
2. Name your file: hello.txt
3. 内容を入力
4. Commit new file

ローカルからプッシュ：

echo "Hello, GitHub!" > hello.txt

# Git管理に追加
git add hello.txt

# コミット
git commit -m "Add hello.txt"

# GitHubにプッシュ
git push origin main

Issue作成

バグ報告や機能要望を管理：

1. Issues タブ
2. New issue
3. タイトル: 「ログイン画面のバグ」
4. コメント: 詳細説明
5. ラベル: bug
6. Submit new issue

Pull Request

変更をマージする流れ：

1. ブランチで開発
2. Pull requests → New pull request
3. base: main ← compare: feature/login
4. Create pull request
5. レビュー待ち
6. Merge pull request

GUIとCLIでのリポジトリ作成の違いは「GitHubリポジトリ作成の2つの方法：GUI vs CLI徹底比較」で解説しています。

VSCodeでのGit操作

VSCodeはGitと深く統合されており、GUI操作で効率的に作業できます。

初期設定

Git設定確認：

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

VSCode拡張機能インストール：

GitLens（推奨）
GitHub Pull Requests

リポジトリをクローン

方法1：コマンドパレット

Ctrl+Shift+P（Macは Cmd+Shift+P）
→ Git: Clone
→ GitHubリポジトリURL入力
→ 保存先選択

方法2：統合ターミナル

git clone https://github.com/username/repo.git

ファイル変更とコミット

手順：

1. ファイルを編集
2. 左サイドバー「ソース管理」アイコン（またはCtrl+Shift+G）
3. 変更ファイルの「+」をクリック（ステージング）
4. メッセージ入力：「ログイン機能追加」
5. ✓（チェック）ボタンでコミット

複数ファイル一括ステージング：

Changes の「+」アイコンですべてステージング

ブランチ操作

ブランチ作成：

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

ブランチ切り替え：

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

マージ：

1. mainブランチに切り替え
2. コマンドパレット → Git: Merge Branch
3. マージ元ブランチ選択

VSCodeでのGit操作の詳細は「VSCodeでGitを使いこなす：初心者から実務まで完全ガイド」をご覧ください。

プッシュとプル

プッシュ（ローカル → GitHub）：

方法1：ソース管理パネルの「...」→ プッシュ
方法2：Ctrl+Shift+P → Git: Push

プル（GitHub → ローカル）：

方法1：ソース管理パネルの「...」→ プル
方法2：Ctrl+Shift+P → Git: Pull

コンフリクト解決

発生条件：

同じファイルの同じ箇所を
別々に編集してマージしようとした場合

VSCodeでの解決：

1. コンフリクトファイルを開く
2. <<<<<<< HEAD と >>>>>>> feature の間に表示
3. 「Current Change」「Incoming Change」「Both」から選択
4. 保存してコミット

CLIでの効率的な操作

コマンドライン操作に慣れると、作業が格段に速くなります。

基本コマンド

リポジトリ作成とプッシュ：

# ローカルで初期化
mkdir my-project
cd my-project
git init

# ファイル作成
echo "# My Project" > README.md

# コミット
git add .
git commit -m "Initial commit"

# GitHubと接続
git remote add origin https://github.com/username/my-project.git
git push -u origin main

クローン：

git clone https://github.com/username/repo.git
cd repo

状態確認：

# 変更ファイル確認
git status

# コミット履歴
git log --oneline

# ブランチ一覧
git branch -a

ブランチ操作

作成と切り替え：

# ブランチ作成
git branch feature/new-function

# 切り替え
git checkout feature/new-function

# 作成と切り替えを同時に
git checkout -b feature/new-function

マージ：

# mainに切り替え
git checkout main

# マージ
git merge feature/new-function

# プッシュ
git push origin main

削除：

# ローカルブランチ削除
git branch -d feature/new-function

# リモートブランチ削除
git push origin --delete feature/new-function

GitHub CLI活用

インストール：

# Windows
winget install GitHub.cli

# Mac
brew install gh

# 認証
gh auth login

便利なコマンド：

# リポジトリ作成
gh repo create my-project --public --source=. --push

# Issue作成
gh issue create --title "バグ修正" --body "詳細"

# Pull Request作成
gh pr create --title "新機能" --body "説明"

# リポジトリ情報表示
gh repo view

# ブラウザで開く
gh browse

GitHub CLIの使い方は「GitHub CLI完全ガイド：コマンドラインでGitHub操作を効率化」で詳しく解説しています。

個人利用での注意点

1. 公開リポジトリの扱い

Public = 全世界に公開

注意すべきこと：

パスワード、APIキーを含めない
個人情報を含めない
企業秘密を含めない
ライセンスを明記

NGパターン：

# ❌ ハードコード
API_KEY = "sk_live_abc123xyz"
PASSWORD = "mypassword123"

OKパターン：

# ✅ 環境変数
import os
API_KEY = os.getenv("API_KEY")
PASSWORD = os.getenv("PASSWORD")

2. .gitignoreの設定

必ず除外すべきファイル：

# 環境変数
.env
.env.local

# 認証情報
*.pem
*.key
config/secrets.yml

# ビルド成果物
node_modules/
dist/
build/

# IDE設定（個人差）
.vscode/
.idea/

# OS生成ファイル
.DS_Store
Thumbs.db

3. コミットメッセージ

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

# ✅ 明確で具体的
git commit -m "Add user authentication feature"
git commit -m "Fix login button alignment"
git commit -m "Update README with setup instructions"

悪いコミットメッセージ：

# ❌ 曖昧
git commit -m "update"
git commit -m "fix bug"
git commit -m "test"

4. ブランチ管理

個人開発でも推奨：

main        ← 本番コード（常に動作する状態）
develop     ← 開発中（テスト済み）
feature/xxx ← 機能開発（作業中）

NGパターン：

すべてmainで直接開発 ← 壊れたコードがそのまま本番に

5. セキュリティ設定

Two-Factor Authentication有効化：

Settings → Password and authentication
→ Enable two-factor authentication
→ SMS or Authenticator app

Personal Access Token：

Settings → Developer settings → Personal access tokens
→ Generate new token (classic)
→ 必要な権限のみ選択
→ 有効期限設定（推奨：90日）

6. コントリビューションの可視性

プロフィールに表示：

Settings → Public profile
→ Contribution settings
→ Private contributions を含める（オプション）

アクティビティグラフ：

緑色の四角：コミット数を可視化
就職活動でアピール材料に

7. ライセンス選択

推奨ライセンス：

MIT License：最も自由（商用利用OK）
Apache License 2.0：特許保護付き
GPL v3：オープンソース強制

設定方法：

リポジトリ作成時
→ Add a README file
→ Choose a license
→ MIT License 選択

トラブルシューティング

問題1：git pushが拒否される

エラー：

! [rejected] main -> main (fetch first)

原因：
リモートに新しいコミットが存在

解決：

# リモートの変更を取得してマージ
git pull origin main

# コンフリクトがあれば解決

# 再度プッシュ
git push origin main

問題2：間違えてコミットした

まだプッシュしていない場合：

# 直前のコミットを取り消し（変更は保持）
git reset --soft HEAD~1

# 変更も取り消す
git reset --hard HEAD~1

プッシュ済みの場合：

# 新しいコミットで打ち消し
git revert HEAD
git push origin main

問題3：ファイルを削除したい（履歴からも）

機密情報を間違えてコミット：

# 特定ファイルを履歴から完全削除
git filter-branch --force --index-filter \
  "git rm --cached --ignore-unmatch secrets.txt" \
  --prune-empty --tag-name-filter cat -- --all

# 強制プッシュ
git push origin --force --all

注意： 履歴を変更するため、他の人が使っているリポジトリでは避ける

問題4：VSCodeでGitが認識されない

エラー：

Git not found. Install it or configure it using the 'git.path' setting.

解決：

1. Gitをインストール（https://git-scm.com/）
2. VSCode再起動
3. それでもダメなら settings.json に追加：
{
  "git.path": "C:\\Program Files\\Git\\bin\\git.exe"
}

学習のロードマップ

第1週：基礎

目標：

リポジトリ作成
ファイルをコミット
GitHubにプッシュ

実践：

mkdir learning-git
cd learning-git
git init
echo "Day 1: Started learning Git" > journal.md
git add journal.md
git commit -m "Day 1: First commit"
gh repo create learning-git --public --source=. --push

第2週：ブランチとマージ

目標：

ブランチ作成
変更をコミット
マージ体験

実践：

git checkout -b feature/add-intro
echo "## Introduction" >> journal.md
git add journal.md
git commit -m "Add introduction section"
git checkout main
git merge feature/add-intro
git push origin main

第3週：コラボレーション

目標：

Issue作成
Pull Request作成
コードレビュー体験

実践：

# Issue作成
gh issue create --title "Add contact page" --body "Need to add contact information"

# 開発
git checkout -b feature/contact-page
# ファイル編集...
git add .
git commit -m "Add contact page"
git push origin feature/contact-page

# Pull Request
gh pr create --title "Add contact page" --body "Closes #1"

第4週：実践プロジェクト

目標：

ポートフォリオサイト作成
GitHub Pagesで公開

実践：

gh repo create my-portfolio --public
cd my-portfolio
echo "My Portfolio" > index.html
git add .
git commit -m "Initial portfolio site"
git push origin main

# GitHub Pagesを有効化
# Settings → Pages → Source: main branch