<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git練習コマンド集 - Excel出力</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.5em;
}
.subtitle {
text-align: center;
color: #666 ;
margin-bottom: 40px;
font-size: 1.2em;
}
.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);
}
.download-btn:active {
transform: translateY(0);
}
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
th {
background: #2c3e50 ;
color: white;
padding: 15px;
text-align: left;
font-size: 1.1em;
}
td {
padding: 12px 15px;
border-bottom: 1px solid #e9ecef ;
}
tr:nth-child(even) {
background: #f8f9fa ;
}
tr:hover {
background: #e7f3ff ;
}
.info-box {
background: #e7f3ff ;
border-left: 5px solid #2196F3 ;
padding: 20px;
margin: 30px 0;
border-radius: 8px;
}
.section-title {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 25px;
border-radius: 10px;
margin: 30px 0 20px 0;
font-size: 1.3em;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>📊 Git練習コマンド集 - Excel出力</h1>
<p class="subtitle">main → main_ishiTest でマージ・リベース・リバート・チェリーピック</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="info-box">
<h3 style="margin-bottom: 10px;">💡 Excelファイルの内容</h3>
<ul style="margin-left: 20px; line-height: 2;">
<li><strong>シート1:</strong> 全コマンド一覧（操作別）</li>
<li><strong>シート2:</strong> 事前準備</li>
<li><strong>シート3:</strong> マージ練習</li>
<li><strong>シート4:</strong> リベース練習</li>
<li><strong>シート5:</strong> リバート練習</li>
<li><strong>シート6:</strong> チェリーピック練習</li>
<li><strong>シート7:</strong> よく使うコマンド</li>
<li><strong>シート8:</strong> トラブルシューティング</li>
</ul>
</div>
<div class="section-title">📋 プレビュー: 全コマンド一覧</div>
<table id="previewTable">
<thead>
<tr>
<th>操作</th>
<th>順番</th>
<th>説明</th>
<th>コマンド</th>
<th>備考</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- JavaScriptで動的生成 -->
</tbody>
</table>
</div>
<script>
const allCommands = [
["事前準備", "1", "リポジトリをクローン", "git clone https://github.com/ユーザー名/リポジトリ名.git", "最初の1回のみ"],
["事前準備", "2", "フォルダに移動", "cd リポジトリ名", ""],
["事前準備", "3", "テストブランチ作成", "git checkout -b main_ishiTest", ""],
["事前準備", "4", "GitHubにプッシュ", "git push -u origin main_ishiTest", ""],
["マージ", "1", "ブランチ移動", "git checkout main_ishiTest", ""],
["マージ", "2", "ファイル編集", "echo \"merge test\" >> test.txt", ""],
["マージ", "3", "ステージング", "git add .", ""],
["マージ", "4", "コミット", "git commit -m \"merge練習用コミット\"", ""],
["マージ", "5", "mainを取り込む", "git merge origin/main", ""],
["マージ", "6", "プッシュ", "git push origin main_ishiTest", ""],
["リベース", "1", "ブランチ移動", "git checkout main_ishiTest", ""],
["リベース", "2", "ファイル編集", "echo \"rebase test\" >> test.txt", ""],
["リベース", "3", "ステージング", "git add .", ""],
["リベース", "4", "コミット", "git commit -m \"rebase練習用コミット\"", ""],
["リベース", "5", "mainを取得", "git fetch origin main", ""],
["リベース", "6", "リベース実行", "git rebase origin/main", "履歴書換"],
["リベース", "7", "強制プッシュ", "git push -f origin main_ishiTest", "⚠️注意"],
["リバート", "1", "履歴確認", "git log --oneline", "コミットID確認"],
["リバート", "2", "直前を取消", "git revert HEAD", ""],
["リバート", "3", "特定コミット取消", "git revert <コミットID>", ""],
["リバート", "4", "プッシュ", "git push origin main_ishiTest", ""],
["チェリーピック", "1", "ブランチ移動", "git checkout main_ishiTest", ""],
["チェリーピック", "2", "mainの履歴確認", "git log origin/main --oneline", "コミットID確認"],
["チェリーピック", "3", "コミット取り込み", "git cherry-pick <コミットID>", ""],
["チェリーピック", "4", "プッシュ", "git push origin main_ishiTest", ""],
["よく使う", "-", "現在のブランチ確認", "git branch", ""],
["よく使う", "-", "状態確認", "git status", ""],
["よく使う", "-", "履歴確認", "git log --oneline", ""],
["よく使う", "-", "リモート確認", "git remote -v", ""],
["よく使う", "-", "差分確認", "git diff", ""],
["トラブル", "-", "マージ中止", "git merge --abort", "コンフリクト時"],
["トラブル", "-", "リベース中止", "git rebase --abort", "コンフリクト時"],
["トラブル", "-", "チェリーピック中止", "git cherry-pick --abort", "コンフリクト時"],
["トラブル", "-", "直前のコミット取消", "git reset --soft HEAD~1", "ローカルのみ"],
["トラブル", "-", "変更を完全に破棄", "git reset --hard HEAD", "⚠️危険"],
];
const tableBody = document.getElementById('tableBody');
allCommands.forEach(row => {
const tr = document.createElement('tr');
row.forEach(cell => {
const td = document.createElement('td');
td.textContent = cell;
tr.appendChild(td);
});
tableBody.appendChild(tr);
});
function downloadExcel() {
const wb = XLSX.utils.book_new();
const ws1Data = [
["操作", "順番", "説明", "コマンド", "備考"],
...allCommands
];
const ws1 = XLSX.utils.aoa_to_sheet(ws1Data);
ws1['!cols'] = [
{wch: 15},
{wch: 8},
{wch: 25},
{wch: 50},
{wch: 15}
];
XLSX.utils.book_append_sheet(wb, ws1, "全コマンド一覧");
const ws2Data = [
["順番", "説明", "コマンド", "備考"],
["1", "リポジトリをクローン", "git clone https://github.com/ユーザー名/リポジトリ名.git", "最初の1回のみ"],
["2", "フォルダに移動", "cd リポジトリ名", ""],
["3", "テストブランチ作成", "git checkout -b main_ishiTest", "自分専用ブランチ"],
["4", "GitHubにプッシュ", "git push -u origin main_ishiTest", "リモートに反映"],
];
const ws2 = XLSX.utils.aoa_to_sheet(ws2Data);
ws2['!cols'] = [{wch: 8}, {wch: 25}, {wch: 60}, {wch: 20}];
XLSX.utils.book_append_sheet(wb, ws2, "事前準備");
const ws3Data = [
["順番", "説明", "コマンド", "備考"],
["1", "ブランチ移動", "git checkout main_ishiTest", ""],
["2", "ファイル編集", "echo \"merge test\" >> test.txt", "または手動で編集"],
["3", "ステージング", "git add .", "全ての変更を追加"],
["4", "コミット", "git commit -m \"merge練習用コミット\"", ""],
["5", "mainを取り込む", "git merge origin/main", "履歴を保持"],
["6", "プッシュ", "git push origin main_ishiTest", "GitHubに反映"],
];
const ws3 = XLSX.utils.aoa_to_sheet(ws3Data);
ws3['!cols'] = [{wch: 8}, {wch: 20}, {wch: 50}, {wch: 20}];
XLSX.utils.book_append_sheet(wb, ws3, "マージ練習");
const ws4Data = [
["順番", "説明", "コマンド", "備考"],
["1", "ブランチ移動", "git checkout main_ishiTest", ""],
["2", "ファイル編集", "echo \"rebase test\" >> test.txt", "または手動で編集"],
["3", "ステージング", "git add .", ""],
["4", "コミット", "git commit -m \"rebase練習用コミット\"", ""],
["5", "mainを取得", "git fetch origin main", "最新情報取得"],
["6", "リベース実行", "git rebase origin/main", "⚠️履歴書換"],
["7", "強制プッシュ", "git push -f origin main_ishiTest", "⚠️共有ブランチでは禁止"],
];
const ws4 = XLSX.utils.aoa_to_sheet(ws4Data);
ws4['!cols'] = [{wch: 8}, {wch: 20}, {wch: 50}, {wch: 25}];
XLSX.utils.book_append_sheet(wb, ws4, "リベース練習");
const ws5Data = [
["順番", "説明", "コマンド", "備考"],
["1", "履歴確認", "git log --oneline", "コミットID確認"],
["2", "直前を取消", "git revert HEAD", "最新コミットを取消"],
["3", "特定コミット取消", "git revert <コミットID>", "IDを指定"],
["4", "プッシュ", "git push origin main_ishiTest", "履歴は残る"],
];
const ws5 = XLSX.utils.aoa_to_sheet(ws5Data);
ws5['!cols'] = [{wch: 8}, {wch: 20}, {wch: 40}, {wch: 20}];
XLSX.utils.book_append_sheet(wb, ws5, "リバート練習");
const ws6Data = [
["順番", "説明", "コマンド", "備考"],
["1", "ブランチ移動", "git checkout main_ishiTest", ""],
["2", "mainの履歴確認", "git log origin/main --oneline", "欲しいコミットのID確認"],
["3", "コミット取り込み", "git cherry-pick <コミットID>", "特定のコミットだけ"],
["4", "プッシュ", "git push origin main_ishiTest", ""],
];
const ws6 = XLSX.utils.aoa_to_sheet(ws6Data);
ws6['!cols'] = [{wch: 8}, {wch: 20}, {wch: 45}, {wch: 25}];
XLSX.utils.book_append_sheet(wb, ws6, "チェリーピック練習");
const ws7Data = [
["コマンド", "説明", "使い方"],
["git branch", "ブランチ一覧表示", "現在のブランチに*がつく"],
["git status", "現在の状態確認", "変更ファイルを確認"],
["git log --oneline", "コミット履歴を確認", "コミットIDと説明を表示"],
["git log --graph", "グラフ形式で履歴表示", "ブランチの分岐が見やすい"],
["git remote -v", "リモートリポジトリ確認", "originのURLを表示"],
["git diff", "変更内容の確認", "コミット前の差分確認"],
["git fetch", "最新情報を取得", "ローカルは変更しない"],
["git pull", "取得してマージ", "fetch + merge"],
];
const ws7 = XLSX.utils.aoa_to_sheet(ws7Data);
ws7['!cols'] = [{wch: 25}, {wch: 25}, {wch: 40}];
XLSX.utils.book_append_sheet(wb, ws7, "よく使うコマンド");
const ws8Data = [
["問題", "解決コマンド", "説明"],
["マージを中止したい", "git merge --abort", "コンフリクト時に元に戻す"],
["リベースを中止したい", "git rebase --abort", "コンフリクト時に元に戻す"],
["チェリーピックを中止", "git cherry-pick --abort", "コンフリクト時に元に戻す"],
["直前のコミットを取消", "git reset --soft HEAD~1", "⚠️ローカルのみ有効"],
["変更を完全に破棄", "git reset --hard HEAD", "⚠️全ての変更が消える"],
["プッシュ済みを取消", "git revert <コミットID>", "安全に取り消せる"],
["間違えてコミット", "git commit --amend", "直前のコミットを修正"],
["ブランチ名を変更", "git branch -m 新しい名前", "現在のブランチを変更"],
];
const ws8 = XLSX.utils.aoa_to_sheet(ws8Data);
ws8['!cols'] = [{wch: 30}, {wch: 35}, {wch: 30}];
XLSX.utils.book_append_sheet(wb, ws8, "トラブルシューティング");
XLSX.writeFile(wb, "Git練習コマンド集.xlsx");
alert("✅ Excelファイルのダウンロードが完了しました！");
}
</script>
</body>
</html>
