🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

GitHubでの変更を元に戻す!reset, revert, checkoutの使い方入門

これまでの記事で、`git add`と`git commit`を使い、ファイルの変更を記録する方法を学びました。しかし、開発にミスはつきものです。「しまった、コミットするファイルを間違えた!」「やっぱり前のバージョンに戻したい…」ということは日常茶飯事です。

Gitが強力なのは、こうした操作ミスを安全かつ簡単取り消せる機能が備わっているからです。この記事では、変更を「元に戻す」ための3つの主要コマンド、`git checkout`, `git reset`, `git revert`の違いと、それぞれの具体的な使い方を、状況別にやさしく解説します。これをマスターすれば、もう操作ミスを恐れる必要はありません!


3つの「元に戻す」コマンド:どれをいつ使う?

Gitには変更を元に戻すコマンドがいくつかあり、初心者が混乱しやすいポイントです。まずは、それぞれの役割と使い分けを簡単に整理しましょう。

イメージとしては、resetが「タイムマシンで過去に戻って、未来(コミット)を消してしまう」のに対し、revertは「過去の間違いを訂正する記事を新たに出す」ような違いがあります。


実践!状況別の「元に戻す」手順

では、具体的なシナリオに沿って、各コマンドの使い方を見ていきましょう。

ケース1: 作業中の変更を、コミットせずに破棄したい (`checkout`)

ファイルを編集してみたものの、「やっぱりこの変更は全部やめたい」というケースです。これは、ステージングする前の変更を元に戻す最も簡単な方法です。

まず、練習用にファイルを変更します。次に`git status`で変更を確認すると、ファイルが"modified"と表示されます。この変更を破棄するには、以下のコマンドを実行します。

git checkout -- [ファイル名]

例えば、`index.html`への変更を取り消したい場合は、以下のようになります。

git checkout -- index.html

このコマンドを実行すると、指定したファイルが最後のコミットの状態に完全に戻ります。注意:この操作で消した変更は元に戻せません!

ケース2: 直前のコミットを取り消したい(まだpushしていない)(`reset`)

「コミットしたけど、やっぱり間違いだった!」という、まだ誰にも共有していない(pushしていない)ローカルでのミスを取り消すケースです。`reset`にはいくつかオプションがありますが、よく使うものを紹介します。

まず、`git log --oneline`でコミットの履歴を確認し、取り消したいコミットが一番上にあることを確認します。

git log --oneline

オプション1: --soft(コミットだけを取り消し、変更は残す)
直前のコミットだけをキャンセルし、そのコミットで行った変更内容はステージングエリアに残しておきたい場合に使います。「コミットメッセージを間違えた」時などに便利です。

git reset --soft HEAD^

オプション2: --mixed(コミットとステージングを取り消す)
直前のコミットをキャンセルし、変更内容を作業ディレクトリに戻したい場合に使います。`reset`コマンドのデフォルトの動作です。「ファイルを追加し忘れた」時などに、一度リセットしてから再度`add`と`commit`を行います。

git reset --mixed HEAD^

オプション3: --hard(コミットも変更内容も完全に削除する)
直前のコミットと、その変更内容を跡形もなく完全に消し去りたい場合に使います。ファイルへの変更自体が元に戻せなくなる危険なコマンドなので、使う際は細心の注意が必要です。

git reset --hard HEAD^

HEAD^は「一つ前のコミット」を指します。2つ前に戻りたい場合は`HEAD^^`や`HEAD~2`と指定します。

ケース3: すでにpushしてしまったコミットを取り消したい (`revert`)

チームで開発している場合、一度pushしたコミットを`reset`で消してしまうと、他の人の履歴と矛盾が生じ、大きな混乱を招きます。そこで、公開済みのコミットを取り消す場合は、必ず`revert`を使います。

`revert`は、指定したコミットの変更内容を、すべて打ち消すような「新しいコミット」を自動で作成してくれます。歴史を消すのではなく、間違いを訂正する新たな歴史を追加する、安全な方法です。

まず、`git log`で取り消したいコミットのID(ハッシュ)を調べます。

git log

取り消したいコミットのハッシュ(例: `1a2b3c4d`)をコピーし、以下のコマンドを実行します。

git revert 1a2b3c4d

実行すると、コミットメッセージの編集画面が開きます。デフォルトのままでよければ、そのまま保存して閉じます。これで「打ち消しコミット」が作成されたので、最後にそのコミットを`push`すれば、リモートリポジトリにも修正が反映されます。


【コピペで動く】実践用HTMLサンプル

Gitの操作を試すために、実際に変更を加えられるファイルがあると便利です。以下のHTMLコードを`practice.html`などの名前で保存し、このファイルに対して`add`, `commit`, `checkout`, `reset`などを試してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Git練習ページ</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        .box { width: 200px; height: 200px; margin: 20px auto; border: 2px solid #333; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; }
        .box.red { background-color: #ffcccc; }
        .box.blue { background-color: #cceeff; }
        button { padding: 10px 20px; font-size: 1rem; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Git操作の練習</h1>
    <div id="colorBox" class="box">ここにテキスト</div>
    <button id="changeColorBtn">色を変更</button>
    <script>
        const colorBox = document.getElementById('colorBox');
        const changeColorBtn = document.getElementById('changeColorBtn');
        changeColorBtn.addEventListener('click', () => {
            if (colorBox.classList.contains('red')) {
                colorBox.classList.remove('red');
                colorBox.classList.add('blue');
                colorBox.textContent = '青色に変更!';
            } else {
                colorBox.classList.remove('blue');
                colorBox.classList.add('red');
                colorBox.textContent = '赤色に変更!';
            }
        });
    </script>
</body>
</html>

まとめ:状況に応じて最適なコマンドを選ぼう

変更を元に戻す3つのコマンドの使い分けを、最後にシンプルにまとめます。

この3つを使いこなせれば、Gitでの操作ミスはもう怖くありません。安心して、どんどんコードを書いて、コミットしていきましょう!