横浜銀行（内製担当有志）Tech BlogPublicationへの投稿
✨

Conventional Commitsをお手軽設定

がんちゃん
に公開
Git
VS Code
Tech
husky
commitlint
tech

はじめに

横浜銀行アジャイル開発チームでエンジニアをしている、がんちゃんです！

突然ですが、マージリクエストやプルリクを見ていてこう感じることはありませんか？

🤔「このコミットで何を変更しているんだろう」

コミットメッセージは人によってさまざま。フォーマットを作って何をしているかパッと判断できるようにしたい！と思い調べたところ、Conventional Commitsという考え方があることを知りました。
Conventional Commitsでは、コミットメッセージの書き方をルール化することで、ソースコードの管理をスマートにする仕組みです。
例えば「ユーザーがプロフィールを修正できるようにした」というメッセージの中では具体的にどんな作業をしているでしょうか？機能追加？バグ修正？
Conventional Commitsに沿って書くと変更内容が一目でわかります！

feat: ユーザーがプロフィールを編集できるようにした    #新機能の追加
fix: ユーザーがプロフィールを編集できるようにした     #バグ修正
revert: ユーザーがプロフィールを編集できるようにした  #過去のコミットの取り消し

同じ文言でもどんな作業をしているか想像がつきますね😄
コミットメッセージは次のような形にする必要があります。

<type>[optional scope]: <description>

公式サイトではより詳しい仕様が紹介されています。

本記事では、Conventional Commitsに沿ったコミットができるようにする環境構築の手順を紹介します！

使用するライブラリ、ツール

ライブラリ

  • Commitlint
  • husky
  • Commitizen
  • cz-customizable

VSCode拡張機能

  • commitlint
  • Visual Studio Code Commitizen Support

Commitlint

コミットメッセージがConventional Commits形式に準拠しているかどうかを確認するためのリンターです。

インストール

$ npm install --save-dev @commitlint/{cli,config-conventional}

設定

インストール後に設定ファイルを作成します。

$ touch commitlint.config.js
commitlint.config.js
module.exports = {
    extends: ['@commitlint/config-conventional']
};

husky

huskyをインストールして、git commit時にcommitlintが動くよう設定します。

インストール

$ npm install --save-dev husky

設定

次にhuskyを有効化します。
有効化をおこなうと.huskyフォルダが作成されます。

$ npx husky install

コミットメッセージ編集の際にGitフックが走るように設定します。

package.json
"scripts": {
    "commitmsg": "commitlint --edit $1"
}

ここまでの設定でgit commitした際にcommitlintが動きます。

VSCode拡張機能commitlint

VSCodeで以下の拡張機能をインストールします。

コミットメッセージを書く際にConventional Commitsのフォーマットに沿っていないと赤い波線がでてきます。
VSCodeのcommitlint
対象箇所の修正を提案してくれます

commitizen

commitizenをインストールして、対話的にコミットメッセージを入力できるよう設定します。

インストール

$ npm install --save-dev commitizen

設定

commitizen を利用するには既存のリポジトリをcommitizenで利用できるように初期化します。

$ npx commitizen init cz-conventional-changelog --npm --save-dev --save-exact

初期化を実施後に以下の内容が追加されていることを確認します。

package.json
"devDependencies": {
  ...
+   "commitizen": "^4.3.1",
+   "cz-conventional-changelog": "^3.3.0",
},
...
+ "config": {
+   "commitizen": {
+     "path": "./node_modules/cz-conventional-changelog"
+   }
+ }

さらに下記を追加します。
npm run commitした際にcommitizenのプロンプトが英語で表示されます。

package.json
"scripts": {
    "commitmsg": "commitlint --edit $1",
+   "commit": "cz"
},

git commit時にcommitizenのプロンプトが表示されるようにしたいので.husky配下にprepare-commit-msgを追加します。

$ echo "exec < /dev/tty && node_modules/.bin/cz --hook || true" > .husky/prepare-commit-msg
$ chmod +x .husky/prepare-commit-msg

コミットメッセージ入力画面を表示させず、commitizenのプロンプトを直接表示させたい場合は、エディタの設定を適宜変更してください。

$ git config --global core.editor ":"
元に戻したい場合。
$ git config --global core.editor nano # もしくはvi

ここまででgit commitをすればcommitizenのプロンプトが英語で表示されます。

cz-customizable

cz-customizableをインストールして、commitizenのプロンプトをカスタマイズできるように設定します。
このライブラリでプロンプトを日本語化します。

インストール

$ npm install cz-customizable --save-dev

設定

設定ファイルを作成して、下記の設定をします。

$ touch .cz-config.js
.cz-config.js
module.exports = {
  types: [
    { value: 'feat', name: 'feat: 新機能の追加' },
    { value: 'fix', name: 'fix: バグの修正' },
    { value: 'docs', name: 'docs: ドキュメントのみの変更' },
    { value: 'style', name: 'style: コードの意味に影響を与えない変更 (空白、フォーマットなど)' },
    { value: 'refactor', name: 'refactor: バグ修正でも新機能追加でもないコード変更' },
    { value: 'perf', name: 'perf: パフォーマンス向上を目的とした変更' },
    { value: 'test', name: 'test: テストの追加や変更' },
    { value: 'build', name: 'build: ビルドシステムまたは外部依存に関する変更' },
    { value: 'ci', name: 'ci: 継続的インテグレーションに関する変更' },
    { value: 'chore', name: 'chore: ソースコードやテストに影響を与えない変更' },
    { value: 'revert', name: 'revert: コミットの取り消し' },
  ],
  messages: {
    type: 'コミットする変更タイプを選択してください:',
    scope: '変更の範囲を記述してください（オプション）:',
    subject: '変更内容を要約した短い説明を記述してください:',
    body: '変更内容を詳しく記述してください（オプション）:',
    breaking: '破壊的変更内容を記述してください（オプション）:',
    footer: '関連するISSUEを記述してください（オプション）:',
    confirmCommit: 'この内容でコミットしてもよろしいですか？'
  }
};

.cz-config.jsの設定を反映します。

package.json
 "config": {
   "commitizen": {
-     "path": "./node_modules/cz-conventional-changelog"
+     "path": "./node_modules/cz-customizable"
   }
+  "cz-customizable": {
+     "config": "./cz-config.js"
+  }
 }

ここまででgit commitをすればcommitizenのプロンプトが日本語で表示されます。

VSCode拡張機能Visual Studio Code Commitizen Support

VSCodeで以下の拡張機能をインストールします。

コミットする際に.cz-config.jsで設定したプロンプトを元にコミットメッセージを作成できます。
commitizen-supportを起動
プロンプトを選択
.cz-config.jsで設定したプロンプトを選択する

このままプロンプトを選択してコミットするとhuskyで設定したprepare-commit-msgの内容が実行されてエラーが表示されます。
以下の修正を追加します。

.husky/prepare-commit-msg
- exec < /dev/tty && node_modules/.bin/cz --hook || true
+ # /dev/tty が存在するかを確認
+ if [ -t 1 ]; then
+   # /dev/tty が利用可能な場合のみコマンドを実行
+   exec < /dev/tty && node_modules/.bin/cz --hook || true
+ else
+   # /dev/tty が利用できない場合はメッセージを出力してスキップ
+   echo "Skipping commitizen hook as /dev/tty is not available"
+ fi

ちなみに

cz-customizableライブラリの代わりに@commitlint/cz-commitlintライブラリを使用して、commitizenのプロンプトを日本語化できます。
メリットとしては、.cz-config.jsを作成する必要がなく、commitlint.config.jsの中に日本語用のプロンプトを追加できます（設定ファイルの数を減らせる）。

まとめ

Conventional Commitsに沿ったコミットができるようにする環境構築の手順をまとめてみました。
フォーマットに沿ったコミットをチーム内で実施することで、コミットを見る時間を効率化できそうです。
また、プロジェクトリポジトリの変更履歴を自動生成する際にも、コミットメッセージが統一されていると変更がわかりやすいですね🥳🎉

横浜銀行（内製担当有志）Tech Blog
横浜銀行（内製担当有志）Tech BlogPublication

株式会社横浜銀行内製開発チームの有志メンバーで運営しているテックブログです。日々の開発で得られた知見や、技術的な工夫、チームでの取り組みなどを発信していきます。 ※投稿内容は行員個人の見解であり、組織を代表するものではございません。

Discussion