Git初心者のための…（VSCode版）

🎯 このチュートリアルの目標

このチュートリアルを完了すると、以下のことができるようになります：

Gitの基本概念を理解する
Git Bashでファイルのバージョン管理ができる
チーム開発の基本的な流れを理解する

📚 第1章：Gitって何？

Gitとは？

Gitは、コンピュータのファイルの変更履歴を記録・追跡するためのツールです。

身近な例で理解しよう

レポートを書く時：レポート_v1.docx, レポート_v2.docx, レポート_最終版.docx, レポート_本当の最終版.docx…
Gitを使うと：1つのファイルで全ての変更履歴を管理できる！

Gitの主な機能

バージョン管理：「いつ」「誰が」「何を」変更したかを記録
履歴の確認：過去の状態に戻すことができる
チーム開発：複数人で同じファイルを編集しても衝突を防げる

🏗️ 第2章：Gitの基本構造

重要な場所を覚えよう

💻 あなたのPC	🔄 操作	☁️ インターネット上
ワークツリー (作業フォルダ)	add →	リモートリポジトリ (GitHub等)
インデックス (準備エリア)	commit →
ローカルリポジトリ (履歴保存庫)	push/pull ↔

基本用語の説明

用語	説明	例え
ワークツリー	実際にファイルを編集する場所	机の上
インデックス	コミット前の準備エリア	提出前の下書き置き場
ローカルリポジトリ	自分のPCの履歴保存庫	個人の日記帳
リモートリポジトリ	インターネット上の共有保存庫	みんなで見る掲示板

🔧 第3章：Git Bashのインストールと設定

インストール手順

ダウンロード
- Git for Windowsにアクセス
- 「Download」をクリック
インストール
- ダウンロードしたファイルを実行
- 基本的に全て「Next」で進めてOK
動作確認 git --version

初期設定（必須）

# あなたの名前を設定（例：山田太郎）
git config --global user.name "山田太郎"

# あなたのメールアドレスを設定
git config --global user.email "yamada@example.com"

# 設定確認
git config --global --list

📝 第4章：実践！初めてのGit操作（VSCode編）

🏁 プロジェクト1：Webサイトプロジェクトを管理してみよう

事前準備：VSCodeのインストール

Visual Studio Codeをダウンロード・インストール
Git拡張機能が自動的に含まれているので追加設定は不要

ステップ1：プロジェクトフォルダの作成

# デスクトップに移動
cd ~/Desktop

# 新しいプロジェクトフォルダを作成
mkdir my-website

# フォルダに移動
cd my-website

# Gitリポジトリとして初期化
git init

# VSCodeでプロジェクトを開く
code .

ステップ2：最初のHTMLファイルを作成

VSCodeで以下の手順を実行：

新しいファイル作成：Ctrl+N（Windows）または Cmd+N（Mac）
ファイル名を設定：Ctrl+Sで保存 → index.html
以下の内容を入力：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私の最初のWebサイト</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 { color: #333; }
        .date { color: #666; font-style: italic; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌟 私の学習日記</h1>
        <div class="date">2025年6月1日</div>
        <p>今日からGitとVSCodeを使った開発を学び始めました。</p>
        <p>バージョン管理がとても便利そうです！</p>
    </div>
</body>
</html>

ファイルを保存：Ctrl+S

ステップ3：VSCodeでGitの状態を確認

VSCodeの画面説明：

左サイドバーの「ソース管理」アイコン（分岐マーク）をクリック
変更されたファイル一覧が表示される
index.htmlがU（Untracked：未追跡）として表示される

ターミナルでも確認：

# VSCode内蔵ターミナルを開く: Ctrl+` (バッククォート)
git status

ステップ4：初回コミットの実行

方法A：VSCode GUI を使用（推奨）

ソース管理タブでindex.htmlの+ボタンをクリック（ステージング）
メッセージボックスに「初回のWebサイト作成」と入力
コミットボタンをクリック

方法B：ターミナルを使用

# ファイルをインデックスに追加
git add index.html

# コミット実行
git commit -m "初回のWebサイト作成"

# 履歴を確認
git log --oneline

ステップ5：CSSファイルを追加してみよう

新しいファイル作成：styles.css
以下の内容を入力：

/* styles.css - 外部スタイルシート */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
}

.container {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
}

h1 {
    color: #4a5568;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5em;
}

.date {
    color: #718096;
    font-style: italic;
    text-align: center;
    margin-bottom: 20px;
}

p {
    line-height: 1.8;
    margin-bottom: 15px;
}

.highlight {
    background-color: #ffd700;
    padding: 2px 5px;
    border-radius: 3px;
}

index.htmlを更新：<style>タグを削除し、外部CSSリンクを追加

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私の最初のWebサイト</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>🌟 私の学習日記</h1>
        <div class="date">2025年6月1日</div>
        <p>今日からGitとVSCodeを使った開発を学び始めました。</p>
        <p><span class="highlight">バージョン管理</span>がとても便利そうです！</p>
        
        <h2>📅 2025年6月2日</h2>
        <p>VSCodeの便利な機能を発見しました：</p>
        <ul>
            <li>Git統合機能でコミットが簡単</li>
            <li>ライブプレビューで即座に確認</li>
            <li>IntelliSenseでコード補完</li>
        </ul>
    </div>
</body>
</html>

変更をコミット：
- VSCodeで両ファイルをステージング
- メッセージ：「外部CSSファイルを追加し、デザインを改善」

🌟 プロジェクト2：ブランチで新機能を開発してみよう

ブランチとは？

ブランチは、メインの作業から分岐して実験的な変更を行うための機能です。

main    ●─●─●─●  ← メインの作業
         ＼   ／
feature   ●─●    ← 実験的な機能

VSCodeでブランチを作成・切り替え

方法A：VSCode GUI使用

左下のブランチ名（main）をクリック
「新しいブランチを作成」を選択
ブランチ名を入力：add-contact-form

方法B：ターミナル使用

# 新しいブランチを作成して切り替え
git checkout -b add-contact-form

# 現在のブランチを確認
git branch

新機能：お問い合わせフォームを追加

新しいファイル作成：contact.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お問い合わせ - 私のWebサイト</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>📧 お問い合わせ</h1>
        
        <form class="contact-form">
            <div class="form-group">
                <label for="name">お名前：</label>
                <input type="text" id="name" name="name" required>
            </div>
            
            <div class="form-group">
                <label for="email">メールアドレス：</label>
                <input type="email" id="email" name="email" required>
            </div>
            
            <div class="form-group">
                <label for="message">メッセージ：</label>
                <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            
            <button type="submit">送信</button>
        </form>
        
        <p><a href="index.html">← ホームに戻る</a></p>
    </div>
</body>
</html>

styles.cssにフォームスタイルを追加：

/* フォームスタイル */
.contact-form {
    max-width: 600px;
    margin: 30px auto;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #4a5568;
}

input, textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

input:focus, textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}

button:hover {
    transform: translateY(-2px);
}

a {
    color: #667eea;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

index.htmlにナビゲーションを追加：

<!-- <h1>🌟 私の学習日記</h1>の下に追加 -->
<nav style="text-align: center; margin-bottom: 30px;">
    <a href="contact.html" style="background-color: #667eea; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none;">お問い合わせ</a>
</nav>

ブランチでの変更をコミット

# 全ての変更をステージング
git add .

# コミット
git commit -m "お問い合わせフォーム機能を追加"

# ブランチの状況確認
git log --oneline --graph --all

mainブランチにマージ

mainブランチに切り替え

git checkout main

VSCodeで内容確認：contact.htmlが消えていることを確認
ブランチをマージ

git merge add-contact-form

不要なブランチを削除

git branch -d add-contact-form

🤝 第5章：チーム開発を体験しよう（GitHub連携）

GitHub アカウントの準備

GitHubでアカウント作成
新しいリポジトリを作成
- Repository name: my-website
- Public を選択
- 「Create repository」をクリック

VSCodeでGitHub連携

方法A：VSCode GUI使用（推奨）

VSCodeのソース管理タブを開く
「リポジトリを発行」ボタンをクリック
GitHubを選択
リポジトリ名を確認して「発行」

方法B：ターミナル使用

# GitHubのリポジトリと連携
git remote add origin https://github.com/あなたのユーザー名/my-website.git

# ローカルの変更をGitHubにアップロード
git push -u origin main

リアルなチーム開発シミュレーション

プロジェクト3：JavaScriptでインタラクティブ機能を追加

新しいブランチを作成：add-interactive-features
script.jsファイルを作成：

// script.js - インタラクティブ機能
document.addEventListener('DOMContentLoaded', function() {
    // 現在の日時を表示
    function updateDateTime() {
        const now = new Date();
        const dateTimeElement = document.getElementById('current-datetime');
        if (dateTimeElement) {
            dateTimeElement.textContent = now.toLocaleString('ja-JP');
        }
    }

    // ページビューカウンター（ローカルストレージ使用）
    function updatePageViews() {
        let views = localStorage.getItem('pageViews') || 0;
        views++;
        localStorage.setItem('pageViews', views);
        
        const viewsElement = document.getElementById('page-views');
        if (viewsElement) {
            viewsElement.textContent = `ページビュー: ${views}回`;
        }
    }

    // テーマ切り替え機能
    function setupThemeToggle() {
        const toggleButton = document.getElementById('theme-toggle');
        if (toggleButton) {
            toggleButton.addEventListener('click', function() {
                document.body.classList.toggle('dark-theme');
                const isDark = document.body.classList.contains('dark-theme');
                localStorage.setItem('theme', isDark ? 'dark' : 'light');
                toggleButton.textContent = isDark ? '☀️ ライトモード' : '🌙 ダークモード';
            });
        }

        // 保存されたテーマを復元
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'dark') {
            document.body.classList.add('dark-theme');
            const toggleButton = document.getElementById('theme-toggle');
            if (toggleButton) {
                toggleButton.textContent = '☀️ ライトモード';
            }
        }
    }

    // お問い合わせフォームの処理
    function setupContactForm() {
        const form = document.querySelector('.contact-form');
        if (form) {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const message = document.getElementById('message').value;
                
                // 簡単なバリデーション
                if (name && email && message) {
                    alert(`${name}さん、お問い合わせありがとうございます！\n近日中にご返信いたします。`);
                    form.reset();
                } else {
                    alert('全ての項目を入力してください。');
                }
            });
        }
    }

    // 初期化
    updateDateTime();
    updatePageViews();
    setupThemeToggle();
    setupContactForm();
    
    // 時計を1秒ごとに更新
    setInterval(updateDateTime, 1000);
});

styles.cssにダークテーマを追加：

/* ダークテーマ */
.dark-theme {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    color: #e2e8f0;
}

.dark-theme .container {
    background: rgba(45, 55, 72, 0.95);
    color: #e2e8f0;
}

.dark-theme h1, .dark-theme h2 {
    color: #f7fafc;
}

.dark-theme .date {
    color: #a0aec0;
}

.dark-theme input, .dark-theme textarea {
    background-color: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
}

.dark-theme input:focus, .dark-theme textarea:focus {
    border-color: #9f7aea;
}

/* 新しいUI要素 */
.header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    color: #718096;
}

.theme-toggle {
    background: none;
    border: 2px solid #667eea;
    color: #667eea;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.theme-toggle:hover {
    background-color: #667eea;
    color: white;
    transform: none;
}

.stats {
    margin-top: 30px;
    padding: 20px;
    background-color: rgba(102, 126, 234, 0.1);
    border-radius: 10px;
    text-align: center;
}

index.htmlを更新：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私の最初のWebサイト</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="header-info">
            <div id="current-datetime"></div>
            <button id="theme-toggle" class="theme-toggle">🌙 ダークモード</button>
        </div>
        
        <h1>🌟 私の学習日記</h1>
        
        <nav style="text-align: center; margin-bottom: 30px;">
            <a href="contact.html" style="background-color: #667eea; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none;">お問い合わせ</a>
        </nav>
        
        <div class="date">2025年6月1日</div>
        <p>今日からGitとVSCodeを使った開発を学び始めました。</p>
        <p><span class="highlight">バージョン管理</span>がとても便利そうです！</p>
        
        <h2>📅 2025年6月2日</h2>
        <p>VSCodeの便利な機能を発見しました：</p>
        <ul>
            <li>Git統合機能でコミットが簡単</li>
            <li>ライブプレビューで即座に確認</li>
            <li>IntelliSenseでコード補完</li>
        </ul>

        <h2>📅 2025年6月3日</h2>
        <p>JavaScriptでインタラクティブな機能を追加しました：</p>
        <ul>
            <li>リアルタイム時計表示</li>
            <li>ページビューカウンター</li>
            <li>ダークモード切り替え</li>
            <li>お問い合わせフォーム処理</li>
        </ul>
        
        <div class="stats">
            <div id="page-views">ページビュー: 読み込み中...</div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

contact.htmlも更新：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お問い合わせ - 私のWebサイト</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="header-info">
            <div id="current-datetime"></div>
            <button id="theme-toggle" class="theme-toggle">🌙 ダークモード</button>
        </div>
        
        <h1>📧 お問い合わせ</h1>
        
        <form class="contact-form">
            <div class="form-group">
                <label for="name">お名前：</label>
                <input type="text" id="name" name="name" required>
            </div>
            
            <div class="form-group">
                <label for="email">メールアドレス：</label>
                <input type="email" id="email" name="email" required>
            </div>
            
            <div class="form-group">
                <label for="message">メッセージ：</label>
                <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            
            <button type="submit">送信</button>
        </form>
        
        <p><a href="index.html">← ホームに戻る</a></p>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

ブランチでの変更をコミット・プッシュ

# 全ての変更をコミット
git add .
git commit -m "JavaScriptでインタラクティブ機能を追加

- リアルタイム時計表示
- ページビューカウンター
- ダークモード切り替え
- お問い合わせフォーム処理機能"

# GitHubにプッシュ
git push origin add-interactive-features

GitHubでプルリクエスト作成

GitHubでリポジトリを開く
「Compare & pull request」をクリック
プルリクエストのタイトル：「インタラクティブ機能の追加」
説明を記入： ## 追加機能- ⏰ リアルタイム時計表示- 📊 ページビューカウンター（ローカルストレージ使用）- 🌙 ダークモード切り替え機能- 📧 お問い合わせフォームのJavaScript処理## テスト項目- [ ] 時計が正常に表示・更新される- [ ] ページビューが正しくカウントされる- [ ] ダークモード切り替えが動作する- [ ] フォーム送信処理が正常に動作する
**「Create pull request」**をクリック

プルリクエストをマージ

変更内容を確認
**「Merge pull request」**をクリック
ローカルに反映：

git checkout main
git pull origin main

🚨 第6章：よくある問題と解決法（VSCode環境）

問題1：コミットメッセージを間違えた

VSCode GUI での解決：

ソース管理タブで履歴を確認
最新コミットを右クリック
「コミットメッセージを編集」を選択

ターミナルでの解決：

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

問題2：ファイルの変更を取り消したい

VSCode GUI での解決：

ソース管理タブで変更されたファイルを確認
ファイル名の右側の「変更を破棄」アイコンをクリック

ターミナルでの解決：

# ワークツリーの変更を取り消し
git checkout -- ファイル名

# ステージングした変更を取り消し
git reset ファイル名

# 特定のファイルを前のコミット状態に戻す
git checkout HEAD -- ファイル名

問題3：間違ったブランチで作業してしまった

VSCode GUI での解決：

左下のブランチ名をクリック
正しいブランチを選択
VSCodeが自動的に変更を保持するか確認

ターミナルでの解決：

# 変更内容を一時的に保存
git stash

# 正しいブランチに移動
git checkout 正しいブランチ名

# 保存した変更を復元
git stash pop

問題4：マージコンフリクト（競合）が発生した

VSCodeでのコンフリクト解決：

コンフリクトが発生したファイルをVSCodeで開く
マージエディタが自動的に開く
変更を選択：
- 「現在の変更を受け入れる」
- 「入力された変更を受け入れる」
- 「両方の変更を受け入れる」
- 「変更を比較」

実際のコンフリクト例：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私のWebサイト</title>
</head>
<body>
<<<<<<< HEAD
    <h1>メインページ</h1>
    <p>これはメインブランチの内容です。</p>
=======
    <h1>ホームページ</h1>
    <p>これは機能ブランチの内容です。</p>
>>>>>>> feature-branch
</body>
</html>

解決手順：

<<<<<<<, =======, >>>>>>> の行を削除
適切な内容を選択または統合
ファイルを保存
コミットを実行

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

解決方法：

Gitのパス確認：

# Gitがインストールされているか確認
git --version

# Gitのパスを確認
where git  # Windows
which git  # Mac/Linux

VSCodeの設定：
- Ctrl+, で設定を開く
- 「git.path」を検索
- Gitの実行ファイルパスを設定
VSCodeを再起動

📋 第7章：実践的なワークフロー

チーム開発の基本フロー

# 1. 作業開始前に最新を取得
git pull origin main

# 2. 新機能用のブランチを作成
git checkout -b feature/新機能名

# 3. 開発作業
# ファイルを編集...

# 4. 変更をコミット
git add .
git commit -m "機能: 新機能の説明"

# 5. リモートにプッシュ
git push origin feature/新機能名

# 6. GitHubでプルリクエストを作成

# 7. レビュー後、mainブランチにマージ

# 8. ローカルのmainブランチを更新
git checkout main
git pull origin main

# 9. 不要なブランチを削除
git branch -d feature/新機能名

🎉 まとめ：Git習得のロードマップ

あなたが今できるようになったこと ✅

[x] Gitの基本概念を理解
[x] ローカルリポジトリでファイル管理
[x] ブランチを使った並行開発
[x] GitHubとの連携
[x] 基本的なチーム開発フロー

次のステップ 🚀

GitHub Actionsの学習：自動テスト・デプロイ
GitFlowの理解：より高度なブランチ戦略
マージとリベースの深い理解
コンフリクト解決の練習

📖 よく使うコマンド一覧

基本コマンド

コマンド	説明
`git status`	現在の状態を確認
`git add ファイル名`	ファイルをインデックスに追加
`git add .`	全ての変更をインデックスに追加
`git commit -m "メッセージ"`	変更をコミット
`git log`	コミット履歴を表示
`git diff`	変更差分を表示

ブランチ操作

コマンド	説明
`git branch`	ブランチ一覧を表示
`git branch ブランチ名`	新しいブランチを作成
`git checkout ブランチ名`	ブランチを切り替え
`git checkout -b ブランチ名`	ブランチ作成と切り替えを同時実行
`git branch -d ブランチ名`	ブランチを削除

リモート操作

コマンド	説明
`git clone URL`	リモートリポジトリをクローン
`git push origin ブランチ名`	リモートにプッシュ
`git pull origin ブランチ名`	リモートから取得・マージ
`git fetch`	リモートから取得（マージしない）

🎓 おめでとうございます！
あなたはGitの基本をマスターしました。これからはチームでの開発や、より複雑なプロジェクトでGitを活用していきましょう！