2021/06/29
はじめに
最近私は，React では Typescript を使うことが多い．
また，ネット上にあるサンプルを勢いで実行する癖があるので，頻繁にcreate-react-appにはお世話になっている．
その状況の中，--template typescriptを通常使っていた．
しかし，一般公開するアプリやライブラリであればtesting-libraryは必要だと思うが，サンプル実行や思いつきで作るアプリにそれが必要な事は少ないと思っている．
なので，testing-libraryのインストールや/src/内のApp.test.*やApp.css，App.tsx内のロゴが回るコンポーネントを省いたテンプレートを自分用に作った．
同じようにカスタムテンプレートを作りたい人も多いと思うので，その知見を共有する．
一連の手順
1. テンプレート化前に
まずは，create-react-appで作成してほしい物を作る．
ここまでで，package.jsonも希望通りのものにしておく必要がある．
簡単のため，ここで作成したプロジェクトを雛形と呼ぶことにする．
2. 公式のドキュメントのカスタムテンプレートの作り方を見る
こちらを見るとディレクトリ構造が以下のように記載されている．
cra-template-[template-name]/
README.md (for npm)
template.json
package.json
template/
README.md (for projects created from this template)
gitignore
public/
index.html
src/
index.js (or index.tsx)
3. よく分からない場合
実際のテンプレートを見ると構成がめちゃくちゃ理解できる．
4. テンプレート化
事前に作った雛形をテンプレートのディレクトリ構造に合わせる．
ディレクトリ構造の上から順に何をするのか記す．
4.1. README.md
これは無くても問題なさそうだが，特にこだわりがなければ雛形のものを残しておいても良いだろう．
4.2. package.json
そのまま
4.3. template.json
以下の形式で依存関係等を記載する．
{
"package": {
"dependencies": {
...
},
"eslintConfig": {
"extends": ["react-app", "react-app/jest"]
}
}
}
4.3. template
雛形内の/src, /public, README.mdを/template内に移動する．
また，.gitignoreはgitignoreという名前に変更して移動する．
テンプレートを呼び出す
作成したテンプレートを利用するには，以下のようにする．
$ npx create-react-app my-app --template file:/pass/to/cra-template-<template-name>
おまけ
私が作ったテンプレートは結構自分向けに便利にしているので，これからは何度も呼び出すことになりそうである．
その都度上記の長いコマンドを実行するのは骨が折れる．
そこで，エイリアスを設定することにした．その前に確認したのが，npx create-react-app --template cra-template-<template-name> my-appの形式でもテンプレートが実行できるという点である(これが出来なければ少し面倒であった)．
エイリアスとして，以下を~/.bash_aliasesに記載した(特にこだわりがなければ~/.bashrcでもよい)．
alias create-my-react-app='npx create-react-app --template file:/pass/to/cra-template-react-ts-hooks-minimum'
これで，create-my-react-app my-appでテンプレートを作成することができるようになった．
おわりに
エイリアスも含め，これによりサンプル実行が加速しそうだ．