単純なReactプロジェクトを簡単に作るためにcreate-xxx-appというツールを作ったので紹介します。
create-xxx-app
create-xxx-app はテンプレートからNode.jsプロジェクトを作るためのパッケージです。
私が個人的に使うために作ったものですが、一応npmにpublishしているので簡単に解説しておきます。xxxという文字の並びにはエロい意味があるらしいですが、気にしないでおきます。
Node.jsがインストールされた環境で以下のコマンドを叩きます。
npx create-xxx-app プロジェクト名 --template react
これでReact開発環境の整った「プロジェクト名」フォルダが出来上がります。今のところ対応しているテンプレート名は「react」のみです。
また、「react」テンプレートも暫定状態でpublishしています。今後大きな変更が入る可能性もあります。
create-xxx-appは個人でとりあえず使うために作ったので、まだエラーハンドリング等もしていません。このあたりは今後の課題になります。macOSでしか動作確認してないので他のOSで動くかもわからないです。
create-xxx-appの仕事
create-xxx-app（CXA）は以下の動作をします。
- テンプレートファイルをコピーする
- 依存関係をnpm installする
以上で全てです。
なぜcreate-react-appを使わないのか
create-react-app（CRA）は素晴らしいツールです。 当時、ネットには様々な「React構築ベストプラクティス」が溢れ煩雑になっていました。 そんな中でCRAはReact開発環境のセットアップを容易にし、多くの人々を導いてきました。
一方でCRAは、複雑な物事をまるでシンプルに見せかけるために、様々な"おせっかい"が混入しています。
特に react-scripts 周りはほぼブラックボックスとなっており、プロジェクト自体がここに依存してしまいます。
ejectすることでフラットなプロジェクトに変換できるという脱出ハッチは用意されてはいるのですが、水面下でもがくために難解な構造をしたスクリプトや設定ファイルを展開されたところで、何をすればいいのかよくわからんというのが正直なところです。
また、ejectしたところでwebpackやjestに強く依存した部分については変わりません。ひと昔前ならwebpackでもよかったのですが、最近では選択肢も増えてきたので自由に選びたいところです。
あとは単純な話として、公式のテンプレートの出来が良くありません。親切のために様々な便利コードが書かれていたり、使いもしないアセットも同梱されています。プロジェクトを始めるときに、まずはこれらのお節介をひとつひとつ丁寧に削除していく必要があります。カスタムテンプレートを作るという手もあるのですが、結局CRAの手の中で動くことには変わりありません。
CRAだけでなく、 create-snowpack-app や他の create-*-app 系でも同じです。いろんなところから設定ファイルをextendsで引き摺り回し、裏側は隠蔽され、膨大な親切サンプルファイルが出来上がります。
Node.jsのプロジェクト構成というのはnode_modulesとソースディレクトリのカオスを除けば、追えないレベルに肥大化することはそうそうなくて、いろんな箇所に依存して継承して隠蔽してとする意味はあまりないです。手元のエディタのみで一覧できなくて死ぬほど困ることの方が多いです。
CXAは何を達成したいのか
CXAのやっていることは単純なファイルコピーと npm install のみです。おわり。
でも私が本当に必要だったものってこれなんです。高度な抽象化とか親切なサンプルコードとかじゃなくて、コピーとインストールがほしかった。単に最初の手間を省くだけでいいのに、ゆりかごから墓場まで面倒見てくれるようなお節介スクリプトを同梱してくれなんて一度も頼んでない。でもどれだけ探してもこれを達成してくれるものが出てこない。じゃあ自分で作っちゃおうという動機です。
プロジェクト構築ツールはプロジェクト構築を終えたら役目を終えてほしいというのが個人的な思いでした。プロジェクトの根幹にまで食い込むのであれば、それはもはやただの呪いじゃないですか。
yarn create でいいじゃんと思うかもしれませんが、それはyarnが標準になったら考えます。
cxa-template-react
reactテンプレートの構造も単純にしています。まだWIPですが、リポジトリを見ていただければ雰囲気は掴めるかと。
https://github.com/kotofurumiya/cxa-template-react
主な依存パッケージは以下の通りです。
- react
- react-dom
- typescript
- esbuild
- browser-sync
令和にもなってbrowser-syncかよって思うかもしれませんが、このあたりはとりあえず突っ込んだだけです。
ソースコードは以下のもののみです。
-
src
- index.tsx
- App.tsx
-
public
- index.html
- style.css
-
tools
- devserver.js
中身もシンプルにしてあります。
import React from 'react';
export const App = () => {
return <div>Hello React</div>;
};
正直borwser-syncも過剰だと思っていて、これを削るかもまだ悩んでいます。
CXAで作られたアプリのカスタマイズは簡単です。自動リロードが不要ならbrowser-syncをアンインストールするだけでいいし、jestが欲しかったらインストールするだけ、prettierがいるなら自分で入れる。それで終わり。CXAで作られたアプリはCXAがなくても独立して生きていけます。ejectも不要です。単なるひとつのNode.jsプロジェクトとして存在します。
カスタムテンプレート
CXAはReactに限らず一般的なNode.jsプロジェクトの構築に使用することができます。テンプレートを cxa-template-templatename の命名規則でnpmにpublishすれば、 npx create-xxx-app prjname --template templatename でプロジェクトを作成できます。
ファイルの構造とかフォルダの意味とかはドキュメントがまだできていないので、cxa-template-reactを見て雰囲気で察してください。
これからの話
まだ作りが雑なんでちゃんと詰めていこうと思います。普通に使うだけで当然の権利のようにUnhandled Promise Rejectionが出てくる。
また、テンプレートの置き場はnpm registryにしか対応していませんが、fileやgitにも対応できればいいな程度に考えてます。
テンプレート側もちゃんと考えていこうと思います。React、シンプルにやりたいですからね。