git tag と GitHub の Release 機能でプロっぽさを出してみよう

本稿は [**Git Advent Calendar 2019**](https://qiita.com/advent-calendar/2019/git) の12日目の記事です。
昨日の記事は @miiina016 さんによる [ブランチを切ってinitialコミットまでするalias](https://qiita.com/miiina016/items/178259a87bf75a0c95aa) でした。

## 概要
こんにちは。とつぜんですが、みなさまは GitHub で以下のようなものを見かけませんでしょうか。

↓こんなのとか

![2019-12-09_00h46_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/8aa3acc6-1c87-6a06-8cc4-3f8674472dbf.png)

↓こんなのとか

![2019-12-09_00h48_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/d397d364-612b-4777-bbb3-62c40975d424.png)

※画像は [**Laravel先生の公式リポジトリ**](https://github.com/laravel/laravel) からお借りしました。


なんというかこんな風にバージョン6.5.2とか書かれると **プロっぽさ** というか **製品感がある** というか。とにかく **見た目カッチョイイ** ですよね(語彙力

これっていったいどうやってるんだろうと思って少し調べてみたところ、実はごく簡単な方法で実現ができるということがわかりました。そんなわけで今日はその方法を紹介してみたいとおもいます。

## 適当なリポジトリをつくります
単に私が検証用のリポジトリを用意しているだけなので、ここは読み飛ばしてもらってOKですｗ
下記は特になんの変哲もないリポジトリです。
![2019-12-09_01h09_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/e794f3ae-67e9-a2f4-9ca9-1d1951f9b94c.png)

## tagをつけます

`v1.0` という名前のタグを付けてリモートへ push します。

```sh
$ git tag -a v1.0 -m 'version 1.0'
$ git push origin v1.0
Counting objects: 1, done.
Writing objects: 100% (1/1), 162 bytes | 0 bytes/s, done.
Total 1 (delta 0), reused 0 (delta 0)
To https://github.com/Jpsern/test-product.git
 * [new tag]         v1.0 -> v1.0
```

## おや？ release のようすが・・・
さきほどまではなかった release の数字が0から1に増えてますね。
![2019-12-09_01h23_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/165048f1-6ce5-8bfc-042a-bf2bd27908de.png)

クリックしてみるとこんなかんじです。
![2019-12-09_01h26_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/e497d918-882d-a821-c549-fa20a50d4bb9.png)

おお、バージョンがつきましたね。

## しかし、もう少しなにかが足りない
**さっき見た Laravel のリポジトリと比べると何かまだ見た目が寂しいですね。**
ここからが Release 機能の出番です。使い方は簡単です。

### 1. Draft a new release をクリックします 
![2019-12-09_01h32_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/c54e2745-1936-6d1c-3ee2-d9359c9b5b97.png)

### 2. 必要な情報を入力します
例えばこんなかんじです。一番上には先ほど作ったタグの名前を入れます。2つめはタイトルです。一番下のテキストエリアはリリース内容の詳細です。
![2019-12-09_01h39_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/f107b4b6-ef50-3dd4-a1df-debe1d9c2e4e.png)

入力が終わったら `Publish release` を押します。

## すると・・・？
![2019-12-09_01h41_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/47c10e35-cabe-ac10-1cbc-2a96a066688e.png)


**おお、なんということでしょう・・・！**(古い)
冒頭でお見せしました Laravel の公式リポジトリと同じようなかんじになりましたね:relaxed:

## ちなみに

下記の入力フォームのキャプチャを見ていただくと、`Choose an existing tag, or create a new tag on publish` とタグの入力フォームのそばに書かれています。

Release の登録時に存在しない tag の名前を指定すると、tag の生成も行います。なので、<font color="red">**実は GitHub 上ですべて完結することも可能です。**</font>タグの名前を入力すると、そのタグが既に存在するかどうかメッセージも出してくれるので、こちらのほうが作業効率もよかったりします。

<img width="754" alt="スクリーンショット 2019-12-09 10.30.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/3184bb89-c299-57af-408c-9c9c3534dcf1.png">


<img width="823" alt="スクリーンショット 2019-12-09 10.28.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70638/c3faf14a-cd52-9595-39af-e8c3506978f3.png">

ただ、今回は tag の追加と、Release の編集を分けて説明したかったので前述までのような形をとりました。なので慣れている人はGitHub側の Release 機能でタグの追加からRelease編集までまとめて行うと良いのではないかと思います。

## 追記
@munieru_jp さんから、さらにプロっぽく見せることができるナイスなアドバイスをいただきましたので追記します。

バージョン表記は [セマンティックバージョニング](https://semver.org/lang/ja/) にしたがって行うようにすると、よりプロっぽさが増します。

細かい話は前述のリンク先を見てください。
超おおざっぱに説明しますと、以下の書式でバージョンを表記することです。必ず3ケタで表記します。

```
メジャー番号.マイナー番号.パッチ番号
```

例：1.0.0、1.1.0、など


## 感想
ということで味気なかった私のテスト用リポジトリでさえ少し立派に見えるようになりましたｗ
みなさまも制作されたソフトウェア等を GitHub で管理する際には `git tag` や、GitHub の Release 機能を使うと、それだけでちょっと見た目がいいかんじになるのでテンションが上がるとおもいます。気が向いた方はぜひ試してみてください:thumbsup:

## お世話になった参考リンク様
- [Git - Tagging](https://git-scm.com/book/en/v2/Git-Basics-Tagging)
- [Creating releases - GitHub Help](https://help.github.com/en/github/administering-a-repository/creating-releases)
- [git tagの使い方まとめ - Qiita](https://qiita.com/growsic/items/ed67e03fda5ab7ef9d08)
- [GitHubのリリース機能を使う - Qiita](https://qiita.com/todogzm/items/db9f5f2cedf976379f84)