限界開発鯖 - お手軽絵文字コミット
Approvers

お手軽絵文字コミット

loxygen -

フライさんです。連投して3つ目です。今回はGitのお話です。

🙂 絵文字コミット

コミットメッセージの書き方には様々な形式のものが存在します。 今回は、 絵文字を使用する形式 のコミットメッセージの書き方をご紹介します。
(便宜上この記事では絵文字を使用する形式でメッセージを書いたコミットを 絵文字コミット と表現します)

絵文字コミットでない形式であれば…

feat: create extremely cool stuff

というような書き方 (Conventional Commits) が主流です。他にも

fix(README.md): fix typo in the example

とかやったりします。

では、絵文字コミットがどうかというと…

✨ create extremely cool stuff

📝(README.md) fix typo in the example

やだ、かんわいい。あとわかりやすい。

他の形式で feat や fix など、いわゆる "接頭辞"に英単語を用いるのに対して、絵文字コミットでは ✨ や ✏️、🐛などの 絵文字を使用します。かわいすぎ。

🤔 めんどくさそう？

そんなことないです。もちろん、自分で絵文字ピッカーから絵文字を選択してやる場合はメリットよりも手間のほうが大きくなってしまいますが、 絵文字コミットに大変便利なツールが作成されています。後々ご紹介します。

とにかく伝えたいのは、 簡単に絵文字コミットできるツールがあるので全くめんどくさくないということです。

👍 いい

絵文字コミットいいんですよ。具体的に何がいいかというと…

💞 かわいい

かわいい。

👀 わかりやすい

絵文字コミットにはルールが存在していて、それに沿ったコミットをすることで、ひと目で変更の概略をつかめるようになります。

どのようなコミットにどの絵文字を使うかは人それぞれなので、いくつかガイドが作られていますが、今回はその一つである Gitmoji を例に挙げます。

Gitmojiで使用されているルールの一例をご紹介します:

やったこと 英単語で書くPrefix 絵文字コミット
機能追加 feat ✨
ファイル/コード削除 remove 🔥
ファイル/コード移動 move 🚚
依存関係追加 dep / add ➕
外部APIの仕様変更による修正 fix 👽
勢いに任せてコードを書いた ??? 🍺

などなど。めちゃんこあります。めちゃんこありますが、絵文字というビジュアルに訴える文字を採用しているおかげでパット見で何やったかわかりますね。🔥とか絶対なんか燃やしてますし、🚚とか絶対物を動かしています。

🍺は多分酔った勢いでコードを書いたんだと思います。限界開発を感じますね。

🌈 映える

映えます。絵文字はカラフルなので。

✨ ツールを使って絵文字コミットする (CLI向け)

JetBrains製IDEを使用している方はこちらをご覧ください。

先述したように、一見してみるとマジでめんどくさそうですが、大丈夫です。 簡単にGitmojiに沿ったルールで絵文字コミットできるツールが提供されています。「gitmoji-cli」です。

gitmoji-cliを使用すると、以下の3ステップを踏むだけで絵文字コミットできるようになります。

  1. 絵文字を選択する。(キーワードから絞り込み可能)
  2. コミットメッセージのタイトルを入力する。
  3. コミットメッセージの本文を入力する。(省略可能)

絵文字選択機能があるのは大きいですね。検索もできるので、自分で絵文字を探してコミットメッセージに貼り付けるという作業が不要になります。

⏬ インストール

yarn (かnpm) を使用するので、nodeが入ってなかったりする場合はnvmとかを使用して導入しておいてください。

yarn global add gitmoji-cli
# npm -g install gitmoji-cli

これでgitmoji-cliが入りました。

🏗️ 初期設定

インストールした後

gitmoji -u

使用する前に、このコマンドでインターネットから絵文字コミットのルールを読み込みます。

リポジトリごとに

これはやんなくても大丈夫ですが、やったほうが楽だと思います。

$ gitmoji -i
✔ Gitmoji commit hook created successfully

これをすると、リポジトリにフックが生成され、git commit コマンドを実行するとgitmojiによるコミットメッセージの生成ウィザードが走るようになります。

フックを使用しない場合は gitmoji -c でコミットできます。

✏️ 使ってみる

🙂 絵文字を選ぶ

上にも示した3ステップで簡単に絵文字コミットできます。

cd /path/to/some/random/repository
gitmoji -i
# 何か変更を加える
git add .
git commit

ここまで行くと、通常ではVimかなんかが出てきてコミットメッセージを要求されますが、Gitmojiのフックが有効になっている場合は…

? Choose a gitmoji: (Use arrow keys or type to search)
❯ 🎨  - Improve structure / format of the code.
  ⚡️  - Improve performance.
  🔥  - Remove code or files.
  🐛  - Fix a bug.
  🚑  - Critical hotfix.
  ✨  - Introduce new features.
  📝  - Add or update documentation.
(Move up and down to reveal more choices)

こんな感じの絵文字選択プロンプトが出てきます。briliant。 この画面で上下キーを使用して絵文字を選択します。

また、量が多いので…

? Choose a gitmoji: fix
❯ ✏️  - Fix typos.
  🐛  - Fix a bug.
  🔒  - Fix security issues.
  💚  - Fix CI Build.
  🚨  - Fix compiler / linter warnings.
  🚑  - Critical hotfix.
  🩹  - Simple fix for a non-critical issue.
(Move up and down to reveal more choices)

こんな感じでキーワード絞り込みすることもできます。 大体は、 キーワード絞り込み → 絵文字選択 というフローで絵文字を選びます。

絵文字を選択したあと、Enterキーを押します。

? Choose a gitmoji: ✨  - Introduce new features.
? Enter the commit title [0/48]:

コメントを入力する画面に入るので、コメントを打ちます。

? Choose a gitmoji: ✨  - Introduce new features.
? Enter the commit title [24/48]: Added searching function
? Enter the commit message: (# with '#' will be ignored, and an empty message ab
orts the commit.)

コミットメッセージの詳細を入力する画面です。 「空のメッセージが入力されるとコミットを中断するぜ！」という旨のことが書いてありますが、打たなくても大丈夫です。

コミットメッセージ入力後に表示される、メッセージ編集画面

Enterを押すといつものコミットメッセージ入力画面に絵文字コミットされたコミットメッセージが入力されている画面になります。 この画面で保存&終了すると、コミットされます。

? Choose a gitmoji: ✨  - Introduce new features.
? Enter the commit title [24/48]: Added searching function
? Enter the commit message: # with '#' will be ignored, and an empty message abo
rts the commit.
[master f1f628d] ✨ Added searching function
 1 file changed, 1 insertion(+)
 create mode 100644 search.cpp.c

いいですね。最高です。

💫 その他の便利 stuff

🔧 設定をいじる

gitmoji -g

以下の項目が設定できます。

  • 自動 git add
  • 絵文字のUnicode化
  • GPG(PGP)を用いた署名付きコミットの強制
  • スコープ追加

Unicode化を有効にすると、「:hogehoge:」というテキストの形式ではなく「:face_with_hand_over_mouth:」の形式でコミットされるようになります。すなわち絵文字に対応している環境でコミットメッセージがよりエモく表示されるようになります。

👀 絵文字を探す

Gitmojiのルールに登録されている絵文字を検索することができます。プルリクエストのタイトルにも絵文字コミットしたいときなどに便利です。

$ gitmoji -s dependency
➕ - : heavy_plus_sign : - Add a dependency.
➖ - : heavy_minus_sign : - Remove a dependency.
⬆️ - : arrow_up : - Upgrade dependencies.
📌 - : pushpin : - Pin dependencies to specific versions.
⬇️ - : arrow_down : - Downgrade dependencies.
🗑 - : wastebasket : - Deprecate code that needs to be cleaned up.

dependencyだけでもいっぱいありますね。すげえ。

💾 フックを介さずにコミットする

フックを登録しないでコミットすることもできます。

gitmoji -c

このコマンドを実行すると、上に記したコミットのウィザードが実行できます。ただし、ウィザードが完了したあと コミットメッセージの編集画面を介さずにコミットされる ので注意です。[1]

✨ ツールを使って絵文字コミットする (JetBrainsユーザ向け)

CLIを使用している方はこちらをご覧ください。

絵文字をちまちま選んでどうのこうのするのはマジで面倒くさいので、Gitmojiに登録されている絵文字を一覧から選択してメッセージに挿入できるプラグインが提供されています 。Gitmoji Plus: Commit Buttonです。

⏬ インストール

2つ方法があります:

  • インストールしたいIDEを起動した状態で先程貼ったリンクを踏んで「Install to IDE」を押す 環境によっては対応してないかもしれません。
  • インストールしたいJetBrains製IDEで設定画面に行き、プラグインを検索しインストールする

✏️ 使ってみる

コミットダイアログに行くと、以下のボタンが追加されています。

コミットメッセージの履歴表示ボタンの左に新しく出現した

このボタンを押すと、絵文字一覧に移動します。 この画面で絵文字を選択することが可能です!

新しく出現したボタンを押すと出てくる絵文字一覧

この画面で使用したい絵文字をクリックすると コミットメッセージの先頭に絵文字が自動で挿入されます 。 (すでに挿入されたものがある場合は置き換えられます)

🔎 検索する

一覧を出した状態でキーワードを入力すると絵文字を検索することが出来ます。

検索機能を使用したときの絵文字一覧

以下のキーワードで補完することができます:

  • fix や feat などの、変更の概要
  • 絵文字名

🔧 設定 ― Unicodeを使用する

「:hogehoge: の形式だと絵文字表示されなくてやだ」というときのために、 テキスト形式ではなく直接Unicodeの絵文字を挿入する 設定が可能です。

設定画面に移動し、下の方にある「Other Settings」を展開し、「Gitmoji」をクリックします。

その中にある「Use unicode emoji instead of text version (:code:)」にチェックを入れると、 次回のコミットから直接Unicode絵文字が挿入されるようになります 。

テキスト形式ではなくUnicode絵文字を使用させるためのオプション

テキスト形式の代わりにUnicode絵文字が使用されている

👋 まとめ

  • 絵文字コミットはかわいくて映える
  • ツールを使えばめんどくさくない
    • CLIではgitmoji-cliがイケてる
      • gitmoji -i → うんたらかんたら → git commit
    • JetBrains製IDEではGitmoji Plus: Commit Buttonがイケてる

🔖 注釈

  1. 加えて、git addし忘れたままgitmoji -cすると、コミットメッセージの確定時に例外を吐いて落ちます。フック張っておくのが確実? ↩︎

プライバシーポリシー- (c) 2024 Approvers