Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@nitaking

【cli】君もgitmoji-cでエンジョイコミット

うちの会社にはgitmoji文化がありまして、コミットの先頭に絵文字をつける風習があります。
image.png

どんなことをするのかというと、例えばAndroidのコミットは以下のemojiがひも付きます
image.png

:robot:

これをgit commit時にprefixにつけるだけです。

:robot: Build Error Fix

すると
image.png

github上でこんな見た目となり、「これはAnroidのbuildエラーを直したのかー」とわかりやすくなりますね!

メリットとしては単純に楽しい点もありますが、
「ログの情報量が上がる」点があります。

例えばAndroid特有の同じバグを二回踏んでしまったとき、前回なにやったかなーとcommitログを漁る機会がありました。そんなときもgit log のgrepか、githubのsearchでgitmojiを検索すれば一発でたどり着きました!

$ git log --oneline --grep :robot
xxxxxxx :robot::lipstick:[AIRCLOSET-2010] Fix: TextInputでタブバーが押し上げられる現象fix

image.png

楽しい、ググラビリティを上げるという点でgitmojiは一押しです。

淡白なcommit一覧もgitmojiがあれば、ほら、華やかさを感じませんか・・・?

image.png

gitmojiのcode探すの面倒問題

gitmojiはwebページに公開されています。
https://gitmoji.carloscuesta.me/

emojiのcodeを毎回覚えているわけでもなく、commitのたびに都度サイトを見に行っていました。なんか面倒です。

レアな修正なんかが登場するとcodeは調べなきゃわかりません。
wip:construction:とか、CI:construction_worker:とか覚えてられない・・・

typo問題

そして慣れ始めたころ、typoはやってくるのです・・・。

image.png

だ、ダサい・・・!

問題を解決するCLI

そんな問題点を解決するのにちょうどよいCLIを見つけました。

gitmoji-cliです。

このgitmoji-cli、

  • gitmoji一覧がわかる
  • gitmojiの検索ができる
  • gitmojiを使ったコミットができる

おお、これがあればtypoコミットもないし、terminalでいつでもgitmoji検索できる!!!

といった機能があって大変よろしいのですが、1箇所不満があって、「gitmojiを使ったコミット」がgpgを求めてくるため、gpg設定をしないとコミットできないという点です。
(設定で解除できるかもしれませんが、デフォでgpg求めてくるのはよくない)

なんだかそれはめんどくさかったので、いい方法はないかなーと思案した結果、いい機会だしgpg求めないバージョンのgitmoji-cliを作ってみることにしました。

できたもの

gitmoji-c

$ yarn global add gitmoji-c

image.png

gitmoji一覧がわかる

$ gitmoji list

image.png

gitmojiの検索ができる

$ gitmoji list -s <search word>
# or
$ gitmoji list --search=<search word>
# or
$ gitmoji list <search word>

image.png

gitmojiのコミットができる(応答型)

$ gitmoji commit

2019-06-19 07 40 52

その他

...僕の場合、「commitでgitmojiを複数書きたいと」いったニーズもあるため、gitmoji-cに機能拡張を行っていくつもりです!

そしてこれはたまたまなんですが、
image.png
shell上で絵文字が表示されるというメリットが付いてきました。やったね!

今回使用したライブラリ

oclif

CLI 作る とかでググるとgoでつくる記事が多いのですが、goは触ったことがないので、nodeで作ってみました。

今回は oclifを使って作成します。

結構これがなんでもよしなにやってくれるやつで、initialで作成する際にtypescriptを選べたり、ci選択でcircleciを選択すると自動で .circleci/config.yml を吐き出してくれたりとしてくれるので、サクッとCLIを作りたいユーザーには良いものです!

注意

version 1.13.2まではnpm publish したときにtsのbuildがうまくできず、コマンドが正常に実行できないバグがありました。

こちらは1.13.3にて修正されたので現在は正常に動作するはずです!

publishしたのに動かなくて悲しかったのですがissueに上げたら数日で解決策を提示してくれました。コミュニケーションの早いライブラリは良いですね!

inquirer

gitmoji-cliのコミットでは応答型CLIとなっていて、

  1. 絵文字の選択
  2. コミットタイトル
  3. コミットメッセージ

の入力を求められます。

この応答型CLIを実装するのがinquirerです。

もともとはenquirerを使うつもりだったのですが、絵文字の選択時に外部データを使った選択肢を実装する方法がパッと見ではわかりませんでした。

本家でもinquirerは使用されているのでそのまま採用しました。source 要素として外部データを渡すと選択可能になります。

class Prompt {
  public get questions() {
    return [
      {
        name: 'gitmoji',
        message: 'Choose a gitmoji:',
        type: 'autocomplete',
        async source(_: any, input: { toLowerCase(): void; }) {
          const emojiList = await gitmojis()
          const searchResult = emojiList.filter((gitmoji: IGitmoji) => {
            const emoji = gitmoji.name.concat(gitmoji.description).toLowerCase()
            // @ts-ignore
            return (!input || emoji.indexOf(input.toLowerCase()) !== -1)
          })

          return displayValue(searchResult)
        }
      },
      {
        name: 'title',
        message: 'Enter the commit title',
      },
      {
        name: 'message',
        message: 'Enter the commit message:',
      },
    ]
  }
}

execa

git commit 実行させたらええやん」と思っていたんですが、

「それどうやって実行させんの・・・?」と思っていたところに

execaの登場

import * as execa from 'execa'

const {stdout} = await execa('git', [
      'commit',
      '-m',
      title,
      '-m',
      message,
    ])

第一引数にはコマンド名で、第二引数には配列でオプションを渡すことができます。

簡単でしたね!


さぁ、あなたもgitmoji、よかったらやってみませんか・・・?

gitmoji-c

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
11
Help us understand the problem. What are the problem?