今朝会社で話題になっていたので見てみたのですが、エンジニア1年目の頃にこのサイトがあれば...！と思うくらい良かったです。

どんなサイト？

Gitのコマンドを、よくあるシチュエーション別に簡単に探せるサイトです。

gitコマンドは新人エンジニアにとっては本当に鬼門です。commitを間違えて、戻すやり方を必死でGoogle検索して、いざコマンドを打ってみたら予想外の変更が起きてしまい、収拾がつかなくなる...というようなことは、誰でも一度は経験したのではないでしょうか。そんなときこのサイトを使うと、正しい方針をすぐに調べることができます。

使ってみよう

このサイトはムダな機能がなく、とてもシンプルなデザインです。どうやって使えばいいのか大体わかりますね。 f:id:Udomomo:20190123230911p:plain

ちなみにDark Modeにもできます。こちらの方がエンジニアっぽいでしょうか。 f:id:Udomomo:20190123230933p:plain

まずやりたいことをプルダウンから選びます。
f:id:Udomomo:20190123231003p:plain

すると詳細なプルダウンが出てくるので、調べたいコマンドに合うものを選びましょう。 f:id:Udomomo:20190123231014p:plain

コマンドと注釈が表示されます。コマンドはこのままコピーすることもできます。 f:id:Udomomo:20190123231032p:plain

あのコマンドがない？プルリクエストしてみよう

とはいえ、このサイトはまだできたばかりのようで、選択肢の一覧を見ていると「あのコマンドがないの？」と思うことがあるかもしれません。そんなときは新しいコマンドをContributeしてみましょう。サイト右下のGitHubマークをクリックすると、レポジトリに行くことができます。

github.com

新しいコマンドを追加することを想定して、READMEが丁寧に書かれています。npm run install 等はもちろん必要ですが、それ以外に複雑なコーディングは必要なく、arrayの中身を追加するだけで良いようです。
編集するべきファイルはそれぞれ以下のように対応しています。

src/data/primary-options.js : 最初のプルダウン
src/data/secondary-options.js : 2番目のプルダウンと、それに対応するコマンド・注釈:
src/data/teritary-options.js : (必要なら)3番目のプルダウンと、それに対応するコマンド・注釈

例えば secondary-options.js の一部を抜き出すと、こんな感じです。(※2018/01/24時点)

export const secondaryOptions = {
  commit: [
    {
      value: 'local-changes',
      label: 'commit all local changes in tracked files',
      usage: 'git commit -a'
    },
    {
      value: 'stages-changes',
      label: 'commit all stages changes',
      usage: 'git commit -m <message>',
      nb: 'Replace <message> with your commit message.'
    }
  ],
...
}

これは最初のプルダウンで commit を選んだときのコードです。valueはコード内のみで使う簡潔な識別子、labelはプルダウンに表示する値、usageがサイト右側に表示されるコマンド、nbがその下に表示される注釈です。
追加したら、READMEに従ってローカルかDocker環境で動かし、自分が追加したコマンドが反映されているか確認しましょう。

ちなみに私は、submodule関連のコマンドを追記してプルリクを申請しました。

github.com

個人的には、このように 誰でもContributeしやすい設計になっている のはOSSプロジェクトとしてとても素晴らしいと思っています。公開されたばかりなので、プルリクエストもどんどんマージされているようです。

gitの勉強で苦しんでいる方は、このサイトを使うだけでなく、ここにContributeして次の初心者を支えてみてはいかがでしょうか。