はじめに 🥑
X.1 でリードエンジニアをやっています osin です。弊社は主に新規受託開発を生業にしており、フロントエンドのフレームワークは React を使用しています。
新規開発がメインということもあり、環境構築にあてる時間は他の企業に比べたら多いと思います。
そこで、環境構築を効率化しようと思い自作の React テンプレートを用意するに至ったわけですが、せっかくなら npm にテンプレートを公開して、下記のように使用できるようにしようと思ったのが本稿の執筆の発端です。
下記のコマンド一発で環境構築の 9 割が済むとしたらだいぶスマートではないでしょうか？
$ yarn create react-app <app_name> --template x-point-1-client-template
意外と簡単にできたので備忘録も兼ねて紹介します。
Create React App の仕組み 🛰️
Create React App では、cra-template-* という prefix を持つ npm ライブラリを検索し、ヒットしたテンプレートを使用するという仕組みになっています。
なので、下記のコマンドを叩くと、cra-template-hoge という npm ライブラリを検索します。
$ yarn create react-app <app_name> --tempalte hoge
--template オブションになにも渡さなければ cra-template を、 --template typescript の場合は cra-template-typescript を使って、React アプリの初期化をおこないます。
サードパーティ製の React テンプレートも数多くあります。デフォルトで Tailwind CSS が入っていたり、Redux が入っていたりするテンプレートもあります。
自作 React テンプレートの作り方 🍳
1. テンプレートとなるアプリを作成する
まずは好きなテンプレートを使って、React アプリを作成します。
$ yarn create react-app app-template --template typescript
そこにお好みの設定を追加してください。
参考までに弊社ではざっくり下記のような設定をしています。キーワードだけ列挙します。
- Aspida
- Craco
- ESLint
- Headless UI
- Husky
- Hygen
- Jest
- Mock Service Worker
- Prettier
- React Hook Form
- Tailwind CSS
- TanStack Query
- Zod
2. ディレクトリ構造を修正
React テンプレートは下記のような構造である必要があります。（公式ドキュメントを参照）
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)
注意点だけ書いておきます。
template から node_modules を削除する
template フォルダには先ほど作成したテンプレート用の React アプリをそのままコピーすればよいです。
このとき、./node_modules はテンプレートには含まないよう消しておきましょう。その他、./coverage や yarn.lock なども消しておくと良いと思います。
README.md は 2 種類用意する必要がある
README.md は npm パッケージ用 (./README.md) と、テンプレート用(./template/README.md)で 2 種類用意する必要があります。
.gitignore は gitignore にする
通常の .gitignore と区別するため、gitignore に名前を変更します。
template.json は template で囲む
template.json はテンプレートにおける package.json です。名前を変更し、JSON の内容も修正が必要です。
とは言っても template で囲むだけです。
{
"template": {
"dependencies" : {
...
},
...
}
}
3. npm パッケージとして公開
npm パッケージの公開手順については、公式ドキュメントは他の記事に譲ります。
必要に応じて npm アカウントを作成して、npm adduser, npm publish をすれば完了です。
こちらの記事(3 分でできる npm モジュール - Qiita) を参考にすると、3 分で npm に公開できました。
おわりに 👋
良い React ライフを！
Discussion