🎄gitmojiでコミットメッセージを彩ろう⛄️

はじめに

こんにちは、Webエンジニア目指して学習中のさばと申します🐟（X：@saba7678pg）
【RUNTEQ Advent Calendar 2023 Advent Calendar 2023】13日目として参加させていただきました。

テーマは「初めて学んだ技術」！

クリスマスだし、ちょっとワクワクするような、コミットが楽しくなる面白機能を紹介してみようと思います。

内容について、引用元を確認したり、手元で動作を確認しながら書かせていただきましたが、
万が一誤りや補足情報等ございましたら、お手数ですがコメント・DM等でお知らせ頂けますと幸いです。

今回の記事の対象者

• git commitのコメントを適当に書いている人
• コミットメッセージを彩りたい人

そもそもコミットメッセージ、どのように書いていますか？

本題に入る前に、そもそもコミットメッセージが重要視される理由をおさらいしておきます。

上記は私が勉強で用いているプライベートリポジトリのコミットメッセージです。
何をしたのか、ザックリ書いてはいますが、
もしこれがチーム開発だったらシバかれているかもしれません。

👹「なんでアイキャッチ画像の位置変えたの？」
😈「なんで.processed削除したの？」
👹😈「バグが起きてる箇所を探りたいけど、どこでどんな仕様変更してるのか見にくい！」

こんな印象を抱かれているかもしれません…🎣

コミットメッセージを丁寧に書くべき理由

• レビューしてもらう人にコミット・修正の意図を端的に分かりやすく伝える
• 適切なコミットメッセージを残すことで、後のメンテナンスや過去のコードの再確認時の効率が上がる（開発の効率化に寄与）

できるだけレビューしてもらう人や後からコードを振り返る人が、意図や目的を汲み取りやすい記載にしましょう。
個人開発だとしても、今の自分が未来の自分に送るメッセージだと考えて、丁寧にコミットメッセージを書く癖をつけるとよいかもしれません。

どのように書けば良いのか

とはいってもどう書けば良いのか、正解が分からない！
そもそも書き方はプロジェクト次第だし…

そこで、まずはよく見かける記法・略語を真似てみるのをオススメします。

Semantic Commit Messages

上記はコミュニティ主導で開発された慣習の1つで、
コミットメッセージを意味のあるものにし、変更履歴を読みやすいように、と提案されたものです。

フォーマット：<type(prefix)>: <subject>

上記がコミットメッセージでよく見かける形状です。
"#38 Fix: 投稿画面でループ処理が起きている不具合を修正"
のようにコミットメッセージを見たときになぜ修正が行われたか、他の人や未来の自分が見たときにイメージできるような書き方をしてみましょう。

type(prefix)　：どんなコミットなのか分かるように、種別を書く

• Feat: 機能やファイルの追加
  Add: どちらが主流かは現場次第かもしれませんが、この記載も機能・ファイルの追加としてよく見かけます。
• Fix: 修正作業
• Docs: ドキュメントの更新

等々…
コミットメッセージのタイトルにこのコミットはどういった種別なのかをざっくり書いておきます。
GitHubで確認した際にバグ修正したファイルを探したい、変更を加えたファイルを探したい、というときに探索しやすくなります。

プロジェクトによって意味合いや使用するPrefixは異なるので、
個人開発の場合はよく見かけるPrefixを何種類か採用して自分のプロジェクト内で統一するとよいのかなと思います。

subject: 変更内容

• なぜそのファイルを変更したのかを記載
• Whyを意識して書くとよいとされています。
  （WhereやHowはコード比較をみれば分かるため）
• Issueを紐づける方法を採用しているところもあるようです。

• より詳細に書く方法として、改行を行い2行目（もしくは3行目など）に具体的な情報や補足情報を入れる手段もあります。

コミットメッセージにissueを加える。

テンプレートには記載がありませんでしたが、コミットメッセージにissueを加えることもできます。
subjectや２行目以降に詳細を書いても良いかもしれませんが、
issueと紐づけることによってどのタスクに関連した操作なのかが明確になります。

記載方法はとても簡単、コミットメッセージ内に#1のように#にissue番号をつけて書くだけです。
git commit -m '#1 Add: ログイン機能の実装'

コミットメッセージには絵文字も使える

なんとコミットメッセージには絵文字を入れることができます👀
必ずしも必要な要素ではないのですが、
個人的にあったら楽しいので個人開発には導入してみようと思いました。

:bug:と入力するとコミット先で🐛に変換されたり、
:memo:と入力すると📝と表示されたり。

いろんな種類のgitmojiがあるので以下のサイトから絵文字と用途の一例を参考にしてみてください。

注意点として、Prefix、issue番号、gitmojiの書く順番によってgitmojiが認識されず、そのまま出力されてしまうことがあります。
（Add: :memo: 本文という書き方や:memo: Add: #1 本文、Add: :memo: #1 本文という書き方はNGでした。）

:memo: #1 Add: testや#1 :memo: Add: testはいけたので、
Prefix以降にはコミットメッセージ本文のみを記載するのがよさそうです。（先にgitmojiとissueを書いてからPrefixを書く）

gitmoji覚えるのが大変！

ここまででコミットメッセージの書き方を確認してきましたが、
Prefixを覚えたりgitmojiを覚えたり少し面倒だな、という方にgitmogi-cliを紹介します。

こちらはgit commit -m '~~~'をgitmoji-cに置き換えて対話式で絵文字、title、message（2,3行目に該当）を入力できるようになるCLIツールてす。

この入力の後にいつも通りgit pushを行うと、

このようにコミットメッセージが反映されます！
慣れたら普通にgit commitした方が早い気もしますが、こういったツールを使うのも楽しいかもしれません。

導入方法

gitmoji-cliをインストールする

gitmoji-cliはnpmパッケージとして配布されています。

gitmoji
gitmoji-cli

# ターミナルでnpmパッケージをインストール
npm i -g gitmoji-cli

# アンインストールしたい場合
npm uninstall -g gitmoji-cli

その後、いつもの手順通りファイルの編集後にgit addを行い、
git commitを以下に置き換えて実行します。

gitmoji -cli 

もしくは

gitmoji -c

すると上記のようにgitmojiを選ぶように指示されます。
キーワードで探すこともできますし、上下で選択スクロールすることもできます。

後はtitleにIssue→Prefix→subjectの順番で記載、
messageは必要に応じて使ってください。（messageは空欄でもOKです。）

最後にgit pushを行うと

絵文字のついたコミットメッセージを作成することができました👏

自分もまだまだ模索中ではあるので、このような方法がいいよ、こういうPrefixもあるよなどあればご指摘・ご教授頂けますと幸いです。

ここまで読んでいただきありがとうございました🐟💨

引用

Semantic Commit Messages