【Git&Github】変更内容の一部をコミットする方法を解説

Github Visual Studio Code

【Git&Github】変更内容の一部をコミットする方法を解説

※本記事は広告が含まれる場合があります。

なやむくん
ファイルの変更内容のすべてをpushしたくない…。
なやむさん
一部の変更内容だけをコミットしたい…。

上記の悩みを改善します。

VSCodeで操作する方法

VSCode上で、変更内容の一部をコミットするには以下の手順で操作します。

操作手順

  1. VSCodeの左メニューから「ソース管理」を選択
  2. コミットしたい変更ファイルを選択
  3. コミットしたい変更内容を選択
  4. Ctrl+kを押下
  5. Ctrl+Alt+sを押下
  6. コミットメッセージを入力し、「コミット」を押下

VSCodeの左メニューから「ソース管理」を選択

まずは、VSCodeの左メニューからソース管理アイコンを押下します。

VSCodeの左メニューから「ソース管理」を選択

コミットしたい変更ファイルを選択

ソース管理画面が表示されます。次にコミットしたい変更ファイルを押下します。

コミットしたい変更ファイルを選択

コミットしたい変更内容を選択

すると変更内容が、右側のエディタに表示されます。表示されたらコミットしたい変更内容を選択状態にします。

コミットしたい変更内容を選択

Ctrl+kを押下

選択したらCtrl+kを押下します。すると下の青帯の部分に枠内のメッセージが表示されます。

Ctrl+kを押下

Ctrl+Alt+sを押下

2番目のキーとしてCtrl+Alt+sを押下します。すると選択状態の変更内容が左側のエディタに表示され、その内容のファイルがステージに上げられている状態になります。

Ctrl+Alt+sを押下

コミットメッセージを入力し、「コミット」を押下

コミットメッセージを入力して、コミットを押下したら選択状態の変更内容がコミットできます。

コミットメッセージを入力し、「コミット」を押下

コマンドで操作する方法

次はコマンドで一部の変更をコミットする方法です。

なやむくん
コマンドは難しいイメージがあるので、できれば使いたくないです…。
みつた
実際やってみると案外難しくないので、一度チャレンジしてみましょう！

以下は、元々test.jsにconsole.log("hogehogehoge");の記述をしてステージに上げていましたが、そのあとにconsole.log("hugahugahuga");とconsole.log("piyopiyopiyo");の2行を追記しましたが、そのうちのconsole.log("piyopiyopiyo");だけをステージに上げる方法です。

変更前の状態のコード

git add -p

git add -pを使用することでステージに上げるための編集モードが表示されます。

git add -p

// 以下のような記述がターミナルに表示される
diff --git a/test.js b/test.js
index ad169e1..a9c2125 100644
--- a/test.js
+++ b/test.js
@@ -1 +1,3 @@
 console.log("hogehogehoge");
+console.log("hugahugahuga");
+console.log("piyopiyopiyo");
(1/1) Stage this hunk [y,n,q,a,d,e,?]?

ここではe（edit）を選択して、ステージに上げるコードを手動で編集します。すると以下のようなnanoエディターが展開されます。

  GNU nano 6.2                       /test/.git/addp-hunk-edit.diff                                
# Manual hunk edit mode -- see bottom for a quick guide.
@@ -1 +1,3 @@
 console.log("hogehogehoge");
+console.log("hugahugahuga");
+console.log("piyopiyopiyo");
# ---
# To remove '-' lines, make them ' ' lines (context).
# To remove '+' lines, delete them.
# Lines starting with # will be removed.
# 
# If the patch applies cleanly, the edited hunk will immediately be
# marked for staging.
# If it does not apply cleanly, you will be given an opportunity to
# edit again.  If all lines of the hunk are removed, then the edit is
# aborted and the hunk is left unchanged.




^G Help         ^O Write Out    ^W Where Is     ^K Cut          ^T Execute      ^C Location     M-U Undo        M-A Set Mark
^X Exit         ^R Read File    ^\ Replace      ^U Paste        ^J Justify      ^/ Go To Line   M-E Redo        M-6 Copy

ここで、ステージに上げた後のファイルの中身を編集することができるので、今回はconsole.log("piyopiyopiyo");を追加したいので、console.log("hugahugahuga");を削除します。

削除する動きは以下のgif画像を参考にしてください。

手順紹介

コードを編集し終えたらCtrl + Xを押下します。すると変更を保存するかどうか確認画面が表示されるのでそこでYを押下し、Enterを押下して保存します。

するとnanoエディターが閉じられ先程編集したコードと同じ内容が変更後のコードに反映されています。

console.log("piyopiyopiyo");がステージに上がった画像

これでコマンドを用いて変更の一部をコミットすることができます。

まとめ

ここまで読んでいただきありがとうございました。

今回はGitで変更の一部をコミットする方法をご紹介しました。GUIでの操作はもちろんですが、コマンド操作も思っていたほど難しさを感じることなく簡単に一部の変更をコミットすることができたのではないでしょうか。

場面によっては利用することがあるであろう操作ではあるので、ぜひ変更の一部だけをコミットしたい場面に遭遇した場合は参考にしてください！

-Github, Visual Studio Code