Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@terry_6518

gitで差分を1行単位でcommitする方法

はじめに

 チーム開発では、実際に本番環境に反映させたいコードのみを反映させることが重要になります。
 commitメッセージに反する変更を加えずに開発を進めていく必要があります。
 これができないとコードレビューの際に、「これ消しておいて!!」の様なあまり生産的じゃない私的に時間を使ってしまいます。(僕はよくこれで怒られました!笑)
 この記事では自分が意図していない変更を含まない為に、commitを行単位で行う方法を普段自分が使っている手法を中心にまとめました。
 参考になれば幸いです。(作業環境はvscodeを想定しています)

1行単位でのcommitがなぜ必要なのか?

commitは作業ログではなく、実現した事ベースで行う事が望ましいと考えています。
参考コミットは作業ログではない!

その理由について簡単にまとめると。
##バグを生む可能性があるから
 機能を作る際に、それ以外の部分に影響を及ぼすコードは含まない事が望ましいです。
 lintの設定、フォーマッターによる既存部分の不要なフォーマッティング、他の部分でちょっとした動作確認をした際に書いたコードetc..。
 これらを本番環境に反映させると意図していない挙動になる場合があります。

##レビュアーがレビューしやすいから
 例えばAの機能を作る際にB、Cの機能のコードが入っていると、レビュアーの可読性が下がってしまいます。
 commit自体を機能ごとに分ける事が前提ですが、

1行単位でcommitする方法

git add -p

git add -pを使うと全ての差分をステージングするかどうかの取捨選択ができます。
例えばこのような変更があったとします。
Image from Gyazo

これにgit add -pを行うと

diff --git a/src/compornents/Banner.scss b/src/compornents/Banner.scss
index 1d275cb..cd7b375 100644
--- a/src/compornents/Banner.scss
+++ b/src/compornents/Banner.scss
@@ -11,7 +11,7 @@

   &-title {
     font-size: 3rem;
-    font-weight: 800;
+    font-weight: 900;
     padding-bottom: 0.3rem;
   }

Stage this hunk [y,n,q,a,d,j,J,g,/,e,?]? 

と変更差分ごとにY/Nでステージングするかどうかを選択できます。
多くの差分がある際に有効です。

vscodeから行う

vscode上で差分をステージングすることも可能です。
Image from Gyazo
目視で意図した通りに1行単位でステージングできます。

まとめ

commitやPRの粒度はプロジェクトのお作法によって食うrと思いますが、不要な変更を含めずにcommitできる様になるとチーム開発での不安は減ってくるかと思います。


フリーランスでフロントエンドエンジニアをしています。
お仕事のご相談こちらまで
gunners6518@gmail.com

技術ブログ

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
terry_6518
フリーランス2年目のフロントエンドエンジニアです。 現在はReact+TypeScriptの開発をメインで扱っています。 Vue.js、Angular、Reactのいずれも実務でメインで扱っていた時期があります。
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?