はじめに

こんにちは！フロントエンド開発を担当しているY.O. です。

チーム開発では、Git のコミットメッセージのフォーマットを統一することが重要です。統一されたフォーマットがあれば、そのコミットで何を実施したのか、変更の意図を素早く把握することができます。

ただそれを守るのも地味に大変なので、フォーマットを間違えてコミットしようとしたらエラーを出してコミットできなくなるといいなーと色々探したところ、commitlintとLefthookの組み合わせが良い感じだったのでご紹介します。

commitlint とは？

commitlint は、コミットメッセージが特定のルールに従っているかをチェックするツールです。例えば、Conventional Commits 等のルールに基づいてフォーマットを統一することができます。カスタムのルールを作成することもできるみたいですが、今回は特に設定せず、Conventional Commits のルールを使用します。

commitlintはConventional Commitsを用いて以下のようなコミットメッセージのフォーマットを強制します。 Angularの規約を元にしているようなので、詳細はそちらを参照してください。（個人的にはフッターまで書くケースはあまりないです。）

<タイプ>(<スコープ>): <概要>

<説明（オプション）>

<フッター（オプション）>

fix: リクエストの競合を防止

リクエストIDと最新のリクエストへの参照を導入し、最新のリクエスト以外からのレスポンスを無視するようにしました。
また、競合問題を軽減するために使用していたタイムアウトを削除しました。これらは、現在では不要になったためです。

レビュー済み: Z
関連: #123

① <タイプ>（必須）

変更の種類を示します。主なタイプは以下の通りです。

feat（機能追加）
fix（バグ修正）
docs（ドキュメントの変更）
style（コードのフォーマットのみの変更）
refactor（動作変更なしのリファクタリング）
test（テスト関連の変更）
chore（ビルドやツール関連の変更）

② <スコープ>（オプション）

変更の影響範囲を示します。（例：compiler、router など）

③ <概要>（必須）

簡潔な説明を記述します。（50文字以内が推奨）

commitlint のメリット

コミットメッセージのフォーマットを統一できる
Git のログが整理され、変更履歴が追いやすくなる
自動化することで、レビュー時の指摘を減らせる

Lefthook とは？

Lefthook は、Git のフックを管理するツールです。今回はcommit-msg フックを使用して commitlint を実行します。

Lefthook のメリット

シンプルな設定で Git フックを管理できる
husky よりも軽量で、高速に動作する
YAML形式で直感的に設定できる

commitlint + Lefthook の導入手順

導入についてはこちらを参考にさせていただきました。

必要なパッケージをインストール

今回はnpmで実施します。

npm install --save-dev @commitlint/config-conventional @commitlint/cli
npm install --save-dev lefthook

commitlint の設定を追加

プロジェクトのルートに commitlint.config.js を作成し、以下の内容を追加します。

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

シェルスクリプトを追加

プロジェクトのルートに .lefthook/commit-msg/commitlint.sh を作成し、以下の内容を追加します。

echo $(head -n1 $1) | npx commitlint --color

Lefthook の設定を追加

プロジェクトのルートに lefthook.yml を作成（インストールした際に自動生成されていると思います）し、以下の内容で上書きします。

commit-msg:
  scripts:
    "commitlint.sh":
      runner: bash

動作確認

git commit -m "invalid message" のように不正なフォーマットのメッセージを入力すると、エラーが表示されることを確認します。

VSCode等のエディタからGitのコミットを行う場合でも、フォーマットが間違っていれば次のようなウィンドウが出てコミットに失敗します。良きです。

まとめ

commitlint と Lefthook を組み合わせることで、お手軽にコミットメッセージのリントを実施できます。ぜひ導入してみてください！

おわりに

KENTEMでは、様々な拠点でエンジニアを大募集しています！建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。 recruit.kentem.jp career.kentem.jp

KENTEM TechBlog

建設業のDXを実現するKENTEMの技術ブログです。

commitlint + Lefthook でコミットメッセージを統一する