【現役エンジニアが推奨】コミット前に確認することリスト!【Git】

Git

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

今回はコミット前に確認することについて学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • コミット前に確認すべきことがわかる
事前に事故を防ごう!

コミット前に確認すべきこと

ブレークポイントが残っていないか

残りがちなゴミ処理TOPとしてdebuggerの削除漏れがあります。

debuggerで検索をかけよう!

console.logが残っていないか

debugger同様コードレビューの際によく見ます。
処理に影響がないので削除漏れが発生しやすいです。

console.logで検索をかけよう!

未使用の変数・関数が残っていないか

新規に追加した関数や変数も念のため検索して
宣言箇所以外でヒットしなければ削除しよう!

未使用のインポート処理が残っていないか

AngularやNode.jsを使用しているとよく見かけます。

VSCodeでグレーアウトされているインポート文は使用されていないので、削除しよう!

不要なコメントが残っていないか

使い終わったコメントは削除しよう!

関数等の説明コメントが間違っていないか

JSDocなどで説明コメントを付けているものの
そのコメント内容が間違っている(更新が漏れている)ものもよく見かけます。

既存の関数を流用して新規関数を作成した際にありがちだよ!

過去の処理をコメントアウトして残していないか

const myFunc = () => {
  // console.log("過去の処理");
  console.log("新規処理");
}

このように過去の処理をコメントアウトして残している人を
たまに見かけますが、これはNGです。

これを繰り返すとコードがグチャグチャになってしまいます。

たとえば、どちらの処理を行うか検討中で
クライアントに動かしてもらってから正式リリースする
などのよっぽどの理由がない限りは削除しましょう。

過去の内容はGitで確認できるので安心して削除しよう!

関数宣言の記述順が適切か

  • 関数1
  • 関数2
  • 関数3

の順で処理を行う場合には、関数宣言も同じ順で記述しておくべきです。
処理には影響はありませんが可読性に大きく影響します。

関数の宣言順にもある程度法則があるよ!

ライフサイクル順に処理が記述されているか

  • constructor
  • ngOnInit
  • ~中略~
  • ngOnDestroy

例えばAngularの場合にはこのようなライフサイクルがあるので
宣言文も同じ順で行いましょう。

Angularの記述ルール:参考程度

参考程度ですが、以下のような順での記述ルールをよく見かけます。

  • @Input等のデコレータ
  • ローカル変数宣言
  • constructor
  • ~中略~
  • ngOnDestroy
  • 関数宣言
上記は一例なので基本的に現場のルールに合わせることが大切だよ!

購読の解除処理が入っているか※Angular

subscribe()で購読したObservableは
必ずngOnDestroyでunsucscribe()する必要があります。

【Angular】unsubscribeの重要性【RxJS】
購読解除を忘れるとメモリリークの原因になるよ!

データ型がanyのままになっていないか※主にTypeScript

実装時にはanyとしていることが多いかと思いますが、
正式版をリリースする前には極力正しいデータ型を指定するようにしてください。

anyのままにしてしまうと保守性が悪くなるよ!

diffの確認

git diff

で前回コミットとの差分が確認できます。
ここで無駄な処理が入っていないかなどを確認しましょう。

VSCodeだとデフォルトの機能で差分確認できるよ!

コミット後にミスに気づいたときの対応

コミットの取り消し

git reset --soft HEAD^

コミット後にミスに気づいたときには
このコマンドでコミットの取り下げができます。

pushしてしまった場合には使えないよ!
その場合には無理に取り下げようとせず、再度コミットしよう!

まとめ

  • ブレークポイントが残っていないか
  • console.logが残っていないか
  • 未使用の変数・関数が残っていないか
  • 未使用のインポート処理が残っていないか
  • 不要なコメントが残っていないか
  • 関数等の説明コメントが間違っていないか
  • 過去の処理をコメントアウトして残していないか
  • 関数宣言の記述順が適切か
  • ライフサイクル順に処理が記述されているか
  • 購読の解除処理が入っているか※Angular
  • データ型がanyのままになっていないか※主にTypeScript
  • diffの確認

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました