Create React Appはカレントディレクトリに直接展開できる
はじめに
Reactで手早くプロジェクトの雛形を作る際にCreate-React-Appを使用する例は多いです。Reactの開発をしているMeta社が開発しており、Reactチュートリアルでも仕様が推奨されています。
Node.jsを実行できる環境で以下のコマンドを実行することでReactのプロジェクトをすぐに生成できます。
npx create-react-app my-app
この例だとコマンドを実行しているディレクトリ直下にmy-appというディレクトリが生成されます。
今回、CreateReactAppを使ったプロジェクト生成でちょっとした発見があったためここに備忘録としてまとめておきます。
カレントディレクトリ内にプロジェクトを生成したい
プロジェクトを生成するときにプロジェクト名をコマンドの後ろにつけるのですが、ここである疑問が浮かびました。それはプロジェクトのディレクトリ内にプロジェクトを生成するのではなく、プロジェクトをカレントディレクトの中に展開できないのかというものです。
CreateReactAppの公式ドキュメントを見たところ全てプロジェクト名（my-app）を指定して作成していました。プロジェクト生成後にcd my-appとしてプロジェクトに移動してビルドする流れが紹介されており、カレントディレクトにプロジェクトの中身（my-app）の中身を展開するやり方の紹介がありませんでした。
そこで直感的にカレントディレクトリ（.）をしたところカレントディレクトリにプロジェクトを生成できました。
以下はreact-projectsという親ディレクトリにmy-appというプロジェクトを作成する例です。
# 先にプロジェクトを格納するディレクトリを作成して移動
$ mkdir my-app
$ cd my-app
# my-app内にReactプロジェクトを生成
$ npx create-react-app .
Creating a new React app in react-projects/my-app.
...
cd react-projects/my-app
npm start
Happy hacking!
上のようにすることでカレントディレクトリ（my-app）にReactプロジェクトの中身だけを作成できます。
# 場所
/Users/user/react-projects/my-app
# フォルダ構成を確認
$ tree -L 1
.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src
3 directories, 3 files
結果として/react-projects内でnpx create-react-app my-appしたのと同じになります。カレントディレクトリにプロジェクトファイルが配置されているため、続けてnpm startすると開発サーバーが立ち上がります。また、create-react-appのあとに続けて階層を指定すると作成先のファイル階層をさらに深くしたりと自由に作成先を指定できるので覚えておくと便利です。
# カレントディレクトリにreact-projects/my-react-app/appを作成
$ npx create-react-app react-projects/my-react-app/app
おわりに
今回、CreateReactAppでカレントディレクトリにプロジェクトを展開するやり方についてまとめました。DockerでReactの環境を作る際にディレクトリ構成で迷いがちだったので明示的にプロジェクトを指定して展開できるとわかりやすいですね。
公式ドキュメントに書いてないので、このやり方がレアケースかなとは感じておりますが誰かの参考になれば幸いです。
最後まで読んでいただきありがとうございました。
Discussion