create-xxx-app

作った。

ブログ記事： https://sbfl.net/blog/2020/08/11/create-xxx-app/
npm： https://www.npmjs.com/package/create-xxx-app

npx create-xxx-app プロジェクト名 --template react

でReact+TypeScriptのプロジェクト作られるはず。
インストールされるボイラープレート部分についてはいろいろ考え中なのでまだ中途半端です。後で大幅に変わる可能性があります。
でも一応動くReactのウェブアプリ作れるよ！

ちなみにxxxという文字の並びには英語圏ではエロい意味があるらしい。後で知った。

読みたくないから短くまとめろ

create-react-appつらい
- 縛りきついから入れた瞬間にejectしたくなる
- eject後のファイルが意味不明すぎて解読するより自分で始めから構築した方が早い
でもcreate-react-app捨てて生きていけない
- 手動構築だるい！create-react-app無しの時代には戻れない！
だから新しいツール作ったよ
- わりとニッチ向け
- ボイラープレートをコピーしてnpm installするだけ
- create-react-appと手動構築の中間ぐらいの存在

create-react-appつらい問題

create-react-app（CRA）、最初は便利だなーって思うんですけど、だんだんとブラックボックス化された部分に不満が溜まってきます。
あれができないとかこれができないとか、変なところでエラー出るとか、やり方は存在するけど遠回りとか。重要な部分を隠蔽しないでほしい。
たまにならいいけどほぼ毎プロジェクトで不満出る。公式的には不満あるならejectすりゃいいじゃん的な雰囲気を放ってますが、ejectするとwebpackの闇を煮詰めたようなファイルが出力されます。
これを解析するよりも自分で初めから環境構築した方が早い。

それに加えて同梱されてる初期ファイルが邪魔。ServiceWorkerいらねえ場面とかCSS Module使いたくない場面とかいっぱいある。カスタムテンプレート作るの面倒だから毎回ちまちま削除してる。

じゃあお前はCRA無しで生きていけんのって言われたら生きていけない。webpackの設定ファイル書きたくないしnpm install なんちゃらかんちゃら @types/ほんにゃら を打ち込みまくるのもつらい。もう完全にCRAに飼い慣らされてる。

カスタムテンプレートという手もあるけど、それも結局はCRAの手の上で踊るだけ。同じ結末になる。

それならお前はどうしたいのって言われたら別にどうもしたくなく、白馬の王子様がなんかうまい感じに助けてくれるの期待してました。

結局何が欲しいんだよ

結局自分は何が欲しいのかよくわからんまま半年ぐらい経過しました。CRAには不満。じゃあどうしてほしいのって聞かれると答えられない。どうしようもねえ。

でもやっぱり npm install アレコレソレ @types/ドレ を打ち続ける日々には辟易してましたし、CRA使うと後で死ぬほど苦労するという経験則だけはたまってます。単純なReactアプリにnext使うのはなんか違うという気分もある。

snowpackとかも使ってみたいんだけど、create-snowpack-appの公式テンプレートの出来がかなりアレ。変なところから設定をextendsしてるから設定ファイルの中身をサクっと追えない。自分はどこに向かえばいいんだ。

もうcpとnpm installだけでよくないか

自分がReactプロジェクトを作るときによくやってた作業について考えてみると、結局コピーとnpm installしかしてない気がしてきました。tsconfig.jsonをどっかからコピーしてきてちょっといじって、reactと@types/reactと入れて、みたいなのの繰り返し。

じゃあもうここの部分だけ自動化してあとは手動でやれば良くね？

シェルスクリプトだとどこに置くの問題とか発生するし、ボイラープレートリポジトリ作ってもいちいちcloneするのすら面倒。yarn createは好きではないし、じゃあもうここツール化しちゃえばいいんじゃね？って思いつきました。npxで叩きたいからどこからでも使えるようにnpm publishしました。

create-xxx-appの誕生です。

正直なところとしてはcpしてnpm installしてくれればあとは勝手にやるんですよ。jest欲しかったら自分で入れるしeslintの設定欲しかったら自分で書く。とりあえずプロジェクト作る最初のcpとnpm installだけしてくれればいい。一生面倒見てくれる献身的なreact-scriptsとか完全に不要で、コピーとインストールだけしてくればそれでよかった。プロジェクト構築ツールはプロジェクト構築終わったら存在が完全に消えていてほしいという願いです。痕跡を残さないでほしい。

cxa-template-react

--template react で使うテンプレートはこんな感じでpublishしてあります。

中身はここ。

中身見ると（2020/08/12時点では）reactとesbuild入れてbrowser-syncでグルグル回してるだけ。
ブラックボックス化された部分は作られないし、令和にもなってbrowser-sync使ってるのが丸わかりだし、変更入るたびにフルビルドが走るtools/devserver.jsのクソコードがフルオープンになってます。
これだよこういうの求めてたんだよ（自画自賛）。

create-xxx-appで作られたプロジェクトは簡単にカスタマイズできます。だってフォルダ作ってnpm installしてるだけだもん。browser-syncいらなかったらuninstallすれば終わるし、prettierほしかったらinstallすれば動く。

カスタムテンプレート

cxa-template-templatename の命名規則でpublishすれば npx create-xxx-app prjname --template templatename で取ってこれます。テンプレートパッケージのフォルダ構造とかはcxa-template-reactを見てパクってください。

ちなみにReactには依存してないので任意のNode.jsプロジェクトを作れます。

さいごに

CRAは素晴らしいけど、現実で使おうとすると割と結構いろんな問題出てきます。CRAは目的にマッチしないけど手動でやるのは嫌って人向けのツールがcreate-xxx-appです。

「CRAつらいけど手動でやるのはな〜」みたいな人がいたらぜひ使ってみてください。まだエラーハンドリングとかもろくにできてないので環境によっては動かないとかもあるかもですが、よろしくお願いします。