🌐 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. ファイルを開いて手動で修正
# <<<<<<< と >>>>>>> の間を編集
# 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>