📬

【Git】コミットメッセージにPrefixをつけてわかりやすくしよう!

2025/01/22に公開

はじめに

こんにちはARMフロントエンド開発エンジニアのもろです!
今回は、開発をする上でコードに変更をしたときに利用する「コミットメッセージ」について、関連ツールとともに紹介します。

コミットメッセージとは、コードの変更内容を他の方に伝えるために使われるものです。

そのため、コミットメッセージは他の人が見てもわかりやすいように書くことが大切です。

「コミットメッセージ?そんなの適当でいいでしょ。」と思ったそこのあなた。

未来のあなた、そしてチームメイトがコミット履歴を見たとき、何を感じるでしょうか?
バグ修正」とだけ書かれたメッセージの山を見て、困惑する顔が目に浮かびます…。👻

ARMでは、最近コミットメッセージをよりわかりやすくするために、Prefixをつけるようになりました。その内容について本記事では紹介します!

Prefixとは:コミットメッセージに「肩書き」を!

Prefix(プリフィックス)は、コミットメッセージの「先頭に付けるラベル」のことです。
コミットメッセージの冒頭につけることで、そのコミットの内容をわかりやすくするためのものです。

例えば、会社やイベントの名札を思い浮かべてください。
「営業部の田中さん」「デザイナーの鈴木さん」みたいに、役割がわかるだけで話しかけるハードルがぐっと下がりますよね?

コミットも同じ!履歴を見返すとき、「バグ修正したやつどれだっけ…」と迷子にならずに済むのです。

例えば、以下のようなPrefixがあります。

【🐛: fix】→ 「バグ修正」
【🎸: feat】 → 「新しい機能を追加」
【✏️: docs】 → 「ドキュメント更新」

さらに、実際のコミットメッセージ例を挙げてみましょう。

【🐛: fix】 ユーザー名が正しく表示されないバグを修正
【🎸: feat】 プロフィール画像アップロード機能を追加
【✏️: docs】 READMEにセットアップ手順を追記
  • Prefix部分(例: 🐛 fix, 🎸 feat, ✏️ docs)は、コミットメッセージの冒頭につけるラベルです。
  • 全体のメッセージ(例: ユーザー名が正しく表示されないバグを修正)では、具体的な変更内容を簡潔に記載します。

他のPrefixについては以下サイトを参考にしてください!
【Git】コミットメッセージのPrefix(プレフィックス)一覧 | ITELL

これらのPrefixをつけることで、コミットが「何をしたのか」一目でわかるようになり、
履歴を見返すときに「どのコミットがどの対応をしたの?」と迷うことがなくなります!

🐛 なぜバグ(bug)は虫なの?

ところで、【🐛: fix】の絵文字を見て、「なぜバグが虫?」と疑問に思った人もいるかもしれません。
実は、この由来は1940年代のコンピュータ開発時代にさかのぼります。

当時、ハーバード大学の研究チームが使っていたリレー式コンピュータ「Mark II」で、
プログラムがうまく動かない問題が発生しました。調査したところ、原因はなんとリレーに挟まった本物の蛾だったのです!
この蛾を取り除いてプログラムを修正したことから、コンピュータの不具合を「バグ(虫)」と呼ぶようになりました。

そして今では、「バグ修正」を表す絵文字として、この🐛が使われるようになったというわけです!

世界最古、本物の「コンピューター・バグ」の写真 | WIRED.jp

git cz導入方法

ここからは、コミットメッセージをわかりやすくフォーマットするためのツール「git cz (Commitizen)」の導入方法を説明します。

※すでにgitはインストールできている前提です。

1. git czをインストールする

まずはgit czをグローバルにインストールします。

以下のコマンドをターミナルで実行してください:

npm install -g git-cz

2. 設定ファイルを作成する

次に、changelog.config.jsという名前の設定ファイルを作成します。

このファイルは「コミットメッセージの形式」や「使用するPrefix」を定義するためのものです。


2-1. Windowsの場合

  1. 設定ファイルの作成

    PowerShellまたはコマンドプロンプトで以下のコマンドを実行します:

    echo. > C:\\Users\\[ユーザー名]\\changelog.config.js
    
  2. 環境変数の設定

    PowerShellを使って以下を実行し、設定ファイルのパスを登録します:

    $env:GIT_CZ_CONFIG_PATH = "C:\\Users\\[ユーザー名]\\changelog.config.js"
    

2.2 Macの場合

  1. 設定ファイルの作成

    ターミナルで以下を実行してください:

    touch ~/changelog.config.js
    
  2. 環境変数の設定

    次に、環境変数を登録します:

    export GIT_CZ_CONFIG_PATH=~/changelog.config.js
    

3. 設定ファイルの内容を記述する

最後に、changelog.config.jsに以下の内容を記述します:

module.exports = {
  disableEmoji: false,
  format: "【{emoji}: {type}】 {subject}",
  list: [
    "fix",
    "feat",
    "refactor",
    "test",
    "style",
    "chore",
    "docs",
    "perf",
    "ci",
    "wip",
  ],
  maxMessageLength: 64,
  minMessageLength: 3,
  questions: ["type", "subject"],
  scopes: [],
  types: {
    chore: { description: "ドキュメント生成など", emoji: "🤖", value: "chore" },
    ci: { description: "CI設定やスクリプト", emoji: "⚙️", value: "ci" },
    docs: { description: "ドキュメント変更", emoji: "✏️", value: "docs" },
    feat: { description: "新機能追加", emoji: "🎸", value: "feat" },
    fix: { description: "バグ修正", emoji: "🐛", value: "fix" },
    perf: { description: "パフォーマンス改善", emoji: "⚡️", value: "perf" },
    refactor: { description: "コードリファクタ", emoji: "💡", value: "refactor" },
    style: { description: "コードの書式変更", emoji: "💄", value: "style" },
    test: { description: "テストコードの追加", emoji: "💍", value: "test" },
    wip: { description: "作業中のコミット", emoji: "🚧", value: "wip" },
  },
};

これで設定は完了です!次の章で使い方を見ていきましょう!🎯


Prefixの入力方法

ここまででインストールと設定が完了しました!

それでは、実際にgit czを使ってコミットメッセージを作成してみましょう。

1. コマンドを実行する

通常のgit commitコマンドの代わりに、以下を実行します:

git cz

すると、対話形式でコミット内容を入力する画面が表示されます。


2. 質問に答える

git czは、以下のような質問を順番にしてきます。それぞれに答えることで、コミットメッセージが自動で生成されます。

  1. タイプの選択
    • 変更内容に応じて、以下の中から適切なタイプを選びます:
      • feat: 🎸 → 新しい機能の追加
      • fix: 🐛 → バグ修正
      • docs: ✏️ → ドキュメント更新
      • ほかにもstyletestなど、設定したオプションが表示されます。
  2. 簡潔な説明を入力
    • コミット内容を一言で説明します(例: APIのバグ修正)。

3. コミットメッセージが生成される

質問に答え終わると、自動的に以下のようなフォーマットでコミットメッセージが作成されます:

【🐛: fix】 APIのバグ修正

これでコミット完了です!🎉
他にも対応があれば再度git czを実行して、コミットメッセージを追加していきましょう。
その後、git pushでリモートリポジトリにプッシュしてください!

以上で、git czの基本的な使い方は完了です!

この方法を使えば、チーム全体で統一されたわかりやすいコミット履歴が作れるようになります。ぜひ活用してください!💡

Prefixをつける前後のコミットメッセージの違い

ここから、git czを使う前と後のコミットメッセージの違いを見てみましょう。
「わかりやすいコミットメッセージ」の力を体感してみてください!

悪い例:Before 😢

commit 1a2b3c4d
一覧画面でのNullポインタ例外を修正

commit 2b3c4d5e
ログインユーザー認証機能を追加

commit 3c4d5e6f
READMEに環境構築手順を追加
  • 一見すると問題なさそうですが...
    • 各コミットが何をしているかは読めばわかりますが、「この変更がどのカテゴリに属するのか」が一目では判断できません。
    • 履歴をぱっと見たとき、「どのコミットがバグ修正なのか、新機能追加なのか」を探す必要があります。

良い例:After 🎉

commit 1a2b3c4d
【🐛: fix】一覧画面でのNullポインタ例外を修正

commit 2b3c4d5e
【🎸: feat】ログインユーザー認証機能を追加

commit 3c4d5e6f
【✏️: docs】READMEに環境構築手順を追加

Prefixを加えたことで...

  • コミットが「バグ修正」「新機能追加」「ドキュメント更新」のどれに該当するのか、ひと目で判別できます。
  • 履歴を俯瞰しても、関心のあるコミットを素早く見つけられるようになります。

Prefixと明確なコミットメッセージが追加されたことによってそのコミットでどんな対応をしたのか明確に自分やチームメイトに伝わるようになりました

6. まとめ

チーム内でPrefixを使用して、以下のメリットを感じました!

1. コミット内容の種類が一目でわかる

Prefixを使うことで、変更の種類が一目でわかるようになります。
「これはバグ修正なのか?」「新しい機能の追加なのか?」と言った疑問が即解決!
新規メンバーが見ても理解しやすい履歴を作ることができますね。

2. 自然とコミットの粒度が整う📏

Prefixを使用することで、「この変更は何に分類されるのか」自然に考えるようになるため、コミットの粒度が自然と細かく整ってきます。
結果として、履歴を追いやすく、コードレビューもしやすい環境が整います。
チーム内でコミットメッセージの粒度が統一されるため、コードの品質も向上することでしょう!

3. コミットが楽しくなる🎉

絵文字付きのPrefixを使うことで、コミット履歴がカラフルになります!
ちょっとした工夫ですが、エンジニアのモチベーション向上に効果抜群です🌈

実際にARM開発チーム内で統一化してみて、コミットメッセージの見やすさが向上し、コードレビューもスムーズになったと好評です!
ぜひ、この記事を参考にし、あなたのチームでも導入してみてください!

最後まで読んでいただきありがとうございました!

株式会社アドバンテッジリスクマネジメント(ARM)では、一緒に働く仲間を募集しています!
興味を持っていただけた方は、ぜひ以下のリンクから詳細をご覧ください

https://www.armg.jp/recruit/

ARMテックブログ

Discussion