Commitizen でチームのコミットメッセージの形式を統一する

## 概要

チームで開発しているとコミットの粒度・形式がバラバラになってしまう事があると思います。今回はそんな時に使える Commitizen と そのプラグインである cz-customizable を紹介します。

Commitizen とは チーム向けにコミットメッセージのルールを定義する為のツールで、cz-customizable は Commitizen で独自のルールを定義するためのプラグインになります。

導入すると対話に答えるだけでコミットメッセージの形式を統一する事が出来るようになります。(絵文字かわいい)

![スクリーンショット 2022-03-13 21.14.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442365/1dac04bf-3f47-ed09-bcb2-ee491a2bde7e.png)
![スクリーンショット 2022-03-13 20.46.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442365/42d0bc3e-10f7-15de-f83d-80943e3efc07.png)

## commitizen cz-customizableのインストール

まずは必要になるパッケージをダウンロードしましょう。

```npm
npm i -g commmitizen
npm i -D cz-customizable
```

## cz-customizableのセットアップ

cz-customizable をプラグインとして利用するように設定を行います。
package.json に以下を追加してください。

```package.json
...　省略
"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  }
}
```

## configファイルの追加

cz-customizable は実行時にプロジェクト直下にある .cz-config.js を設定ファイルとして読み込むので、プロジェクト直下に .cz-config.js というファイルを作って以下を記述してください。

こちらは普段僕が利用している設定で、コミットメッセージのフォーマットは Angular 開発チームのものを参考にしています。
チームのフォーマットに合わせて好きに書き換えてください。(各プロパティの詳しい説明については公式をご確認ください)

```.cz-config.js
module.exports = {
  types: [
    {
      value: '🌟 feat',
      name: 'feat: 機能追加',
      title: 'Features',
    },
    {
      value: '🔧 fix',
      name: 'fix: バグの修正',
      title: 'Bug Fixes',
    },
    {
      value: '🗒 docs',
      name: 'docs: ドキュメントのみの変更',
      title: 'Documentation',
    },
    {
      value: '🎨 style',
      name: 'style: コードの動作に影響しない、見た目だけの変更（スペース、フォーマット、欠落の修正、セミコロンなど)',
      title: 'Styles',
    },
    {
      value: '♻️ refactor',
      name: 'refactor: バグの修正や機能の追加ではないコードの変更',
      title: 'Code Refactoring',
    },
    {
      value: '⏫　perf',
      name: 'perf: パフォーマンスを向上させるコードの変更',
      title: 'Performance',
    },
    {
      value: '🧪 test',
      name: 'test: 不足しているテストの追加や既存のテストの修正',
      title: 'Tests',
    },
    {
      value: '🐧 chore',
      name: 'chore: ビルドプロセスやドキュメント生成などの補助ツールやライブラリの変更',
      title: 'Chores',
    },
  ],
  messages: {
    type: 'コミットする変更タイプを選択してください:\n',
    subject: 'コミット内容について入力してください:\n',
    confirmCommit: 'こちらの内容でコミットを実行してよろしいですか？:\n',
    /* ticketNumber: 'チケット番号を入力してください (ない場合はEnter):\n',*/
  },
  skipQuestions: ['scope', 'body', 'breaking', 'footer'],
  allowBreakingChanges: ['feat', 'fix'],
  /* 
  コミットメッセージにチケット番号を追加したい場合コメントを削除
  allowTicketNumber: true,
  isTicketNumberRequired: false,
  ticketNumberPrefix: '',
  ticketNumberRegExp: '',
  */
}

```

これで commitizen のセットアップは完了です 🎉

## commitizen を使ってコミットしてみる

それでは実際に commitizen を使ってコミットしてみましょう！
プロジェクト内で適当なファイルを編集して、git add 五にのコマンドを実行してください。

```terminal
cz
```

以下のような選択肢が表示されるので、変更のタイプを選択してEnter。
![スクリーンショット 2022-03-13 21.14.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442365/1dac04bf-3f47-ed09-bcb2-ee491a2bde7e.png)

続いてコミットメッセージの入力を求められるので入力してEnter。
![スクリーンショット 2022-03-13 21.15.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442365/e503122c-7966-efa0-09b7-4a747479583f.png)

最後にコミットの内容が正しいか聞かれるので問題なければEnter。
![スクリーンショット 2022-03-13 21.16.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442365/37b0375e-9bc4-9baa-ebab-b041e05551ee.png)

すると上記の内容でコミットが実行されます！
![スクリーンショット 2022-03-13 21.17.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442365/d534a1af-f5cd-2f1e-474b-fd5d0735a353.png)

.cz-config.js には他にも様々なプロパティがあるので、色々試してチームにあった独自のコミットメッセージのフォーマットを作ってみてください！


## 参考にした記事・サイト

commitizen/cz-cli: The commitizen command line utility. #BlackLivesMatter
https://github.com/commitizen/cz-cli

leoforfree/cz-customizable: A customizable commitizen adapter for https://github.com/commitizen/cz-cli (or standalone util)
https://github.com/leoforfree/cz-customizable