こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら

はじめに

　チーム開発では、実際に本番環境に反映させたいコードのみを反映させることが重要になります。

commitメッセージに反する変更を加えずに開発を進めていく必要があります。

　これができないとコードレビューの際に、「これ消しておいて！！」の様なあまり生産的じゃない私的に時間を使ってしまいます。（僕はよくこれで怒られました！笑）

　この記事では自分が意図していない変更を含まない為に、commitを行単位で行う方法を普段自分が使っている手法を中心にまとめました。

　参考になれば幸いです。(作業環境はvscodeを想定しています)

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

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

参考コミットは作業ログではない！

その理由について簡単にまとめると。

バグを生む可能性があるから

機能を作る際に、それ以外の部分に影響を及ぼすコードは含まない事が望ましいです。

lintの設定、フォーマッターによる既存部分の不要なフォーマッティング、他の部分でちょっとした動作確認をした際に書いたコードetc..。
　これらを本番環境に反映させると意図していない挙動になる場合があります。

レビュアーがレビューしやすいから

　例えばAの機能を作る際にB、Cの機能のコードが入っていると、レビュアーの可読性が下がってしまいます。

1行単位でcommitする方法

git add -p

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

これに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上で差分をステージングすることも可能です。

目視で意図した通りに1行単位でステージングできます。

まとめ

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

もし現状の仕事に不満があるなら

転職ドラフトに登録して見てはいかがでしょうか？

実際に企業からのオファーを受ける事で、企業から見た自分の強みや市場価値などポジティブな発見がたくさんあります！！