メインコンテンツへスキップ

🌐 Git ローカル⇔リモート 完全ガイド Clone・Origin・紐づけの仕組みをドラえもんで理解する #AI駆動学習


    自分用の学習記録ですが、あなたのお役に立てば幸いです。

    画像
    画像

    🤖 ドラえもんで理解する Git の仕組み

    📚 ローカル = のび太の机の引き出し

    あなたのパソコンは、のび太の机の引き出し。
    ここに秘密道具(コード)を入れて作業します。
    他の人には見えません。自分だけの作業場所です。

    ☁️ リモート(GitHub) = 四次元ポケット

    GitHubは、ドラえもんの四次元ポケット。
    みんなが共有できる大きな収納スペース。
    ここに秘密道具(コード)を入れれば、チーム全員が使えます。

    🔗 origin = 四次元ポケットへの道

    origin は、のび太の引き出しから四次元ポケットへの道。
    この道があるから、引き出しの道具をポケットに入れたり、
    ポケットの道具を引き出しに持ってこれます。

    📥 clone = ポケットから引き出しへコピー

    git clone は、四次元ポケットの中身を全部、のび太の引き出しにコピーすること。
    タケコプターもどこでもドアも、全部引き出しに入ります。
    そして、自動的に origin という道も作られます。


    📊 ローカル vs リモート 比較

    項目 ローカル(Local) リモート(Remote) 場所 あなたのPC GitHubのサーバー 見える人 あなただけ チーム全員 ネット接続 不要 必須 作業 編集・コミット pushで受け取るのみ 速度 超速い ネット次第

    🖥 ローカルの例:

    git add .
    git commit -m "変更"
    

    ☁️ リモートの例:

    git push origin main
    

    🚀 実践:最初から最後まで

    パターン1:GitHubから始める(推奨)

    1️⃣ GitHubでリポジトリ作成
    GitHub.comで「New repository」をクリック。

    2️⃣ URLをコピー
    例:https://github.com/ユーザー名/リポジトリ名.git

    3️⃣ ローカルにクローン

    git clone https://github.com/ユーザー名/リポジトリ名.git
    

    ✅ これで自動的に origin が設定される!

    4️⃣ フォルダに移動

    cd リポジトリ名
    

    5️⃣ 作業開始!
    ファイルを編集・追加。

    💡 clone で自動的に起こること

    • リモートの全ファイルがコピーされる

    • origin が自動登録される

    • .git フォルダが作成される


    パターン2:ローカルから始める

    1️⃣ フォルダ作成

    mkdir my-project
    cd my-project
    

    2️⃣ Git初期化

    git init
    

    3️⃣ ファイル作成・コミット

    echo "# My Project" > README.md
    git add .
    git commit -m "Initial commit"
    

    4️⃣ GitHubで空のリポジトリを作成

    5️⃣ リモートを追加

    git remote add origin https://github.com/ユーザー名/リポジトリ名.git
    

    ⚠️ これをやらないと push できない!

    6️⃣ 初回プッシュ

    git push -u origin main
    

    -u は上流ブランチ設定。次回から git push だけでOK。


    🔗 origin とは?

    origin は、リモートリポジトリの「あだ名」。
    長いURLを毎回打たずに済むように、短縮名をつけているだけ。

    git remote -v
    

    出力例:

    origin  https://github.com/user/repo.git (fetch)
    origin  https://github.com/user/repo.git (push)
    

    💡 origin以外の名前も使える

    git remote add upstream https://github.com/other/repo.git
    
    • origin = 自分のリポジトリ

    • upstream = フォーク元リポジトリ


    🔄 fetch / pull / push の違い

    コマンド 方向 動作 ドラえもんで例えると git fetch リモート → ローカル 情報だけ取得 ポケットを覗く git pull リモート → ローカル 取得+マージ ポケットから道具を出す git push ローカル → リモート コミットを送信 引き出しからポケットへ git clone リモート → ローカル 初回コピー ポケットの中身を全部コピー


    🎯 毎日の作業フロー

    1️⃣ 朝:最新を取得

    git pull origin main
    

    2️⃣ 作業:コードを書く

    3️⃣ コミット

    git add .
    git commit -m "機能追加"
    

    4️⃣ 再度最新確認

    git pull origin main
    

    5️⃣ プッシュ

    git push origin main
    

    ✅ これで共有完了!


    ⚠️ よくあるトラブルと解決法

    ❌ pushできない

    エラー: ! [rejected] main -> main (fetch first)

    原因:リモートが更新されている
    解決:

    git pull origin main
    git push origin main
    

    ❌ originが設定されていない

    エラー: fatal: 'origin' does not appear to be a git repository

    解決:

    git remote -v
    git remote add origin https://github.com/ユーザー名/リポジトリ名.git
    

    ❌ pullでコンフリクト

    エラー: CONFLICT (content): Merge conflict in file.txt

    解決:

    # 1. ファイルを開いて修正
    git add .
    git commit -m "コンフリクト解決"
    git push origin main
    

    📚 よく使うコマンド一覧

    コマンド 内容 使用頻度 git clone URL リポジトリをコピー ⭐最初の1回 git pull origin main 最新を取得 ⭐⭐⭐ 毎日 git push origin main 変更を送信 ⭐⭐⭐ 毎日 git remote -v リモート確認 ⭐⭐ 時々 git fetch origin 情報だけ取得 ⭐⭐ 時々 git remote add origin URL リモート追加 ⭐ 最初の1回


    🎓 理解度チェック

    ✅ 理解できていれば完璧!

    • ローカル=自分のPC

    • リモート=GitHub

    • origin=リモートのあだ名

    • clone=自動でorigin登録

    • commit=ローカル保存

    • push=リモート送信

    • pull=リモートから取得


    🧠 ドラえもんで総復習!

    概念 ドラえもんで例えると 🖥️ ローカル のび太の机の引き出し ☁️ リモート ドラえもんの四次元ポケット 🔗 origin 引き出しからポケットへの道 📥 clone ポケットの中身を全部コピー 📤 push 引き出しの道具をポケットに入れる 📥 pull ポケットの道具を引き出しに持ってくる 👀 fetch ポケットの中を覗く


    📝 まとめ

    1️⃣ 最初:git clone URL
    2️⃣ 朝:git pull origin main
    3️⃣ 作業:git add . → git commit
    4️⃣ 共有:git push origin main

    困ったら:

    git remote -v
    

    で確認!


    HTML資料

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Git ローカル⇔リモート完全ガイド</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
        <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: 1400px;
                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: 15px;
                font-size: 2.8em;
            }
            
            .subtitle {
                text-align: center;
                color: #666 ;
                margin-bottom: 40px;
                font-size: 1.3em;
            }
            
            .download-section {
                text-align: center;
                margin: 40px 0;
            }
            
            .download-btn {
                background: linear-gradient(135deg, #43e97b  0%, #38f9d7  100%);
                color: white;
                border: none;
                padding: 20px 50px;
                border-radius: 50px;
                font-size: 1.5em;
                font-weight: bold;
                cursor: pointer;
                box-shadow: 0 10px 30px rgba(67, 233, 123, 0.4);
                transition: all 0.3s;
            }
            
            .download-btn:hover {
                transform: translateY(-3px);
                box-shadow: 0 15px 40px rgba(67, 233, 123, 0.6);
            }
            
            .doraemon-box {
                background: linear-gradient(135deg, #00a0e9  0%, #0082d1  100%);
                color: white;
                padding: 35px;
                border-radius: 20px;
                margin: 40px 0;
                box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3);
            }
            
            .doraemon-box h2 {
                font-size: 2em;
                margin-bottom: 20px;
                text-align: center;
            }
            
            .doraemon-example {
                background: rgba(255,255,255,0.15);
                padding: 25px;
                border-radius: 15px;
                margin: 20px 0;
                border-left: 5px solid white;
            }
            
            .doraemon-example h3 {
                font-size: 1.4em;
                margin-bottom: 15px;
            }
            
            .comparison-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 30px;
                margin: 40px 0;
            }
            
            .comparison-card {
                background: #f8f9fa ;
                border-radius: 15px;
                padding: 30px;
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            }
            
            .comparison-card.local {
                border-left: 6px solid #28a745 ;
            }
            
            .comparison-card.remote {
                border-left: 6px solid #dc3545 ;
            }
            
            .comparison-card h3 {
                font-size: 1.6em;
                margin-bottom: 20px;
                color: #2c3e50 ;
            }
            
            .section-title {
                background: linear-gradient(135deg, #667eea  0%, #764ba2  100%);
                color: white;
                padding: 20px 30px;
                border-radius: 15px;
                margin: 40px 0 25px 0;
                font-size: 1.6em;
                font-weight: bold;
            }
            
            .command-block {
                background: #282c34 ;
                color: #61dafb ;
                padding: 15px 20px;
                border-radius: 10px;
                font-family: 'Courier New', monospace;
                font-size: 1.05em;
                margin: 15px 0;
                position: relative;
                overflow-x: auto;
            }
            
            .copy-btn {
                position: absolute;
                top: 10px;
                right: 10px;
                background: #28a745 ;
                color: white;
                border: none;
                padding: 5px 15px;
                border-radius: 5px;
                cursor: pointer;
                font-size: 0.85em;
            }
            
            .visual-diagram {
                background: white;
                border: 3px solid #e9ecef ;
                border-radius: 15px;
                padding: 40px;
                margin: 30px 0;
                text-align: center;
            }
            
            .diagram-row {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
                margin: 30px 0;
            }
            
            .diagram-box {
                padding: 25px 40px;
                border-radius: 12px;
                font-weight: bold;
                font-size: 1.2em;
                box-shadow: 0 5px 15px rgba(0,0,0,0.2);
                min-width: 200px;
            }
            
            .diagram-box.local {
                background: linear-gradient(135deg, #28a745  0%, #20c997  100%);
                color: white;
            }
            
            .diagram-box.remote {
                background: linear-gradient(135deg, #dc3545  0%, #fd7e14  100%);
                color: white;
            }
            
            .arrow {
                font-size: 3em;
                color: #667eea ;
                font-weight: bold;
            }
            
            .info-box {
                background: #e7f3ff ;
                border-left: 5px solid #2196F3 ;
                padding: 20px;
                margin: 25px 0;
                border-radius: 10px;
            }
            
            .warning-box {
                background: #fff3cd ;
                border-left: 5px solid #ffc107 ;
                padding: 20px;
                margin: 25px 0;
                border-radius: 10px;
            }
            
            .tip-box {
                background: #d4edda ;
                border-left: 5px solid #28a745 ;
                padding: 20px;
                margin: 25px 0;
                border-radius: 10px;
            }
            
            .step-card {
                background: white;
                border: 2px solid #e9ecef ;
                border-radius: 12px;
                padding: 25px;
                margin: 20px 0;
            }
            
            .step-number {
                background: #667eea ;
                color: white;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 1.2em;
                margin-right: 15px;
            }
            
            .flow-chart {
                background: #f8f9fa ;
                border-radius: 15px;
                padding: 30px;
                margin: 30px 0;
            }
            
            .flow-step {
                display: flex;
                align-items: center;
                margin: 20px 0;
                padding: 20px;
                background: white;
                border-radius: 10px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            
            .flow-arrow {
                text-align: center;
                font-size: 2em;
                color: #667eea ;
                margin: 10px 0;
            }
            
            table {
                width: 100%;
                border-collapse: collapse;
                margin: 25px 0;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                border-radius: 10px;
                overflow: hidden;
            }
            
            th {
                background: #2c3e50 ;
                color: white;
                padding: 18px;
                text-align: left;
                font-size: 1.1em;
            }
            
            td {
                padding: 15px 18px;
                border-bottom: 1px solid #e9ecef ;
            }
            
            tr:hover {
                background: #f8f9fa ;
            }
            
            @media (max-width: 768px) {
                .comparison-grid {
                    grid-template-columns: 1fr;
                }
                .diagram-row {
                    flex-direction: column;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>🌐 Git ローカル⇔リモート 完全ガイド</h1>
            <p class="subtitle">Clone・Origin・紐づけの仕組みをドラえもんで理解する</p>
            
            <div class="download-section">
                <button class="download-btn" onclick="downloadExcel()">
                    📥 Excelチートシートをダウンロード
                </button>
                <p style="margin-top: 20px; color: #666 ; font-size: 1.1em;">
                    クリックすると「Git_ローカルリモート_完全ガイド.xlsx」がダウンロードされます
                </p>
            </div>
    
            <div class="doraemon-box">
                <h2>🤖 ドラえもんで理解する Git の仕組み</h2>
                
                <div class="doraemon-example">
                    <h3>📚 ローカル = のび太の机の引き出し</h3>
                    <p style="font-size: 1.15em; line-height: 1.8;">
                        あなたのパソコンは、<strong>のび太の机の引き出し</strong>です。<br>
                        ここに秘密道具(コード)を入れて作業します。<br>
                        他の人には見えません。自分だけの作業場所です。
                    </p>
                </div>
                
                <div class="doraemon-example">
                    <h3>☁️ リモート(GitHub) = 四次元ポケット</h3>
                    <p style="font-size: 1.15em; line-height: 1.8;">
                        GitHubは、<strong>ドラえもんの四次元ポケット</strong>です。<br>
                        みんなが共有できる大きな収納スペース。<br>
                        ここに秘密道具(コード)を入れれば、チーム全員が使えます。
                    </p>
                </div>
                
                <div class="doraemon-example">
                    <h3>🔗 origin = 四次元ポケットへの道</h3>
                    <p style="font-size: 1.15em; line-height: 1.8;">
                        <code style="background: rgba(255,255,255,0.3); padding: 3px 10px; border-radius: 5px;">origin</code> は、
                        <strong>のび太の引き出しから四次元ポケットへの道</strong>です。<br>
                        この道があるから、引き出しの道具をポケットに入れたり、<br>
                        ポケットの道具を引き出しに持ってこれます。
                    </p>
                </div>
                
                <div class="doraemon-example">
                    <h3>📥 Clone = ポケットから引き出しへコピー</h3>
                    <p style="font-size: 1.15em; line-height: 1.8;">
                        <code style="background: rgba(255,255,255,0.3); padding: 3px 10px; border-radius: 5px;">git clone</code> は、
                        <strong>四次元ポケットの中身を全部、のび太の引き出しにコピー</strong>することです。<br>
                        タケコプターもどこでもドアも、全部引き出しに入ります。<br>
                        そして、<strong>自動的にポケットへの道(origin)も作られます</strong>。
                    </p>
                </div>
            </div>
    
            <div class="section-title">📊 ローカル vs リモート 完全比較</div>
    
            <div class="visual-diagram">
                <h3 style="color: #2c3e50 ; margin-bottom: 30px; font-size: 1.8em;">全体像</h3>
                <div class="diagram-row">
                    <div class="diagram-box local">
                        🖥️ ローカル<br>
                        (あなたのPC)
                    </div>
                    <div class="arrow">⇄</div>
                    <div class="diagram-box remote">
                        ☁️ リモート<br>
                        (GitHub)
                    </div>
                </div>
                <p style="color: #666 ; font-size: 1.1em; margin-top: 20px;">
                    この2つを <strong>origin</strong> という道でつなぐ
                </p>
            </div>
    
            <div class="comparison-grid">
                <div class="comparison-card local">
                    <h3>🖥️ ローカル(Local)</h3>
                    <ul style="line-height: 2; margin-left: 20px;">
                        <li><strong>場所:</strong> あなたのPC</li>
                        <li><strong>見える人:</strong> あなただけ</li>
                        <li><strong>速度:</strong> 超速い</li>
                        <li><strong>ネット:</strong> 不要</li>
                        <li><strong>作業:</strong> ここで編集</li>
                        <li><strong>コミット:</strong> ローカルに保存</li>
                    </ul>
                    <div class="command-block" style="margin-top: 20px;">
    # ローカルで作業
    git add .
    git commit -m "変更"
                    </div>
                </div>
    
                <div class="comparison-card remote">
                    <h3>☁️ リモート(Remote)</h3>
                    <ul style="line-height: 2; margin-left: 20px;">
                        <li><strong>場所:</strong> GitHub のサーバー</li>
                        <li><strong>見える人:</strong> チーム全員</li>
                        <li><strong>速度:</strong> ネット次第</li>
                        <li><strong>ネット:</strong> 必須</li>
                        <li><strong>作業:</strong> 直接編集しない</li>
                        <li><strong>プッシュ:</strong> ここに送る</li>
                    </ul>
                    <div class="command-block" style="margin-top: 20px;">
    # リモートに送る
    git push origin main
                    </div>
                </div>
            </div>
    
            <div class="section-title">🚀 実践:最初から最後まで</div>
    
            <h2 style="color: #2c3e50 ; margin: 30px 0 20px 0;">パターン1: GitHubから始める(推奨)</h2>
    
            <div class="flow-chart">
                <h3 style="margin-bottom: 20px; color: #2c3e50 ;">📝 手順の流れ</h3>
                
                <div class="flow-step">
                    <div class="step-number">1</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">GitHubでリポジトリ作成</h4>
                        <p style="color: #666 ;">GitHub.com で「New repository」をクリック</p>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">2</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">URLをコピー</h4>
                        <div class="command-block">
    https://github.com/ユーザー名/リポジトリ名.git
                        </div>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">3</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">ローカルにクローン</h4>
                        <div class="command-block">
    git clone https://github.com/ユーザー名/リポジトリ名.git
    <button class="copy-btn" onclick="copyText('git clone https://github.com/ユーザー名/リポジトリ名.git')">コピー</button>
                        </div>
                        <p style="color: #28a745 ; margin-top: 10px; font-weight: bold;">
                            ✅ これで自動的に origin が設定される!
                        </p>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">4</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">フォルダに移動</h4>
                        <div class="command-block">
    cd リポジトリ名
    <button class="copy-btn" onclick="copyText('cd リポジトリ名')">コピー</button>
                        </div>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">5</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">作業開始!</h4>
                        <p style="color: #666 ;">ファイルを編集・追加</p>
                    </div>
                </div>
            </div>
    
            <div class="tip-box">
                <h3 style="margin-bottom: 15px;">💡 clone すると自動的に起こること</h3>
                <ol style="margin-left: 20px; line-height: 2;">
                    <li>リモートの全ファイルがローカルにコピーされる</li>
                    <li><strong>origin という名前でリモートが登録される</strong></li>
                    <li>現在のブランチ(通常はmain)がチェックアウトされる</li>
                    <li>.git フォルダが作成される(Git管理情報)</li>
                </ol>
            </div>
    
            <h2 style="color: #2c3e50 ; margin: 40px 0 20px 0;">パターン2: ローカルから始める</h2>
    
            <div class="flow-chart">
                <div class="flow-step">
                    <div class="step-number">1</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">ローカルでフォルダ作成</h4>
                        <div class="command-block">
    mkdir my-project
    cd my-project
                        </div>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">2</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">Gitを初期化</h4>
                        <div class="command-block">
    git init
    <button class="copy-btn" onclick="copyText('git init')">コピー</button>
                        </div>
                        <p style="color: #666 ; margin-top: 10px;">
                            これでローカルリポジトリ作成(まだリモートとは繋がってない)
                        </p>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">3</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">ファイル作成・コミット</h4>
                        <div class="command-block">
    echo "# My Project" > README.md
    git add .
    git commit -m "Initial commit"
                        </div>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">4</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">GitHubでリポジトリ作成</h4>
                        <p style="color: #666 ;">GitHub.com で空のリポジトリを作成</p>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">5</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">リモートを手動で追加(origin設定)</h4>
                        <div class="command-block">
    git remote add origin https://github.com/ユーザー名/リポジトリ名.git
    <button class="copy-btn" onclick="copyText('git remote add origin https://github.com/ユーザー名/リポジトリ名.git')">コピー</button>
                        </div>
                        <p style="color: #dc3545 ; margin-top: 10px; font-weight: bold;">
                            ⚠️ これをやらないとpushできない!
                        </p>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">6</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">初回プッシュ</h4>
                        <div class="command-block">
    git push -u origin main
    <button class="copy-btn" onclick="copyText('git push -u origin main')">コピー</button>
                        </div>
                        <p style="color: #666 ; margin-top: 10px;">
                            -u は上流ブランチを設定(次回から git push だけでOK)
                        </p>
                    </div>
                </div>
            </div>
    
            <div class="section-title">🔗 origin とは何か?</div>
    
            <div class="info-box">
                <h3 style="margin-bottom: 15px;">📖 origin の正体</h3>
                <p style="font-size: 1.15em; line-height: 1.8;">
                    <strong>origin</strong> は、<strong>リモートリポジトリの「あだ名」</strong>です。<br><br>
                    
                    本当のURL: <code>https://github.com/user/repo.git</code><br>
                    あだ名: <code>origin</code><br><br>
                    
                    毎回長いURLを打つのは面倒なので、<strong>origin</strong> という短い名前を付けています。<br>
                    <code>origin</code> という名前は慣習的なもので、<strong>自由に変更可能</strong>です。
                </p>
            </div>
    
            <h3 style="color: #2c3e50 ; margin: 30px 0 20px 0;">origin の確認方法</h3>
    
            <div class="command-block">
    # リモートの一覧表示
    git remote -v
    <button class="copy-btn" onclick="copyText('git remote -v')">コピー</button>
            </div>
    
            <div style="background: #f8f9fa ; padding: 20px; border-radius: 10px; margin: 20px 0; font-family: 'Courier New', monospace;">
    <strong>出力例:</strong><br>
    origin  https://github.com/user/repo.git (fetch)<br>
    origin  https://github.com/user/repo.git (push)
            </div>
    
            <div class="tip-box">
                <h3 style="margin-bottom: 15px;">💡 origin 以外の名前も使える</h3>
                <div class="command-block">
    # upstream という名前でリモート追加
    git remote add upstream https://github.com/other/repo.git
    
    # 確認
    git remote -v
                </div>
                <p style="margin-top: 15px; line-height: 1.8;">
                    <strong>origin</strong> = 自分のリポジトリ<br>
                    <strong>upstream</strong> = 元のリポジトリ(フォーク元)<br>
                    という使い分けをすることもあります。
                </p>
            </div>
    
            <div class="section-title">🔄 fetch / pull / push の違い</div>
    
            <table>
                <thead>
                    <tr>
                        <th>コマンド</th>
                        <th>方向</th>
                        <th>動作</th>
                        <th>ドラえもん例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>git fetch</code></td>
                        <td>リモート → ローカル</td>
                        <td>情報だけ取得(マージしない)</td>
                        <td>ポケットを覗いて何が入ってるか確認</td>
                    </tr>
                    <tr>
                        <td><code>git pull</code></td>
                        <td>リモート → ローカル</td>
                        <td>取得+自動マージ</td>
                        <td>ポケットから道具を引き出しに入れる</td>
                    </tr>
                    <tr>
                        <td><code>git push</code></td>
                        <td>ローカル → リモート</td>
                        <td>ローカルの変更を送信</td>
                        <td>引き出しの道具をポケットに入れる</td>
                    </tr>
                    <tr>
                        <td><code>git clone</code></td>
                        <td>リモート → ローカル</td>
                        <td>初回のみ:全てコピー</td>
                        <td>ポケットの中身を全部コピー</td>
                    </tr>
                </tbody>
            </table>
    
            <h3 style="color: #2c3e50 ; margin: 40px 0 20px 0;">詳しい使い方</h3>
    
            <div class="step-card">
                <h4 style="color: #667eea ; margin-bottom: 15px;">
                    <span class="step-number">1</span>
                    fetch - 情報だけ取得
                </h4>
                <div class="command-block">
    git fetch origin
    <button class="copy-btn" onclick="copyText('git fetch origin')">コピー</button>
                </div>
                <p style="color: #666 ; margin-top: 10px; line-height: 1.8;">
                    リモートの最新状態を取得するが、<strong>ローカルのファイルは変更しない</strong>。<br>
                    「他の人が何か更新したかな?」を確認するだけ。
                </p>
            </div>
    
            <div class="step-card">
                <h4 style="color: #667eea ; margin-bottom: 15px;">
                    <span class="step-number">2</span>
                    pull - 取得してマージ
                </h4>
                <div class="command-block">
    git pull origin main
    <button class="copy-btn" onclick="copyText('git pull origin main')">コピー</button>
                </div>
                <p style="color: #666 ; margin-top: 10px; line-height: 1.8;">
                    リモートの変更を取得して、<strong>自動的に現在のブランチにマージ</strong>。<br>
                    = <code>git fetch</code> + <code>git merge</code>
                </p>
            </div>
    
            <div class="step-card">
                <h4 style="color: #667eea ; margin-bottom: 15px;">
                    <span class="step-number">3</span>
                    push - ローカルを送信
                </h4>
                <div class="command-block">
    git push origin main
    <button class="copy-btn" onclick="copyText('git push origin main')">コピー</button>
                </div>
                <p style="color: #666 ; margin-top: 10px; line-height: 1.8;">
                    ローカルのコミットを<strong>リモートに送信</strong>。<br>
                    これでチームメンバーが変更を見られるようになる。
                </p>
            </div>
    
            <div class="warning-box">
                <h3 style="margin-bottom: 15px;">⚠️ よくある間違い</h3>
                <div style="line-height: 2;">
                    <p><strong>❌ 間違い:</strong> コミットしたらすぐに反映される</p>
                    <p><strong>✅ 正解:</strong> <code>git push</code> しないとリモートには反映されない</p>
                    <br>
                    <p><strong>❌ 間違い:</strong> GitHub で変更したらローカルも自動更新</p>
                    <p><strong>✅ 正解:</strong> <code>git pull</code> しないとローカルは更新されない</p>
                </div>
            </div>
    
            <div class="section-title">🎯 実際の作業フロー</div>
    
            <div class="flow-chart">
                <h3 style="margin-bottom: 20px; color: #2c3e50 ;">毎日の作業パターン</h3>
                
                <div class="flow-step">
                    <div class="step-number">1</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">朝:最新を取得</h4>
                        <div class="command-block">
    git pull origin main
                        </div>
                        <p style="color: #666 ;">他の人の変更を取り込む</p>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">2</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">作業:コードを書く</h4>
                        <p style="color: #666 ;">ファイルを編集・追加</p>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">3</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">ローカルにコミット</h4>
                        <div class="command-block">
    git add .
    git commit -m "機能追加"
                        </div>
                        <p style="color: #666 ;">まだローカルだけに保存</p>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">4</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">念のため最新を確認</h4>
                        <div class="command-block">
    git pull origin main
                        </div>
                        <p style="color: #666 ;">作業中に他の人が更新してないか確認</p>
                    </div>
                </div>
                
                <div class="flow-arrow">⬇️</div>
                
                <div class="flow-step">
                    <div class="step-number">5</div>
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 10px;">リモートにプッシュ</h4>
                        <div class="command-block">
    git push origin main
                        </div>
                        <p style="color: #28a745 ; font-weight: bold;">✅ これで共有完了!</p>
                    </div>
                </div>
            </div>
    
            <div class="section-title">🔧 トラブルシューティング</div>
    
            <div class="step-card">
                <h4 style="color: #dc3545 ; margin-bottom: 15px;">🚨 問題1: push できない</h4>
                <div style="background: #f8d7da ; padding: 15px; border-radius: 8px; margin: 10px 0;">
                    <strong>エラー:</strong> <code>! [rejected] main -> main (fetch first)</code>
                </div>
                <div style="margin-top: 15px;">
                    <p style="font-weight: bold; margin-bottom: 10px;">原因:</p>
                    <p style="color: #666 ;">リモートに新しい変更があり、ローカルが古い</p>
                    <p style="font-weight: bold; margin: 15px 0 10px 0;">解決:</p>
                    <div class="command-block">
    # まず最新を取得
    git pull origin main
    
    # 再度プッシュ
    git push origin main
                    </div>
                </div>
            </div>
    
            <div class="step-card">
                <h4 style="color: #dc3545 ; margin-bottom: 15px;">🚨 問題2: origin が設定されていない</h4>
                <div style="background: #f8d7da ; padding: 15px; border-radius: 8px; margin: 10px 0;">
                    <strong>エラー:</strong> <code>fatal: 'origin' does not appear to be a git repository</code>
                </div>
                <div style="margin-top: 15px;">
                    <p style="font-weight: bold; margin-bottom: 10px;">原因:</p>
                    <p style="color: #666 ;">リモートリポジトリが設定されていない</p>
                    <p style="font-weight: bold; margin: 15px 0 10px 0;">解決:</p>
                    <div class="command-block">
    # 確認
    git remote -v
    
    # 何も表示されなければ追加
    git remote add origin https://github.com/ユーザー名/リポジトリ名.git
    
    # 再確認
    git remote -v
                    </div>
                </div>
            </div>
    
            <div class="step-card">
                <h4 style="color: #dc3545 ; margin-bottom: 15px;">🚨 問題3: pull でコンフリクト</h4>
                <div style="background: #f8d7da ; padding: 15px; border-radius: 8px; margin: 10px 0;">
                    <strong>エラー:</strong> <code>CONFLICT (content): Merge conflict in file.txt</code>
                </div>
                <div style="margin-top: 15px;">
                    <p style="font-weight: bold; margin-bottom: 10px;">原因:</p>
                    <p style="color: #666 ;">同じファイルの同じ場所を編集している</p>
                    <p style="font-weight: bold; margin: 15px 0 10px 0;">解決:</p>
                    <div class="command-block">
    # 1. ファイルを開いて手動で修正
    # &lt;&lt;&lt;&lt;&lt;&lt;&lt; と &gt;&gt;&gt;&gt;&gt;&gt;&gt; の間を編集
    
    # 2. 修正後に追加
    git add .
    
    # 3. コミット
    git commit -m "コンフリクト解決"
    
    # 4. プッシュ
    git push origin main
                    </div>
                </div>
            </div>
    
            <div class="step-card">
                <h4 style="color: #dc3545 ; margin-bottom: 15px;">🚨 問題4: origin の URL が間違っている</h4>
                <div style="margin-top: 15px;">
                    <p style="font-weight: bold; margin-bottom: 10px;">解決:</p>
                    <div class="command-block">
    # 現在のURLを確認
    git remote -v
    
    # URLを変更
    git remote set-url origin https://github.com/正しいユーザー名/リポジトリ名.git
    
    # 確認
    git remote -v
                    </div>
                </div>
            </div>
    
            <div class="section-title">📚 よく使うコマンド一覧</div>
    
            <table>
                <thead>
                    <tr>
                        <th>コマンド</th>
                        <th>説明</th>
                        <th>使用頻度</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>git clone URL</code></td>
                        <td>リポジトリをコピー</td>
                        <td>⭐ 最初の1回</td>
                    </tr>
                    <tr>
                        <td><code>git remote -v</code></td>
                        <td>リモート確認</td>
                        <td>⭐⭐ 時々</td>
                    </tr>
                    <tr>
                        <td><code>git pull origin main</code></td>
                        <td>最新を取得</td>
                        <td>⭐⭐⭐ 毎日</td>
                    </tr>
                    <tr>
                        <td><code>git push origin main</code></td>
                        <td>変更を送信</td>
                        <td>⭐⭐⭐ 毎日</td>
                    </tr>
                    <tr>
                        <td><code>git fetch origin</code></td>
                        <td>情報だけ取得</td>
                        <td>⭐⭐ 時々</td>
                    </tr>
                    <tr>
                        <td><code>git remote add origin URL</code></td>
                        <td>リモート追加</td>
                        <td>⭐ 最初の1回</td>
                    </tr>
                    <tr>
                        <td><code>git remote set-url origin URL</code></td>
                        <td>URL変更</td>
                        <td>⭐ 稀に</td>
                    </tr>
                    <tr>
                        <td><code>git remote remove origin</code></td>
                        <td>リモート削除</td>
                        <td>⭐ 稀に</td>
                    </tr>
                </tbody>
            </table>
    
            <div class="section-title">🎓 理解度チェック</div>
    
            <div class="info-box">
                <h3 style="margin-bottom: 20px;">✅ これが理解できていればOK!</h3>
                <ol style="margin-left: 20px; line-height: 2.5;">
                    <li><strong>ローカル</strong>は自分のPC、<strong>リモート</strong>はGitHub</li>
                    <li><strong>origin</strong>はリモートリポジトリのあだ名</li>
                    <li><strong>clone</strong>すると自動的にoriginが設定される</li>
                    <li><strong>commit</strong>はローカルに保存、<strong>push</strong>でリモートに送信</li>
                    <li><strong>pull</strong>でリモートの変更を取得</li>
                    <li>origin の設定は <code>git remote -v</code> で確認できる</li>
                </ol>
            </div>
    
            <div class="doraemon-box" style="margin-top: 40px;">
                <h2>🎯 ドラえもんで総復習</h2>
                <div style="font-size: 1.15em; line-height: 2; background: rgba(255,255,255,0.15); padding: 25px; border-radius: 15px;">
                    <p><strong>🖥️ ローカル</strong> = のび太の机の引き出し(自分だけの作業場所)</p>
                    <p><strong>☁️ リモート</strong> = ドラえもんの四次元ポケット(みんなで共有)</p>
                    <p><strong>🔗 origin</strong> = 引き出しからポケットへの道</p>
                    <p><strong>📥 clone</strong> = ポケットの中身を全部引き出しにコピー</p>
                    <p><strong>📤 push</strong> = 引き出しの道具をポケットに入れる</p>
                    <p><strong>📥 pull</strong> = ポケットの道具を引き出しに持ってくる</p>
                    <p><strong>👀 fetch</strong> = ポケットを覗いて確認するだけ</p>
                </div>
            </div>
    
            <div style="background: linear-gradient(135deg, #667eea  0%, #764ba2  100%); padding: 40px; border-radius: 15px; color: white; text-align: center; margin-top: 50px;">
                <h2 style="font-size: 2.2em; margin-bottom: 20px;">📝 まとめ</h2>
                <div style="text-align: left; max-width: 800px; margin: 0 auto; font-size: 1.2em; line-height: 2.2;">
                    <p><strong>1️⃣ 最初:</strong> <code style="background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 5px;">git clone URL</code></p>
                    <p><strong>2️⃣ 朝:</strong> <code style="background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 5px;">git pull origin main</code></p>
                    <p><strong>3️⃣ 作業:</strong> 編集 → <code style="background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 5px;">git add .</code> → <code style="background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 5px;">git commit</code></p>
                    <p><strong>4️⃣ 共有:</strong> <code style="background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 5px;">git push origin main</code></p>
                    <p style="margin-top: 20px; text-align: center; font-size: 1.3em;">
                        <strong>困ったら:</strong> <code style="background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 5px;">git remote -v</code> で確認!
                    </p>
                </div>
            </div>
        </div>
    
        <script>
            function copyText(text) {
                navigator.clipboard.writeText(text).then(() => {
                    const btn = event.target;
                    const originalText = btn.textContent;
                    btn.textContent = '✓ コピー完了';
                    btn.style.background = '#218838';
                    setTimeout(() => {
                        btn.textContent = originalText;
                        btn.style.background = '#28a745';
                    }, 2000);
                });
            }
    
            function downloadExcel() {
                const wb = XLSX.utils.book_new();
    
                // シート1: 基本概念
                const ws1Data = [
                    ["用語", "意味", "ドラえもん例", "補足"],
                    ["ローカル", "あなたのPC", "のび太の机の引き出し", "自分だけの作業場所"],
                    ["リモート", "GitHubのサーバー", "四次元ポケット", "チーム全員で共有"],
                    ["origin", "リモートのあだ名", "ポケットへの道", "デフォルトのリモート名"],
                    ["clone", "リポジトリをコピー", "ポケットを全部コピー", "最初の1回だけ"],
                    ["fetch", "情報だけ取得", "ポケットを覗く", "マージしない"],
                    ["pull", "取得+マージ", "道具を持ってくる", "fetch + merge"],
                    ["push", "変更を送信", "道具をポケットに入れる", "共有するため"],
                    ["commit", "ローカルに保存", "引き出しに入れる", "まだ共有されない"],
                ];
                const ws1 = XLSX.utils.aoa_to_sheet(ws1Data);
                ws1['!cols'] = [{wch: 15}, {wch: 20}, {wch: 25}, {wch: 25}];
                XLSX.utils.book_append_sheet(wb, ws1, "基本概念");
    
                // シート2: 基本コマンド
                const ws2Data = [
                    ["コマンド", "説明", "使用場面", "頻度"],
                    ["git clone URL", "リポジトリをローカルにコピー", "プロジェクト開始時", "最初の1回"],
                    ["git remote -v", "リモートリポジトリを確認", "origin確認", "時々"],
                    ["git remote add origin URL", "リモートを手動で追加", "ローカルから始めた時", "最初の1回"],
                    ["git pull origin main", "リモートの変更を取得", "作業開始前・最新化", "毎日"],
                    ["git push origin main", "ローカルの変更を送信", "作業完了後・共有", "毎日"],
                    ["git fetch origin", "情報だけ取得(マージなし)", "他の人の変更確認", "時々"],
                    ["git remote set-url origin URL", "originのURL変更", "URLが間違っていた時", "稀に"],
                    ["git remote remove origin", "originを削除", "リモート変更時", "稀に"],
                ];
                const ws2 = XLSX.utils.aoa_to_sheet(ws2Data);
                ws2['!cols'] = [{wch: 35}, {wch: 30}, {wch: 25}, {wch: 15}];
                XLSX.utils.book_append_sheet(wb, ws2, "基本コマンド");
    
                // シート3: GitHubから始める
                const ws3Data = [
                    ["手順", "コマンド", "説明", "結果"],
                    ["1", "GitHubでリポジトリ作成", "New repository クリック", "リモートができる"],
                    ["2", "URLをコピー", "https://github.com/user/repo.git", "クローン用URL取得"],
                    ["3", "git clone URL", "ローカルにコピー", "自動でorigin設定"],
                    ["4", "cd リポジトリ名", "フォルダに移動", "作業開始準備"],
                    ["5", "ファイル編集", "コードを書く", "変更を加える"],
                    ["6", "git add .", "ステージング", "コミット準備"],
                    ["7", "git commit -m \"メッセージ\"", "ローカルに保存", "まだ共有されない"],
                    ["8", "git push origin main", "リモートに送信", "共有完了"],
                ];
                const ws3 = XLSX.utils.aoa_to_sheet(ws3Data);
                ws3['!cols'] = [{wch: 8}, {wch: 35}, {wch: 30}, {wch: 20}];
                XLSX.utils.book_append_sheet(wb, ws3, "GitHubから始める");
    
                // シート4: ローカルから始める
                const ws4Data = [
                    ["手順", "コマンド", "説明", "注意点"],
                    ["1", "mkdir プロジェクト名", "フォルダ作成", ""],
                    ["2", "cd プロジェクト名", "フォルダに移動", ""],
                    ["3", "git init", "Gitを初期化", "まだoriginなし"],
                    ["4", "ファイル作成・編集", "コードを書く", ""],
                    ["5", "git add .", "ステージング", ""],
                    ["6", "git commit -m \"Initial commit\"", "初回コミット", ""],
                    ["7", "GitHubでリポジトリ作成", "空のリポジトリ", "READMEは作らない"],
                    ["8", "git remote add origin URL", "originを手動設定", "重要!"],
                    ["9", "git push -u origin main", "初回プッシュ", "-u で上流設定"],
                ];
                const ws4 = XLSX.utils.aoa_to_sheet(ws4Data);
                ws4['!cols'] = [{wch: 8}, {wch: 35}, {wch: 25}, {wch: 25}];
                XLSX.utils.book_append_sheet(wb, ws4, "ローカルから始める");
    
                // シート5: 毎日の作業フロー
                const ws5Data = [
                    ["時間帯", "手順", "コマンド", "目的"],
                    ["朝", "1", "git pull origin main", "最新を取得"],
                    ["日中", "2", "ファイル編集", "コードを書く"],
                    ["日中", "3", "git add .", "変更をステージング"],
                    ["日中", "4", "git commit -m \"説明\"", "ローカルに保存"],
                    ["日中", "5", "git pull origin main", "念のため最新確認"],
                    ["夕方", "6", "git push origin main", "変更を共有"],
                    ["随時", "-", "git status", "状態確認"],
                    ["随時", "-", "git log --oneline", "履歴確認"],
                ];
                const ws5 = XLSX.utils.aoa_to_sheet(ws5Data);
                ws5['!cols'] = [{wch: 10}, {wch: 8}, {wch: 30}, {wch: 25}];
                XLSX.utils.book_append_sheet(wb, ws5, "毎日の作業フロー");
    
                // シート6: トラブルシューティング
                const ws6Data = [
                    ["問題", "エラーメッセージ", "原因", "解決方法"],
                    ["pushできない", "! [rejected] main -> main", "リモートが新しい", "git pull origin main してから再push"],
                    ["originがない", "fatal: 'origin' does not appear", "リモート未設定", "git remote add origin URL"],
                    ["pullでコンフリクト", "CONFLICT (content)", "同じ場所を編集", "手動で修正→add→commit"],
                    ["URLが間違い", "fatal: repository not found", "URL誤り", "git remote set-url origin 正しいURL"],
                    ["認証エラー", "Authentication failed", "権限なし", "GitHubのアクセス権確認"],
                    ["ブランチがない", "fatal: branch 'main' not found", "ブランチ名違い", "git branch で確認"],
                ];
                const ws6 = XLSX.utils.aoa_to_sheet(ws6Data);
                ws6['!cols'] = [{wch: 18}, {wch: 35}, {wch: 20}, {wch: 40}];
                XLSX.utils.book_append_sheet(wb, ws6, "トラブルシューティング");
    
                // シート7: fetch vs pull vs push
                const ws7Data = [
                    ["コマンド", "方向", "取得", "マージ", "使用場面", "安全性"],
                    ["git fetch", "リモート→ローカル", "○", "×", "確認だけしたい", "安全"],
                    ["git pull", "リモート→ローカル", "○", "○", "最新を取り込みたい", "注意"],
                    ["git push", "ローカル→リモート", "-", "-", "変更を共有したい", "注意"],
                    ["git clone", "リモート→ローカル", "○", "-", "最初の1回", "安全"],
                ];
                const ws7 = XLSX.utils.aoa_to_sheet(ws7Data);
                ws7['!cols'] = [{wch: 15}, {wch: 20}, {wch: 10}, {wch: 10}, {wch: 25}, {wch: 12}];
                XLSX.utils.book_append_sheet(wb, ws7, "fetch vs pull vs push");
    
                // シート8: origin操作
                const ws8Data = [
                    ["操作", "コマンド", "説明", "使用場面"],
                    ["確認", "git remote -v", "originを確認", "設定されているか確認"],
                    ["追加", "git remote add origin URL", "originを追加", "ローカルから始めた時"],
                    ["URL変更", "git remote set-url origin URL", "URLを変更", "間違えた時"],
                    ["削除", "git remote remove origin", "originを削除", "やり直す時"],
                    ["名前変更", "git remote rename origin new-name", "名前を変更", "origin以外にしたい時"],
                    ["複数追加", "git remote add upstream URL", "別のリモート追加", "フォーク元を追加"],
                ];
                const ws8 = XLSX.utils.aoa_to_sheet(ws8Data);
                ws8['!cols'] = [{wch: 12}, {wch: 40}, {wch: 25}, {wch: 25}];
                XLSX.utils.book_append_sheet(wb, ws8, "origin操作");
    
                // シート9: よくある質問
                const ws9Data = [
                    ["質問", "回答"],
                    ["originは必須?", "はい。pushやpullするには必要です。"],
                    ["origin以外の名前は使える?", "はい。upstream、backup など自由に付けられます。"],
                    ["cloneすればoriginは自動設定される?", "はい。clone時に自動的にoriginが設定されます。"],
                    ["複数のリモートを持てる?", "はい。origin、upstream など複数設定可能です。"],
                    ["commitしたら自動でpushされる?", "いいえ。git pushを手動で実行する必要があります。"],
                    ["GitHubで変更したら自動でpullされる?", "いいえ。git pullを手動で実行する必要があります。"],
                    ["originのURLを後から変更できる?", "はい。git remote set-url で変更できます。"],
                    ["fetchとpullの違いは?", "fetchは取得のみ、pullは取得+マージです。"],
                ];
                const ws9 = XLSX.utils.aoa_to_sheet(ws9Data);
                ws9['!cols'] = [{wch: 40}, {wch: 60}];
                XLSX.utils.book_append_sheet(wb, ws9, "よくある質問");
    
                // シート10: チートシート
                const ws10Data = [
                    ["状況", "コマンド"],
                    ["プロジェクト開始", "git clone URL"],
                    ["朝・作業前", "git pull origin main"],
                    ["作業後・共有", "git add . → git commit → git push origin main"],
                    ["origin確認", "git remote -v"],
                    ["origin追加", "git remote add origin URL"],
                    ["URL変更", "git remote set-url origin URL"],
                    ["状態確認", "git status"],
                    ["履歴確認", "git log --oneline --graph --all"],
                    ["ブランチ確認", "git branch"],
                    ["最新確認(マージなし)", "git fetch origin"],
                    ["コンフリクト解決", "手動修正 → git add . → git commit"],
                    ["pushできない時", "git pull origin main してから再push"],
                ];
                const ws10 = XLSX.utils.aoa_to_sheet(ws10Data);
                ws10['!cols'] = [{wch: 25}, {wch: 50}];
                XLSX.utils.book_append_sheet(wb, ws10, "チートシート");
    
                // Excelファイルをダウンロード
                XLSX.writeFile(wb, "Git_ローカルリモート_完全ガイド.xlsx");
                
                alert("✅ Excelファイルのダウンロードが完了しました!\n\n全10シート収録:\n1. 基本概念(ドラえもん例付き)\n2. 基本コマンド\n3. GitHubから始める手順\n4. ローカルから始める手順\n5. 毎日の作業フロー\n6. トラブルシューティング\n7. fetch vs pull vs push\n8. origin操作\n9. よくある質問\n10. チートシート");
            }
        </script>
    </body>
    </html>

    シェア資料


    あなたへのおすすめ