GitHubのTemplate Repository機能のすゝめ

最近発見したGitHubのTemplate Repository機能の紹介です。

リンターやらテストライブラリの設定等は、ほぼどの環境でも行いますが毎回設定するのは地味に面倒ですよね。
GitHubのTemplate Repository機能を使えばその環境構築が不要で、本質的な開発をすぐに始められるようになります。

# GitHubのTemplate Repositoryとは？

あるリポジトリのコードベースをそっくりそのまま新規のリポジトリ作成で利用できる機能です。
「え、それってforkと違うの？」っと思った方もいるかもですが、以下の点でforkとは異なります。

- 1つのリポジトリから**複数作成**できる（forkだと、同名のリポジトリとなるので1人のユーザー内で複数作成は不可）
- 元となったリポジトリのコミット履歴を継承せず、**クリーンな状態でスタート**できる

# 使い方

以下実際にTemplate Repositoryを作るところから説明します。

## 1. テンプレートとなるリポジトリの作成
まず、汎用性のある環境を整備したボイラープレート的なリポジトリを作ります。
自分の場合はこちらのリポジトリがそれに当たります。
<a href="https://github.com/kawamataryo/ts-jest-boilerplate" target="_blank">
<img width="521" alt="スクリーンショット 2020-07-13 5.55.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/07b83159-e2fb-548f-d3cb-026309845967.png"></a>


整備している環境は以下の通りです。

- TypeScriptのビルド環境（TypeScript, ts-node）
- リンター、コードフォーマッター(ESLint, Prettier)
- テスト環境（Jest）
- 各npmスクリプト（test, lint, build）

Node.js + TypeScriptでちょっとしたCLIツール等を作るときに使えます。

## 2. Template Repositoryとして登録

GitHub上でリポジトリにアクセスして、メニューのSettingsから`Template Repository`のチェックボックスをチェックしてください。
これだけでTemplate Repositoryとして登録されます。


<img width="1126" alt="テンプレート機能" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/4d7b95c6-f6b3-e07e-a9a2-601e32df4c34.png">

## 3. テンプレートの利用

リポジトリのトップページを見ると、新しく`Use this template`というボタンが追加されているはずです。

<img width="1031" alt="スクリーンショット 2020-07　　　　　　　　-12 17.50.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/aa579d07-de24-d7de-8c1a-0c377539dec5.png">

このボタンを押すと、いつものリポジトリ作成画面に遷移します。あとは通常通りリポジトリ名、概要を入力し作成するだけです。

<img width="1017" alt="スクリーンショット 2020-07-12 20.15.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/0ac6bbe5-826e-be96-ffbd-b38281c18e79.png">

`Initial commit`として元リポジトリのコードベースがコミットされたリポジトリが作成されます。
また、forkのようにリポジトリ名下部に`generated from ...`としてテンプレートとなるリポジトリのリンクが記載されます。

<img width="1499" alt="スクリーンショット 2020-07-13 6.07.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/743c7b53-1ffd-b6ea-fc78-d1d4af7569bf.png">

これでリンター、テスト環境が整備された上で直ぐ開発をスタートできます!便利!🎉

※ テンプレートへの依存はあくまで、作成時に`Initial commit`でテンプレートの内容がコミットされるだけです。Template Repository側のリポジトリをその後変更しても、そこから作成したリポジトリには反映されないので注意です。

# おすすめのTemplate Repository

テンプレートとして公開されているおすすめのリポジトリの紹介です。

### [node-typescript-boilerplate](https://github.com/jsynowiec/node-typescript-boilerplate)
Node.js + TypeScriptでプロジェクトをスタートするときに利用するリンターやら、テストパッケージ等が整備されています。
<a href="https://github.com/jsynowiec/node-typescript-boilerplate" target="_blank"><img width="522" alt="スクリーンショット 2020-07-13 6.22.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/5d9c6cf8-87a3-4714-0328-f5d1de5e8e63.png"></a>

### [electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate)
ElectronでReactを利用する場合に必要なもののほぼ全てが入っています。

<a href="https://github.com/electron-react-boilerplate/electron-react-boilerplate" target="_blank"><img width="520" alt="スクリーンショット 2020-07-13 6.35.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/03a1cf2a-a24b-661f-ff99-1edad2930bcf.png"></a>

### [laravel-voilerplate](https://github.com/rappasoft/laravel-boilerplate)
Authorizationや、Bootstrap4ベースのフロントエンド、その他諸々が整備されています。

<a href="https://github.com/rappasoft/laravel-boilerplate" target="_blank"><img width="521" alt="スクリーンショット 2020-07-13 6.41.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/4c0bba28-00d6-2722-3ae6-f6c151be0f59.png"></a>

# 終わりに

以上「GitHubのTemplate Repository機能のすゝめ」でした。
なかなか便利な機能なので、今後も自分なりのボイラープレートを作って利用していきたいです。


# 参考

- [Generate new repositories with repository templates - The GitHub Blog](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/)
- [GitHubでは既存のRepositoryをTemplateとして、新しいRepositoryを作成することができる | Developers.IO](https://dev.classmethod.jp/articles/github-template-repository/)