git-czを使ってコミットメッセージのフォーマットを統一する
2022.07.01
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
このように[種別]: [絵文字] [コミットメッセージ]といったフォーマットでコミットログを残せるようになります。
今日はこれをなぜするのか、どうやって導入するのかを説明していきます。
なぜコミットメッセージのフォーマットを統一するの？
コミットメッセージを種別とメッセージに分けたフォーマットにすることでいくつかのメリットがあると考えています。
- あとでコミットログを見たときに何を対応したコミットか判りやすくなる
- 適切な粒度のコミットとなるように意識する
あとでコミットログを見たときに何を対応したコミットか判りやすくなる
なんと言っても一番のメリットはこれだと思います。
普段開発をしていると、とあるコミットはどれだっけ・・・といった対象のコミットを探すことが稀にあると思います。
そのときにコミットの頭に絵文字が入っているためパッと見て、そのコミットがテストのコミットなのか、バグ修正のコミットなのか、はたまたドキュメント修正だけなのかといったことがパッと見て判別がつきます。
実際のイメージとしては、このようなコミットログとなります。
絵文字だけをみてドキュメントの修正と機能実装のコミットが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 2 3 | "scripts": { "commit": "npm run git-cz", }, |
これで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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | chore: { description: 'Build process or auxiliary tool changes', emoji: '🤖', value: 'chore' }, ci: { description: 'CI related changes', emoji: '🎡', value: 'ci' }, docs: { description: 'Documentation only changes', emoji: '✏️', value: 'docs' }, feat: { description: 'A new feature', emoji: '🎸', value: 'feat' }, fix: { description: 'A bug fix', emoji: '🐛', value: 'fix' }, perf: { description: 'A code change that improves performance', emoji: '⚡️', value: 'perf' }, refactor: { description: 'A code change that neither fixes a bug or adds a feature', emoji: '💡', value: 'refactor' }, release: { description: 'Create a release commit', emoji: '🏹', value: 'release' }, style: { description: 'Markup, white-space, formatting, missing semi-colons...', emoji: '💄', value: 'style' }, test: { description: 'Adding missing tests', emoji: '💍', value: 'test' }, |
基本的には書いてある通りですが簡単に説明しておくとこのような種別があります。
- chore: ビルド関係や便利ツールに関すること
- ci: CIに関すること
- docs: コード以外のドキュメントに関すること
- feat: 新機能開発に関すること
- fix: バグ修正に関すること
- perf: パフォーマンス改善に関すること
- refactor: リファクタリングに関すること
- release: リリースに関すること
- style: 見た目のデザイン修正や軽微なCSSの修正に関すること
- test: テストコードに関すること
例えばbug fixのコミットの絵文字を🐛じゃなくて、💚にしたいと言った要望があればこのようにemojiの部分を変更するだけで反映されます。
1 2 3 4 5 | fix: { description: 'A bug fix', emoji: '💚', value: 'fix' }, |
他にも例えばライブラリアップデート用のコミット種別を作りたければ、このように追加することで可能です。
1 2 3 4 5 | bump: { description: 'bump up library version', emoji: '🚀', value: 'bump' }, |
あまり使用することはないかもしれませんが、他にも細かいカスタマイズがあるのでぜひ公式ドキュメント参考にやってみてください。
いざ、実行！
いよいよ実行してみようと思います。
npm run commit
実行するとこのようにコミット種別を選択するように促されるので、今回はREADMEを更新した想定でdocsを選択します。
1 2 3 4 5 6 7 8 9 | ? Select the type of change that you're committing: (Use arrow keys or type to search) 💍 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... (Move up and down to reveal more choices) |
次にコミットメッセージを入力します。
1 2 3 | ? Write a short, imperative mood description of the change: [-------------------------------------------------------------] 42 chars left docs: update README |
あとは設定にもよりますがいくつか設問があります。
普段はあまり使わないのですが、このコミットによってcloseされるissue番号の情報だけサンプルとして入力してみます。(それ以外は何も入力せずEnterを押します)
1 2 3 4 | ? Provide a longer description of the change: ? List any breaking changes BREAKING CHANGE: ? Issues this commit closes, e.g #123: #100 |
ここまで入力したらgit logでコミットログを確認します。
するとこのように[種別][絵文字]: [message]のフォーマットでコミットログが残っていることが確認できました。
1 2 3 4 5 6 7 | commit dc02bac164fdcf94ddf8dcc09b54affa6e831111 Author: xxxx <xxxx@xxxx.com> Date: Fri Jun 24 10:39:48 2022 +0900 docs: ✏️ update README ✅ Closes: #100 |
このようにコマンドを打てばインタラクティブにフォーマットを統一できる仕組みができました。
一度設定しておけばプロジェクトに新人が入っても仕組みで共有できるので本当に楽です。
さいごに
いかがだったでしょうか？
以上がgit-czを用いた基本的なコミットログのフォーマット統一の方法でした。
設定自体は1時間もかからずに準備できるので、ぜひプロジェクトに導入してみてください。
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
