今回はリモートにプッシュしたコードの差分を同じコミット内で修正する方法を紹介します。
【対象者】
- 初学者
- コミット&プッシュのやり方は覚えたけど、誤ってプッシュした内容を後から変更したい人
この方法は以下を条件としています。
- 修正したい内容が作業ブランチと同一ブランチであること
上記の条件を満たしている場合リモートにプッシュした差分を、修正することができます。
【環境準備】
VScodeまたCursorに拡張機能の「Git Graph」を入れる ←おすすめ✨
「下準備」が不要な方は「リモートにプッシュした内容（差分）を修正してみる」までスキップしてください。
やりたいこと
リファクタリングや修正などで、改めてコミットを作り修正するのではなく、作業したブランチでリモートにプッシュしたコミット内容を変更したい！
それでは早速やっていきましょう！🔥
下準備
①適当なプロジェクトを作る
今回はNext.jsでプロジェクトを作りますが、ここは今回の内容と関係ないため何でもよいです。
以下のコマンドを実行しNext.jsの雛形を作成します。
npx create-next-app@latest
プロンプトを選択しますが、ここはご自身で決めてください。
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
雛形の作成が完了したらプロジェクトをVSCodeまたはCursorで開きます。
次にGitHubでリポジトリを作り、リポジトリに表示されたコマンドを実行し、先程作った雛形をリモートにプッシュします。
git remote add origin https://github.com/ご自身のGitHubのアカウント名/ご自身のリポジトリ名.git
git branch -M main
git push -u origin main
GitHubにプッシュされたことを確認します。
適当にブランチを切る
mainブランチでする方はこの手順をスキップしてください。
今回はGUI操作でブランチを切ってみます。
VSCodeまたはCursor画面の左下にある「main」をクリックし「Create new branch...」をクリック後ブランチ名を決めEnterキーを押します。
今回は「develop」ブランチというブランチで進めていきます。
適当にいくつか差分を作りコミット&プッシュをしてみる
次にいくつか差分を作りコミットをしてみます。
まずはapp>page.tsxのmainタグの中身をすべて削除した差分を作ってコミットします。
（ここで不要なインポートも一緒に削除しておきます）
コミットメッセージは以下のようにしました。
不要な記述を削除
次にmainタグの中身にpタグを追加し、Helloという文字を追加してコミットしてみます。
コミットメッセージは以下のようにしました。
Helloを追加
同じようにpタグにHTMLという文字を追加し、コミットメッセージをHTMLを追加でコミット、
pタグにCSSという文字を追加し、コミットメッセージをCSSを追加でコミット
pタグにJavaという文字を追加し、コミットメッセージをJavaScriptを追加でコミット
pタグにReactという文字を追加し、コミットメッセージをReactを追加でコミット
ここで一旦プッシュをしてみましょう。
VScodeもしくはCursorであればGUI操作でプッシュができます。
GitHubでコミットした差分が反映されているか確認しましょう。
今回はdevelopブランチで実装したため、GitHub上でもdevelopブランチで確認します。
GitHub上でも実装した内容が反映されていることが確認できます。
リモートにプッシュした内容（差分）を修正してみる
ここからリモートにプッシュした内容（差分）を同じブランチ&同じコミットで修正をしていきます。
変更する箇所は以下になります。
export default function Home() {
return (
<main className='flex min-h-screen flex-col items-center justify-between p-24'>
<p>Hello</p>
<p>HTML</p>
<p>CSS</p>
- <p>Java</p>
+ <p>JavaScript</p>
<p>React</p>
</main>
);
}
コミットIDを確認する
VSCodeまたはCursor画面左下のGit Graphをクリックし、修正したいコミットIDを確認
今回の場合であればbeeadb9aが修正したいコミットIDになります。
git log --onelineコマンドで履歴を確認する
エディター上からターミナルを開き、プロジェクトのディレクトリで以下のコマンドを実行します。
git log --oneline
コマンドを実行すると以下のように表示されるはずです。
今回の場合であればコミットIDがbeeadb9aの箇所を確認します。
すると上から2番目にあることが確認できます。
0bc4f7d → 1番目
beeadb9 → 2番目（このコミット内容を変更したい）
b251adc → 3番目
27bdd3c → 4番目
cf2da08 → 5番目
accefd1 → 6番目
2dc35ae → 7番目
リベースを行う
以下のコマンドを実行しリベースを行います。
git rebase -i HEAD~{指定する番号}
今回の場合であれば2番目のコミット内容を変更したいので以下のコマンドを実行します。
git rebase -i HEAD~2
コマンドを実行するとvimに切り替わります。
この状態でキーボードの「i」キーを押し、該当のコミットIDbeeadb9a横にあるpickをeに変更します。
- pick beeadb9 JavaScriptを追加
+ e beeadb9 JavaScriptを追加
pick 0bc4f7d Reactを追加
# Rebase b251adc..0bc4f7d onto b251adc (2 commands)
以下略
その後、キーボードの「esc」キーを押し「:wq」と入力し保存します。
この状態で、エディター上では特に変化がありませんが、よく見ると画面左下に「コミットID（リバースしています）」と書かれており、現在リベースモードであることが確認できます。
また、ソースコードではReactの記述をした行が消えていることが確認できるはずです。
この状態は、リベースモードで7行目に「Java」と追加したコミットまで戻ってきているため、これより後にコミットしたReactの行はありません。
では、7行目の「Java」を「JavaScript」に変更し保存をしてみましょう。
export default function Home() {
return (
<main className='flex min-h-screen flex-col items-center justify-between p-24'>
<p>Hello</p>
<p>HTML</p>
<p>CSS</p>
- <p>Java</p>
+ <p>JavaScript</p>
</main>
);
}
変更し保存まで完了できたら次に修正した差分をステージングに上げます。
VSCodeまたはCursorであれば以下のようにGUI操作でステージングに上げることができます。
（※CLI操作でステージングにあげても構いません）
差分をステージングに上げることができたら、次に以下のコマンドをプロジェクトのディレクトリで実行します。
git rebase --continue
コマンドを実行すると以下のような画面に切り替わるはずです。
ここでコミットメッセージも変更することができますが、今回はそのまま「JavaScriptを追加」のコミットメッセージにしたいため、「:wq」を入力してEnterKeyを押します。
すると以下のようにコンフリクトが発生しました。
修正内容によってはコンフリクトは発生しませんが、今回はコンフリクトが発生しました。
理由は簡単で先ほど「:wq」を入力しEnterを押した時点で「JavaScriptを追加」のコミットは正常に完了できましたが、「Reactを追加」のコミットを行った際に「Reactを追加」の差分では
<p>Java</p>
<p>React</p>
となっており、Javaが正しいのかJavaScriptの修正が正しいのか不明になったためです。
コンフリクトが発生しなかった場合は以下の「コンフリクトの解消」はスキップしてください。
リベース作業を取り消す場合は以下のコマンドを実行してください。
git rebase --abort
コンフリクトの解消
今回の場合であれば、
export default function Home() {
return (
<main className='flex min-h-screen flex-col items-center justify-between p-24'>
<p>Hello</p>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>React</p>
</main>
);
}
としたいため、以下のように修正します。
（※やり方は一例です）
今回は修正差分が少なかったため、エディター上に表示されている「両方の変更を取り込む」をクリックします。
すると以下のようになりました。
ここでは8行目のJavaの記述は不要なため、その1行を削除し、保存をします。
export default function Home() {
return (
<main className='flex min-h-screen flex-col items-center justify-between p-24'>
<p>Hello</p>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
- <p>Java</p>
<p>React</p>
</main>
);
}
保存ができたら、ステージングに上げます。
（※ファイルのpage.tsxは赤い状態で「！」がついていますが、そのままステージングに上げて大丈夫です。）
ステージングに上げると、Reactだけ追加されていることが確認できます。
この状態で再度プロジェクトのディレクトリで以下のコマンドを実行します。
git rebase --continue
するとまた以下のようにvimが立ち上がるので「:wq」を入力しEnterを押します。
これでコンフリクトも解消しました！✨
修正した内容（差分）をプッシュする
最後に以下のコマンドをプロジェクトのディレクトリで実行しリモートにプッシュします。
git push --force-with-lease origin {元々プッシュしていたブランチ名}
今回の場合だとdevelopブランチにプッシュしていたので以下のようになります。
git push --force-with-lease origin develop
コマンドを実行できたら修正した内容がリモートに反映されているはずです。
エディター左下の「Git Graph」から修正内容が反映されているか確認してみます。
（※GitHub上でも確認してみましょう！）
元々Javaでコミットしていた箇所が同じブランチ、同じコミットでJavaScriptに変更ができています！！✨
お疲れ様でした！🍺
まとめ
今回はリモートに上げた内容を後から同じブランチ、同じコミット内で修正し、余分なコミットを増やすことなく修正する方法を紹介しました。
覚えて慣れるまでは、少し大変かもしれませんが、慣れるととても便利なので、実務や個人開発でも使ってみてください！
プロジェクトによっては無駄なコミットを増やしたくない。または、1文字修正するだけなのに、リファクタリングのコミットを増やしたくない。という時などで活用してみるといいかもしれません。