【Excel表有り】PowerPoint風図解マージとリベースとリベートとチェリーピックの自分用備忘録

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git操作完全ガイド</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Meiryo, sans-serif;
            background: #1a1a1a ;
            padding: 20px;
            min-height: 100vh;
        }
        
        .slide-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .slide {
            background: white;
            border-radius: 10px;
            padding: 60px;
            margin: 30px 0;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            min-height: 600px;
            display: flex;
            flex-direction: column;
        }
        
        .slide-title {
            font-size: 2.8em;
            font-weight: bold;
            color: #2c3e50 ;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 4px solid #3498db ;
        }
        
        .slide-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            flex: 1;
            align-items: center;
        }
        
        .text-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .suitable-for {
            background: linear-gradient(135deg, #667eea  0%, #764ba2  100%);
            color: white;
            padding: 20px 30px;
            border-radius: 10px;
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .description {
            font-size: 1.15em;
            line-height: 1.9;
            color: #34495e ;
            margin-bottom: 25px;
        }
        
        .points {
            list-style: none;
            margin: 20px 0;
        }
        
        .points li {
            padding: 12px 0;
            padding-left: 35px;
            position: relative;
            font-size: 1.1em;
            color: #2c3e50 ;
            line-height: 1.6;
        }
        
        .points li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #27ae60 ;
            font-weight: bold;
            font-size: 1.3em;
        }
        
        .image-section {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa ;
            border-radius: 15px;
            padding: 40px;
            min-height: 400px;
        }
        
        .diagram {
            width: 100%;
        }
        
        .branch-line {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 20px 0;
            justify-content: center;
        }
        
        .commit {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            font-size: 1em;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            flex-shrink: 0;
        }
        
        .commit.blue {
            background: linear-gradient(135deg, #4facfe  0%, #00f2fe  100%);
        }
        
        .commit.pink {
            background: linear-gradient(135deg, #f093fb  0%, #f5576c  100%);
        }
        
        .commit.green {
            background: linear-gradient(135deg, #43e97b  0%, #38f9d7  100%);
        }
        
        .commit.yellow {
            background: linear-gradient(135deg, #fa709a  0%, #fee140  100%);
        }
        
        .commit.purple {
            background: linear-gradient(135deg, #667eea  0%, #764ba2  100%);
        }
        
        .arrow {
            color: #95a5a6 ;
            font-size: 1.8em;
            font-weight: bold;
        }
        
        .arrow-down {
            text-align: center;
            font-size: 2.5em;
            margin: 15px 0;
        }
        
        .label {
            font-size: 0.95em;
            color: #7f8c8d ;
            text-align: center;
            margin: 10px 0;
            font-weight: 600;
        }
        
        .slide-number {
            position: absolute;
            bottom: 20px;
            right: 30px;
            color: #95a5a6 ;
            font-size: 1.1em;
        }
        
        .warning {
            background: #fff3cd ;
            border-left: 5px solid #ffc107 ;
            padding: 15px 20px;
            margin: 20px 0;
            border-radius: 5px;
            color: #856404 ;
            font-weight: 600;
        }
        
        .code-snippet {
            background: #2c3e50 ;
            color: #ecf0f1 ;
            padding: 15px 20px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 1.05em;
            margin: 15px 0;
        }

        @media (max-width: 1024px) {
            .slide-content {
                grid-template-columns: 1fr;
            }
            .slide {
                padding: 40px;
            }
        }
    </style>
</head>
<body>
    <div class="slide-container">
        
        <!-- スライド1: マージ -->
        <div class="slide">
            <div class="slide-title">🔀 マージ (Merge)</div>
            <div class="slide-content">
                <div class="text-section">
                    <div class="suitable-for">
                        チーム開発・公開ブランチに適しています
                    </div>
                    <div class="description">
                        マージは、2つのブランチを統合する最も基本的で安全な方法です。履歴を完全に保持しながら、マージコミットを作成して変更を統合します。
                    </div>
                    <ul class="points">
                        <li>履歴が完全に保持される</li>
                        <li>マージコミットで統合地点が明確</li>
                        <li>チーム全員が安心して使える</li>
                        <li>プルリクエストで最も推奨</li>
                    </ul>
                    <div class="code-snippet">
                        git checkout main<br>
                        git merge feature
                    </div>
                </div>
                <div class="image-section">
                    <div class="diagram">
                        <div class="label">実行前</div>
                        <div class="branch-line">
                            <div class="commit blue">M1</div>
                            <span class="arrow">→</span>
                            <div class="commit blue">M2</div>
                        </div>
                        <div class="branch-line">
                            <div class="commit pink">F1</div>
                            <span class="arrow">→</span>
                            <div class="commit pink">F2</div>
                        </div>
                        <div class="arrow-down">⬇️</div>
                        <div class="label">実行後</div>
                        <div class="branch-line">
                            <div class="commit blue">M1</div>
                            <span class="arrow">→</span>
                            <div class="commit blue">M2</div>
                            <span class="arrow">→</span>
                            <div class="commit green">M3</div>
                        </div>
                        <div class="label" style="margin-top: 10px;">M3 = マージコミット</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- スライド2: リベース -->
        <div class="slide">
            <div class="slide-title">📐 リベース (Rebase)</div>
            <div class="slide-content">
                <div class="text-section">
                    <div class="suitable-for">
                        個人ブランチ・履歴整理に適しています
                    </div>
                    <div class="description">
                        リベースは、コミットの基点を変更して一直線の履歴を作ります。プルリクエスト前の整理や、個人ブランチの更新に最適です。
                    </div>
                    <ul class="points">
                        <li>一直線のきれいな履歴になる</li>
                        <li>不要なマージコミットが残らない</li>
                        <li>コミット履歴が読みやすい</li>
                        <li>ローカルブランチの整理に最適</li>
                    </ul>
                    <div class="warning">
                        ⚠️ 共有ブランチでは絶対に使わない！
                    </div>
                    <div class="code-snippet">
                        git checkout feature<br>
                        git rebase main
                    </div>
                </div>
                <div class="image-section">
                    <div class="diagram">
                        <div class="label">実行前</div>
                        <div class="branch-line">
                            <div class="commit blue">M1</div>
                            <span class="arrow">→</span>
                            <div class="commit blue">M2</div>
                        </div>
                        <div class="branch-line">
                            <div class="commit pink">F1</div>
                            <span class="arrow">→</span>
                            <div class="commit pink">F2</div>
                        </div>
                        <div class="arrow-down">⬇️</div>
                        <div class="label">実行後（一直線）</div>
                        <div class="branch-line">
                            <div class="commit blue">M1</div>
                            <span class="arrow">→</span>
                            <div class="commit blue">M2</div>
                            <span class="arrow">→</span>
                            <div class="commit yellow">F1'</div>
                            <span class="arrow">→</span>
                            <div class="commit yellow">F2'</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- スライド3: リバート -->
        <div class="slide">
            <div class="slide-title">↩️ リバート (Revert)</div>
            <div class="slide-content">
                <div class="text-section">
                    <div class="suitable-for">
                        本番環境・公開済みコードに適しています
                    </div>
                    <div class="description">
                        リバートは、過去のコミットを打ち消す新しいコミットを作成します。履歴を残したまま安全に変更を戻せるため、本番環境でも使えます。
                    </div>
                    <ul class="points">
                        <li>履歴を残したまま変更を取り消し</li>
                        <li>本番環境でも安全に使える</li>
                        <li>チームメンバーに影響なし</li>
                        <li>バグ修正の標準的な方法</li>
                    </ul>
                    <div class="code-snippet">
                        git revert &lt;コミットID&gt;<br>
                        git revert HEAD
                    </div>
                </div>
                <div class="image-section">
                    <div class="diagram">
                        <div class="label">実行前（C2にバグ）</div>
                        <div class="branch-line">
                            <div class="commit blue">C1</div>
                            <span class="arrow">→</span>
                            <div class="commit pink">C2</div>
                            <span class="arrow">→</span>
                            <div class="commit blue">C3</div>
                        </div>
                        <div class="arrow-down">⬇️</div>
                        <div class="label">実行後（C4でC2を取消）</div>
                        <div class="branch-line">
                            <div class="commit blue">C1</div>
                            <span class="arrow">→</span>
                            <div class="commit pink">C2</div>
                            <span class="arrow">→</span>
                            <div class="commit blue">C3</div>
                            <span class="arrow">→</span>
                            <div class="commit green">C4</div>
                        </div>
                        <div class="label" style="margin-top: 10px;">C4 = C2の取消コミット</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- スライド4: チェリーピック -->
        <div class="slide">
            <div class="slide-title">🍒 チェリーピック (Cherry-pick)</div>
            <div class="slide-content">
                <div class="text-section">
                    <div class="suitable-for">
                        特定コミットの移植に適しています
                    </div>
                    <div class="description">
                        チェリーピックは、他のブランチから特定のコミットだけを選んで現在のブランチに取り込みます。緊急修正の適用に便利です。
                    </div>
                    <ul class="points">
                        <li>必要なコミットだけを選択</li>
                        <li>元のブランチは変更されない</li>
                        <li>ホットフィックスの適用に最適</li>
                        <li>複数ブランチへの同時適用が可能</li>
                    </ul>
                    <div class="code-snippet">
                        git checkout main<br>
                        git cherry-pick &lt;コミットID&gt;
                    </div>
                </div>
                <div class="image-section">
                    <div class="diagram">
                        <div class="label">実行前</div>
                        <div class="branch-line">
                            <span style="font-size: 0.9em; margin-right: 10px;">A:</span>
                            <div class="commit pink">A1</div>
                            <span class="arrow">→</span>
                            <div class="commit pink">A2</div>
                            <span class="arrow">→</span>
                            <div class="commit purple">A3</div>
                        </div>
                        <div class="branch-line">
                            <span style="font-size: 0.9em; margin-right: 10px;">B:</span>
                            <div class="commit blue">B1</div>
                            <span class="arrow">→</span>
                            <div class="commit blue">B2</div>
                        </div>
                        <div class="arrow-down">⬇️</div>
                        <div class="label">実行後（A3をBに取込）</div>
                        <div class="branch-line">
                            <span style="font-size: 0.9em; margin-right: 10px;">B:</span>
                            <div class="commit blue">B1</div>
                            <span class="arrow">→</span>
                            <div class="commit blue">B2</div>
                            <span class="arrow">→</span>
                            <div class="commit purple">A3'</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- スライド5: まとめ -->
        <div class="slide">
            <div class="slide-title">📊 操作の使い分けまとめ</div>
            <div style="padding: 30px 0;">
                <table style="width: 100%; border-collapse: collapse; font-size: 1.15em;">
                    <thead>
                        <tr style="background: linear-gradient(135deg, #667eea  0%, #764ba2  100%); color: white;">
                            <th style="padding: 20px; text-align: left; border-radius: 10px 0 0 0;">操作</th>
                            <th style="padding: 20px;">用途</th>
                            <th style="padding: 20px;">履歴</th>
                            <th style="padding: 20px; border-radius: 0 10px 0 0;">安全性</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="background: #f8f9fa ;">
                            <td style="padding: 20px; font-weight: bold; color: #2c3e50 ;">🔀 マージ</td>
                            <td style="padding: 20px;">ブランチ統合</td>
                            <td style="padding: 20px;">保持</td>
                            <td style="padding: 20px; color: #27ae60 ; font-weight: bold;">高</td>
                        </tr>
                        <tr style="background: white;">
                            <td style="padding: 20px; font-weight: bold; color: #2c3e50 ;">📐 リベース</td>
                            <td style="padding: 20px;">履歴整理</td>
                            <td style="padding: 20px;">書換</td>
                            <td style="padding: 20px; color: #e74c3c ; font-weight: bold;">低</td>
                        </tr>
                        <tr style="background: #f8f9fa ;">
                            <td style="padding: 20px; font-weight: bold; color: #2c3e50 ;">↩️ リバート</td>
                            <td style="padding: 20px;">変更取消</td>
                            <td style="padding: 20px;">保持</td>
                            <td style="padding: 20px; color: #27ae60 ; font-weight: bold;">高</td>
                        </tr>
                        <tr style="background: white;">
                            <td style="padding: 20px; font-weight: bold; color: #2c3e50 ;">🍒 チェリーピック</td>
                            <td style="padding: 20px;">特定コミット移植</td>
                            <td style="padding: 20px;">保持</td>
                            <td style="padding: 20px; color: #f39c12 ; font-weight: bold;">中</td>
                        </tr>
                    </tbody>
                </table>
                
                <div style="margin-top: 50px; background: linear-gradient(135deg, #667eea  0%, #764ba2  100%); padding: 40px; border-radius: 15px; color: white; text-align: center;">
                    <h2 style="font-size: 2em; margin-bottom: 20px;">💡 迷ったら</h2>
                    <p style="font-size: 1.4em; line-height: 1.8;">
                        <strong>チーム開発</strong> → マージ<br>
                        <strong>個人ブランチ整理</strong> → リベース<br>
                        <strong>本番のバグ修正</strong> → リバート<br>
                        <strong>特定の修正だけ</strong> → チェリーピック
                    </p>
                </div>
            </div>
        </div>

    </div>
</body>
</html>