Git　３分でわかるリベースVSマージ図解HTML　＃自分用備忘録いろいろ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3分でわかる！リベース vs マージ</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Meiryo, sans-serif;
            background: linear-gradient(135deg, #667eea  0%, #764ba2  100%);
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        
        h1 {
            color: #667eea ;
            text-align: center;
            margin-bottom: 10px;
            font-size: 2.5em;
        }
        
        .subtitle {
            text-align: center;
            color: #666 ;
            margin-bottom: 40px;
            font-size: 1.2em;
        }
        
        .comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 40px 0;
        }
        
        .method-card {
            background: #f8f9fa ;
            border-radius: 15px;
            padding: 25px;
            border: 3px solid;
        }
        
        .method-card.merge {
            border-color: #28a745 ;
        }
        
        .method-card.rebase {
            border-color: #ff6b6b ;
        }
        
        .method-title {
            font-size: 1.8em;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .method-title.merge {
            color: #28a745 ;
        }
        
        .method-title.rebase {
            color: #ff6b6b ;
        }
        
        .diagram {
            background: white;
            border-radius: 10px;
            padding: 25px;
            margin: 20px 0;
            min-height: 250px;
        }
        
        .branch-line {
            margin: 15px 0;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .commit {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            font-size: 0.9em;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            flex-shrink: 0;
        }
        
        .commit.main {
            background: linear-gradient(135deg, #4facfe  0%, #00f2fe  100%);
        }
        
        .commit.feature {
            background: linear-gradient(135deg, #f093fb  0%, #f5576c  100%);
        }
        
        .commit.merge-commit {
            background: linear-gradient(135deg, #43e97b  0%, #38f9d7  100%);
            animation: glow 2s infinite;
        }
        
        .commit.rebased {
            background: linear-gradient(135deg, #fa709a  0%, #fee140  100%);
        }
        
        @keyframes glow {
            0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.2); }
            50% { box-shadow: 0 0 20px rgba(67, 233, 123, 0.8); }
        }
        
        .arrow {
            color: #adb5bd ;
            font-size: 1.3em;
        }
        
        .branch-label {
            font-weight: bold;
            color: #495057 ;
            font-size: 0.95em;
            min-width: 100px;
        }
        
        .code-box {
            background: #282c34 ;
            color: #61dafb ;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            margin: 15px 0;
            font-size: 0.95em;
        }
        
        .code-comment {
            color: #6a9955 ;
        }
        
        .pros-cons {
            margin: 20px 0;
        }
        
        .pros, .cons {
            margin: 10px 0;
            padding: 15px;
            border-radius: 8px;
        }
        
        .pros {
            background: #d4edda ;
            border-left: 4px solid #28a745 ;
        }
        
        .cons {
            background: #f8d7da ;
            border-left: 4px solid #dc3545 ;
        }
        
        .pros-title, .cons-title {
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .emoji {
            font-size: 1.3em;
        }
        
        .highlight-box {
            background: linear-gradient(135deg, #667eea  0%, #764ba2  100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            margin: 30px 0;
            text-align: center;
        }
        
        .timeline {
            margin: 20px 0;
        }
        
        .timeline-step {
            padding: 10px 0;
            border-left: 3px solid #e9ecef ;
            padding-left: 20px;
            margin-left: 10px;
        }
        
        .step-number {
            background: #667eea ;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 10px;
            font-size: 0.9em;
        }

        @media (max-width: 768px) {
            .comparison {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔄 3分でわかる！リベース vs マージ</h1>
        <p class="subtitle">ブランチAとブランチBの統合方法を徹底比較</p>
        
        <div class="highlight-box">
            <h2 style="margin-bottom: 10px;">🎯 どちらを使うべき？</h2>
            <p><strong>マージ</strong>：履歴を残したい、チーム開発<br>
            <strong>リベース</strong>：きれいな履歴、個人ブランチの更新</p>
        </div>
        
        <div class="comparison">
            <!-- マージ -->
            <div class="method-card merge">
                <div class="method-title merge"><span class="emoji">🔀</span> マージ (Merge)</div>
                
                <div class="diagram">
                    <h4 style="text-align: center; color: #666 ; margin-bottom: 20px;">実行前</h4>
                    <div class="branch-line">
                        <span class="branch-label">main:</span>
                        <div class="commit main">M1</div>
                        <span class="arrow">→</span>
                        <div class="commit main">M2</div>
                    </div>
                    <div class="branch-line">
                        <span class="branch-label">feature:</span>
                        <div class="commit feature">F1</div>
                        <span class="arrow">→</span>
                        <div class="commit feature">F2</div>
                    </div>
                    
                    <div style="text-align: center; margin: 20px 0; font-size: 1.5em; color: #28a745 ;">⬇️</div>
                    
                    <h4 style="text-align: center; color: #666 ; margin-bottom: 20px;">実行後</h4>
                    <div class="branch-line">
                        <span class="branch-label">main:</span>
                        <div class="commit main">M1</div>
                        <span class="arrow">→</span>
                        <div class="commit main">M2</div>
                        <span class="arrow">→</span>
                        <div class="commit merge-commit">M3</div>
                    </div>
                    <div style="margin-left: 100px; font-size: 0.85em; color: #666 ;">
                        ↗️ F1, F2を統合したマージコミット
                    </div>
                </div>
                
                <div class="code-box">
<span class="code-comment"># mainブランチに移動</span>
git checkout main

<span class="code-comment"># featureをマージ</span>
git merge feature
                </div>
                
                <div class="pros-cons">
                    <div class="pros">
                        <div class="pros-title">✅ メリット</div>
                        <ul style="margin-left: 20px;">
                            <li>履歴が保持される</li>
                            <li>安全で簡単</li>
                            <li>チーム開発に最適</li>
                        </ul>
                    </div>
                    <div class="cons">
                        <div class="cons-title">❌ デメリット</div>
                        <ul style="margin-left: 20px;">
                            <li>履歴が複雑になる</li>
                            <li>マージコミットが増える</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- リベース -->
            <div class="method-card rebase">
                <div class="method-title rebase"><span class="emoji">📐</span> リベース (Rebase)</div>
                
                <div class="diagram">
                    <h4 style="text-align: center; color: #666 ; margin-bottom: 20px;">実行前</h4>
                    <div class="branch-line">
                        <span class="branch-label">main:</span>
                        <div class="commit main">M1</div>
                        <span class="arrow">→</span>
                        <div class="commit main">M2</div>
                    </div>
                    <div class="branch-line">
                        <span class="branch-label">feature:</span>
                        <div class="commit feature">F1</div>
                        <span class="arrow">→</span>
                        <div class="commit feature">F2</div>
                    </div>
                    
                    <div style="text-align: center; margin: 20px 0; font-size: 1.5em; color: #ff6b6b ;">⬇️</div>
                    
                    <h4 style="text-align: center; color: #666 ; margin-bottom: 20px;">実行後</h4>
                    <div class="branch-line">
                        <span class="branch-label">main:</span>
                        <div class="commit main">M1</div>
                        <span class="arrow">→</span>
                        <div class="commit main">M2</div>
                        <span class="arrow">→</span>
                        <div class="commit rebased">F1'</div>
                        <span class="arrow">→</span>
                        <div class="commit rebased">F2'</div>
                    </div>
                    <div style="margin-left: 100px; font-size: 0.85em; color: #666 ;">
                        ↗️ 一直線のきれいな履歴
                    </div>
                </div>
                
                <div class="code-box">
<span class="code-comment"># featureブランチに移動</span>
git checkout feature

<span class="code-comment"># mainを基準にリベース</span>
git rebase main

<span class="code-comment"># mainに移動してマージ</span>
git checkout main
git merge feature
                </div>
                
                <div class="pros-cons">
                    <div class="pros">
                        <div class="pros-title">✅ メリット</div>
                        <ul style="margin-left: 20px;">
                            <li>履歴が一直線できれい</li>
                            <li>理解しやすい</li>
                            <li>無駄なコミットなし</li>
                        </ul>
                    </div>
                    <div class="cons">
                        <div class="cons-title">❌ デメリット</div>
                        <ul style="margin-left: 20px;">
                            <li>履歴が書き換わる</li>
                            <li>共有ブランチでは危険</li>
                            <li>コンフリクト解決が複雑</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <div style="background: #f8f9fa ; padding: 30px; border-radius: 15px; margin: 40px 0;">
            <h2 style="color: #667eea ; margin-bottom: 20px; text-align: center;">📋 使い分けガイド</h2>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
                <div style="background: white; padding: 20px; border-radius: 10px; border: 2px solid #28a745 ;">
                    <h3 style="color: #28a745 ; margin-bottom: 15px;">🔀 マージを使う場合</h3>
                    <ul style="margin-left: 20px; color: #666 ;">
                        <li>プルリクエストをマージ</li>
                        <li>チーム開発</li>
                        <li>公開されたブランチ</li>
                        <li>履歴を保持したい</li>
                    </ul>
                </div>
                
                <div style="background: white; padding: 20px; border-radius: 10px; border: 2px solid #ff6b6b ;">
                    <h3 style="color: #ff6b6b ; margin-bottom: 15px;">📐 リベースを使う場合</h3>
                    <ul style="margin-left: 20px; color: #666 ;">
                        <li>個人のfeatureブランチ</li>
                        <li>プルリク前の整理</li>
                        <li>ローカルでの作業</li>
                        <li>きれいな履歴にしたい</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div style="background: #fff3cd ; border-left: 4px solid #ffc107 ; padding: 20px; border-radius: 10px; margin: 30px 0;">
            <h3 style="color: #856404 ; margin-bottom: 10px;">⚠️ 重要な注意点</h3>
            <p style="color: #856404 ; font-weight: bold;">
                リベースは「他の人と共有しているブランチ」では絶対に使わない！<br>
                履歴が書き換わるため、他の人の作業に影響を与えます。
            </p>
        </div>
        
        <div class="highlight-box">
            <h3 style="margin-bottom: 15px;">🎓 まとめ</h3>
            <p style="font-size: 1.1em; line-height: 1.6;">
                <strong>マージ</strong>：安全で簡単、チーム開発向け<br>
                <strong>リベース</strong>：きれいな履歴、個人作業向け<br><br>
                迷ったら<strong>マージ</strong>を使いましょう！
            </p>
        </div>
    </div>
</body>
</html>