gitのコミットメッセージのフォーマットを統一する

私たちのチームでは日々様々な開発環境の整備をしています。

その中の1つに「コミットメッセージのフォーマットを統一する」ということをやっています。

今日のゴール

今からご紹介するツールを導入すれば、コミットをするときに設定したコマンドを入力するとこのようにコミット種別が選べるようになります。

? Select the type of change that you're committing:
❯ 💍 test: Adding missing tests
🎸 feat: A new feature
🐛 fix: A bug fix
🤖 chore: Build process or auxiliary tool changes
✏️ docs: Documentation only changes
💡 refactor: A code change that neither fixes a bug or adds a feature
💄 style: Markup, white-space, formatting, missing semi-colons..

これらを使ってコミットをすると...

docs: ✏️ update README.md

このように[種別]: [絵文字] [コミットメッセージ]といったフォーマットでコミットログを残せるようになります。

今日はこれをなぜするのか、どうやって導入するのかを説明していきます。

なぜコミットメッセージのフォーマットを統一するの？

コミットメッセージを種別とメッセージに分けたフォーマットにすることでいくつかのメリットがあると考えています。

1. あとでコミットログを見たときに何を対応したコミットか判りやすくなる
2. 適切な粒度のコミットとなるように意識する

あとでコミットログを見たときに何を対応したコミットか判りやすくなる

なんと言っても一番のメリットはこれだと思います。

普段開発をしていると、とあるコミットはどれだっけ・・・といった対象のコミットを探すことが稀にあると思います。

そのときにコミットの頭に絵文字が入っているためパッと見て、そのコミットがテストのコミットなのか、バグ修正のコミットなのか、はたまたドキュメント修正だけなのかといったことがパッと見て判別がつきます。

実際のイメージとしては、このようなコミットログとなります。

絵文字だけをみてドキュメントの修正と機能実装のコミットが2つあるんだな・・・という情報が一目で判るようになります。

適切な粒度のコミットとなるように意識する

もう一つは副次的効果ではありますが、ツールを導入するとコミット種別を選ぶ必要があるので必然的にエンジニアが適切なコミットの粒度を意識するようになります。

それにより極端に大きすぎる・小さすぎるコミットや色々な対応がごちゃ混ぜなコミットが減り、良い粒度のコミットができるようになっていきます。

git-czを使ってコミットメッセージのフォーマットを統一する

ではいよいよ実際にツールを導入する手順を紹介していきます。

今回使用するのはgit-czというライブラリです。

https://github.com/streamich/git-cz

git-czのインストール

今回はnpmでインストールします。yarnを使う場合などは適宜読み替えてください。

npm install --save-dev git-cz

インストールしたらpackage.jsonにnpm scriptsコマンドを追加します。

1  "scripts": {
2    "commit": "npm run git-cz",
3  },

これでgit-czを使う場合はnpm commitと打てば実行されるようになります。

git-czのカスタマイズ

git-czはデフォルトのままでも使えるのですが、せっかくなので今回はカスタマイズをしていこうと思います。

プロジェクト直下にchangelog.config.jsというファイルを作ります。

touch changelog.config.js

そして以下のURLにあるサンプルをコピーしてそのまま貼り付けてください。これがデフォルトのコンフィグ情報となります。

https://github.com/streamich/git-cz#custom-config

コミット種別

デフォルトから変更を入れる可能性があるとしたら、おそらくこのコミット種別になるかと思います。

まずgit-czにはデフォルトでこのようなコミット種別があります。

1    chore: {
2      description: 'Build process or auxiliary tool changes',
3      emoji: '🤖',
4      value: 'chore'
5    },
6    ci: {
7      description: 'CI related changes',
8      emoji: '🎡',
9      value: 'ci'
10    },
11    docs: {
12      description: 'Documentation only changes',
13      emoji: '✏️',
14      value: 'docs'
15    },
16    feat: {
17      description: 'A new feature',
18      emoji: '🎸',
19      value: 'feat'
20    },
21    fix: {
22      description: 'A bug fix',
23      emoji: '🐛',
24      value: 'fix'
25    },
26    perf: {
27      description: 'A code change that improves performance',
28      emoji: '⚡️',
29      value: 'perf'
30    },
31    refactor: {
32      description: 'A code change that neither fixes a bug or adds a feature',
33      emoji: '💡',
34      value: 'refactor'
35    },
36    release: {
37      description: 'Create a release commit',
38      emoji: '🏹',
39      value: 'release'
40    },
41    style: {
42      description: 'Markup, white-space, formatting, missing semi-colons...',
43      emoji: '💄',
44      value: 'style'
45    },
46    test: {
47      description: 'Adding missing tests',
48      emoji: '💍',
49      value: 'test'
50    },

基本的には書いてある通りですが簡単に説明しておくとこのような種別があります。

• chore: ビルド関係や便利ツールに関すること
• ci: CIに関すること
• docs: コード以外のドキュメントに関すること
• feat: 新機能開発に関すること
• fix: バグ修正に関すること
• perf: パフォーマンス改善に関すること
• refactor: リファクタリングに関すること
• release: リリースに関すること
• style: 見た目のデザイン修正や軽微なCSSの修正に関すること
• test: テストコードに関すること

例えばbug fixのコミットの絵文字を🐛じゃなくて、💚にしたいと言った要望があればこのようにemojiの部分を変更するだけで反映されます。

1fix: { 
2    description: 'A bug fix', 
3    emoji: '💚', 
4    value: 'fix' 
5},

他にも例えばライブラリアップデート用のコミット種別を作りたければ、このように追加することで可能です。

1bump: { 
2    description: 'bump up library version', 
3    emoji: '🚀', 
4    value: 'bump' 
5},

あまり使用することはないかもしれませんが、他にも細かいカスタマイズがあるのでぜひ公式ドキュメント参考にやってみてください。

いざ、実行！

いよいよ実行してみようと思います。

npm run commit

実行するとこのようにコミット種別を選択するように促されるので、今回はREADMEを更新した想定でdocsを選択します。

1? Select the type of change that you're committing: (Use arrow keys or type to search)
2  💍  test:       Adding missing tests
3  🎸  feat:       A new feature
4  🐛  fix:        A bug fix
5  🤖  chore:      Build process or auxiliary tool changes
6❯ ✏️  docs:       Documentation only changes
7  💡  refactor:   A code change that neither fixes a bug or adds a feature
8  💄  style:      Markup, white-space, formatting, missing semi-colons...
9(Move up and down to reveal more choices)

次にコミットメッセージを入力します。

1? Write a short, imperative mood description of the change:
2  [-------------------------------------------------------------] 42 chars left
3   docs: update README

あとは設定にもよりますがいくつか設問があります。

普段はあまり使わないのですが、このコミットによってcloseされるissue番号の情報だけサンプルとして入力してみます。(それ以外は何も入力せずEnterを押します)

1? Provide a longer description of the change:
2? List any breaking changes
3  BREAKING CHANGE:
4? Issues this commit closes, e.g #123: #100

ここまで入力したらgit logでコミットログを確認します。

するとこのように[種別][絵文字]: [message]のフォーマットでコミットログが残っていることが確認できました。

1commit dc02bac164fdcf94ddf8dcc09b54affa6e831111
2Author: xxxx <xxxx@xxxx.com>
3Date:   Fri Jun 24 10:39:48 2022 +0900
4
5    docs: ✏️ update README
6
7    ✅ Closes: #100

このようにコマンドを打てばインタラクティブにフォーマットを統一できる仕組みができました。

一度設定しておけばプロジェクトに新人が入っても仕組みで共有できるので本当に楽です。

さいごに

いかがだったでしょうか？

以上がgit-czを用いた基本的なコミットログのフォーマット統一の方法でした。

設定自体は1時間もかからずに準備できるので、ぜひプロジェクトに導入してみてください。