Gitのコミットメッセージに絵文字を入れて社内の開発効率をあげた話【Emoji Prefix】

はじめに

この記事はAteam Brides Inc. Advent Calendar 2019　12日目の記事です。
エイチームブライズ新卒1年目の@oekazumaです。
今回は僕が新卒入社して初めてチームに提案したEmoji Prefixについてストーリー調で書きたいと思います。

ある日の会話

〜リファクタリングの作業をしている時〜
ぼく「んーこれ何の変更かな？コミットを見てなんでこうなっているのか追おう」
ぼく「ん！？いろんな変更が一つのコミットに入ってるぞ...しかもコミットメッセージ[とりあえずコミット]」って..なにをしてるか全然わからん」
ぼく「...とりあえず何してるか、コードを見てわかったけど時間かかったな...。何かいい方法ないかな...あ！そうだ！」

〜次の日〜
ぼく「すみません、この間リファクタリングをしている時に思ったんですがコミットのルールってないんですか？」
せんぱい「一応チケット番号を後ろにつけるとかならあるよ。でも明確なコミットのルールはないなぁ」
ぼく「そうなんですね...あの...Emoji Prefixって知ってますか？」
せんぱい「知らないな...なにそれ？」
ぼく「Gitのコミットメッセージに絵文字をつけるんですよ！つけるとこんな感じになります！」

Goodpatch Blog引用

せんぱい「へぇー！なんか楽しそう！」
ぼく「ですよね！この絵文字一つ一つに意味を持たせてあげることで何をしているのかすぐわかるんですよ」
せんぱい「良さそうだね！でも具体的にはこれをやるとなにがうれしいの？」
ぼく「大きくメリットは3つあると思います！」

コミットが綺麗に

• ごった煮コミットが作られにくくなり、ある程度機械的にコミットの粒度を揃えることができる。
• コミットが綺麗になってコードレビューの時間を節約できたり、ログを追いやすくなる。

視認性の向上

• Emoji Prefixをつけることでそのコミットがだいたい何をするかがひと目でわかるようになる。

コミット力の向上

• コミットを適切に分割したり適切なコミットメッセージを書く、つまり良いコミットを作る能力がつく。

せんぱい「いいね！これやろうよ！」
ぼく「やりましょう！！ では、ルールを作らないとですね！」

〜次の日〜
ぼく「テンプレートできました！これをチームで展開して使っていきましょう！」

テンプレート

# 🐛  :bug: バグ修正
# 👍  :+1: 機能改善
# ✨  :sparkles: 部分的な機能追加
# 🎨  :art: デザイン変更のみ
# 💢  :anger: コンフリクト
# 🚧  :construction: WIP
# 📝  :memo: 文言修正
# ♻️  :recycle: リファクタリング
# 🔥  :fire: 不要な機能・使われなくなった機能の削除
# 💚  :green_heart: テストやCIの修正・改善
# 👕  :shirt: Lintエラーの修正やコードスタイルの修正
# 🚀  :rocket: パフォーマンス改善
# 🆙  :up: 依存パッケージなどのアップデート
# 👮  :cop: セキュリティ関連の改善
# ⚙   :gear: config変更
# 📚  :books: ドキュメント

テンプレートの登録

コンフィグでコミットテンプレートを設定できます。
.gitmessage.txtにテンプレートを入れて下記コマンドで登録してください。

git config --global commit.template ~/.gitmessage.txt

ぼく「これで完璧ですね！社内で説明会も実施したのであとは見守りましょう」
せんぱい「これでコミット綺麗になるね！また1ヶ月後振り返りしようか」

〜1ヶ月後〜
ぼく「振り返りしましょう！まずはコミットが綺麗になっているかコミットログを見て...」
せんぱい「まあまあ綺麗になってるね！人によってはまだ粒度が荒い人もいるけど...ん？」
ぼく「どうしたんですか？変なのありました？」
せんぱい「絵文字打ち間違えてる人まあまあいるね...Prefixの後ろにスペースがなくて反映されていなかったり、あとデザイナーもコミットするからターミナル使いなれてなくて :q とかviコマンドをコミットメッセージにしてる人もいるぞ！？」
ぼく「え〜！まあ、テンプレートは登録してますけど結局打つのは自分だからミスしちゃいますよね。。。何かいいツールがあればいいですけど」
せんぱい「とりあえず打ち間違えをどうにかできればもっとよくなりそうだね！」

〜数日後〜
ぼく「せんぱい！いいの見つけましたよ！」
せんぱい「なになに〜〜？」
ぼく「うちの会社はほとんどの人がVSCodeを使っているじゃないですか、だから拡張機能でいいものがないかを探したんですがいいのがありました！」

VSCode拡張機能設定方法

Gitmoji CommitというVSCodeの拡張機能を使うことでEmoji Prefixを選択することができ、打ち間違えを防ぐことができます。

1.VSCodeの拡張機能検索画面で「Gitmoji Commit」と検索し、インストール
2.左下の歯車アイコンをクリックし、設定をクリック。
3.ユーザ->拡張機能->Gitmoji Commitを選択し、「setting.jsonを編集」をクリック
4.下記のようなテンプレートを作って保存。※{}の中に記述してください。

テンプレート

"gitmoji.customEmojiMap": [
        {"emoji": "🐛",  "colon": ":bug:", "text": "バグ修正"},
        {"emoji": "👍",  "colon": ":+1:", "text": "機能改善"},
        {"emoji": "✨", "colon":  ":sparkles:", "text": "部分的な機能追加"},
        {"emoji": "🎨",  "colon": ":art:", "text": "デザイン変更のみ"},
        {"emoji": "💢",  "colon": ":anger:", "text": "コンフリクト"},
        {"emoji": "🚧",  "colon": ":construction:", "text": "WIP"},
        {"emoji": "📝",  "colon": ":memo:", "text": "文言修正"},
        {"emoji": "♻", "colon": ":recycle:", "text": "リファクタリング"},
        {"emoji": "🔥",  "colon": ":fire:", "text": "不要な機能・使われなくなった機能の削除"},
        {"emoji": "💚",  "colon": ":green_heart:", "text": "テストやCIの修正・改善"},
        {"emoji": "👕",  "colon": ":shirt:", "text": "Lintエラーの修正やコードスタイルの修正"},
        {"emoji": "🚀",  "colon": ":rocket:", "text": "パフォーマンス改善"},
        {"emoji": "🆙",  "colon": ":up:", "text": "依存パッケージなどのアップデート"},
        {"emoji": "👮",  "colon": ":cop:", "text": "セキュリティ関連の改善"},
        {"emoji": "⚙" , "colon": ":gear:", "text": "config変更"},
        {"emoji": "📚",  "colon": ":books:", "text": "ドキュメント"}
    ],
"gitmoji.customEmoji": true

使い方

• 1.git commitを実行したいタイミングに 「command+shift+p」を押す。
• 2.入力欄が出てくるので 「Gitmoji Commit」と入力し、出てきた「Gitmoji Commit:Create Commit Message」をクリック
• 3.設定したprefixが出てくるはずなので記入したいemojiをクリック
• 4.普段通りコミットメッセージを入力しEnter！
• 5.ターミナルにgit commit -m :emoji: commit message のようになっていれば成功！後はそのままいつも通りコミット！

〜1ヶ月後〜
ぼく「拡張機能を入れてから打ち間違えも減って綺麗なコミットがされるようになりましたね！」
せんぱい「そうだね！これで何が変更されたかわかるし、コードの歴史も追いやすいからリファクタリングするときも便利だし新しく入社した人もコードが追いやすくなったね！」
ぼく「導入してみてよかったです！」

さいごに

見た目的にもすごく楽しくなりましたし、チーム全体のコミット力が上がりました。
コミットメッセージは誰かが読むものでチームの財産になるという認識が浸透したというのも大きいです。
あと、このルールは作って終わりではなく、定期的に振り返りをして今のチームにあっているのかこのルールの恩恵は受けられているのかを考えることでなぜEmoji Prefixが必要なのかをチーム全員が理解して運用できると思います！
ぜひ、導入検討してみてください！

私たちのチームで働きませんか？

エイチームは、インターネットを使った多様な技術を駆使し、幅広いビジネスの領域に挑戦し続ける名古屋の総合IT企業です。
そのグループ会社である株式会社エイチームブライズでは、一緒に働く仲間を募集しています！

• ハナユメ サイト開発グループ
• HIMARI開発チーム
• 技術開発部

上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずはチャットでざっくばらんに話をしましょう。
技術的な話だけでなく、私たちが大切にしていることや、お任せしたいお仕事についてなどを詳しくお伝えいたします！

Qiita Jobsよりメッセージお待ちしております！