これまでは、JavaScriptをCodeSandboxを使ってコネコネしてきた。
ここからは、いよいよReactに入っていくので、まずはReactの環境構築から。
Node.jsのインストール
これは、以前に実施済み。(npmもこの時にインストールされている。)
関連記事：
yarnのインストール
npmもyarnもパッケージマネージャーだが、yarnの方が高速でセキュリティが高いので、こっちもインストールしておく。
AWSの時にyarnのインストールも実施しているのだが、それからPCが新しくなっているので、今回新しいPCに対して、新規でインストールする。
コマンドはコレ↓
npm install --global yarn
yarnのバージョン確認
yarn --version 1.22.17
AWSの環境構築時にyarnのインストールでハマった過去記事：
Webpackerのインストール
AWSの時に、Rails環境を構築する際に、webpackerを導入しているのだけど、その時は「rails webpacker:install」コマンドでインストールした。
ということは、今回もReactのセットアップの時に一緒にインストールするのではないかと踏んでいる。(何ならBabelも。)
ので、ちょっとここでは何もしないことにする。
※ここでの、「webpackとbabelのインストール」の印象が、後でハマる原因になるとは、この時は思いもよらない。(↓の「ハマったこと」参照)
create-react-appのインストール
create-react-appとは、Reactでの開発環境を簡単に作ってくれるコマンドらしい。
Reactの開発に必要なパッケージやイロイロ揃ったプロジェクト環境をまるっと作成してくれる。(rails newコマンドみたいなものだと思う。)
これを使えるようにするために、create-react-appをインストールする。
コマンドはコレ↓
yarn global add create-react-app
2021/11/13 追記：
なんかReactの環境構築についていろいろ調べていたら、create-react-appのグローバルインストールは非推奨になったらしい！(もうインストールしちゃったよ！)
なので、公式README.mdに従って、とりあえずグローバルインストールしちゃったコマンドをアンインストールする。(公式README.mdから引用)
If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.
> yarn global remove create-react-app yarn global v1.22.17 [1/2] Removing module create-react-app... [2/2] Regenerating lockfile and installing missing dependencies... success Uninstalled packages. Done in 0.38s.
アンインストールできたっぽい。
npxコマンドを使えば、create-react-appコマンドをインストールしなくても、使える。
余談だが、npxコマンドは、
- ローカルパッケージ(node_modulesの.binの下)
- 環境変数PATH
- npmレジストリ
の順でコマンドを探してくれるので、パッケージがインストールされていなくても、3でWeb上から探してきて一時的にインストールして実行してくれるらしい。(しかも終わったら破棄してくれる。できるヤツだな。)
React環境を構築
create-react-appコマンドを使って、早速React環境を構築してみる。
npx create-react-app neco-project
ちなみに、プロジェクト名に大文字は使えないらしい。(NecoProjectっていうプロジェクト名にしようと思ったら、怒られたｗｗ)
プロジェクトを作るのはちょっと時間がかかる。(って言っても、せいぜい1分くらいだけど。)
こんな感じになったら、OK。
Reactを起動してみる。
neco-projectフォルダまで移動して、下記コマンドを打つ！
yarn start
ブラウザが起動するので、Reactの画面が出ていればOK。(終了はCtrl＋C)
ちょっと簡単すぎて、きっとほかにやることがあるんじゃないかと思ってすごく色々遠回りしたけど、これだけで基本のReact環境構築が終わり。
もちろん、この後で使いやすくするための設定はイロイロあるのだけど。
ハマったところ
「create-react-app すると、Reactの環境が簡単にできるよ！」の意味がよく分かっていなかった。(本当にこれで終わりだと思っていなかったｗ)
create-react-app が何をしてくれるのかよくわかっていなかったので、出来上がった環境を見て、webpackとbabelらしきものがないから後からインストールしてなくてはいけないのでは？と思ってイロイロ調べまくってしまった。
「react」「babel」「webpack」という検索キーワードの組み合わせがよくなかった。
これで出てきたサイトは、create-react-appを使わずに自力でReactプロジェクトを作成している例が多かったということに気づかなかった。
「create-react-app」「babel」「webpack」という検索キーワードで探すべきだったことに後から気づく。
webpackはバンドラー、Babelはコンパイラだから、React環境構築にはこの人たちが必要なんじゃないの？っていう頭がありすぎて、ぱっと見出来上がった環境に、webpackらしきものも、Babelらしきものも見当たらないから、自分でインストールしないといけないんじゃないかって思いこんじゃったんだよなぁ。(でも、今思えば、yarn start でブラウザが立ち上がる時点でちゃんと入ってるよね。溜息・・・)
node_modulesのなかに、ちゃんと両方入ってるじゃんって気づくのは、数日後でしたｗ
いや、こういうハマり方するとは思わなかったｗｗ
出来上がったReact環境の中身を見る
create-react-app コマンドで出来上がった環境はこんな感じ。
node_modules
インストールしたパッケージひと揃え入っている。(これはpackage.jsonがあれば、yarn installコマンドで再現できるので、GitHubには上げる必要はない。)
中身はこんな感じ。
わ～。いっぱいｗ
babelも入ってるわ・・・
バベルってやっぱりあのバベルの塔からとってるんかな。
コンパイラっていう役割を考えても、どう考えてもそうだよな。
そんで、バビロンてｗ
エンジニア界隈は、神様系というか、神話好きが多いのかな。全然関係ないけど、ケルベロス認証とかもめっちゃいいネーミングセンスだし。堅牢そうｗ
webpackもちゃんと入ってた。
あとで設定しようと思っているESLintも入ってる。
Prettierは入ってないので、後でインストールが必要な気がする。
webpackをパカっと開くと、package.jsonがある。
中を見ると、ザ・package.json っていう感じの内容。
プロジェクトの直下にも、package.jsonがあって、なんかシンプルだな～って思ってたけど、各モジュールのpackage.jsonは、そのモジュールの下にあるらしい。
public
静的なファイル群。(index.htmlが起点。)
src
主役たちの集まり。
JavaScriptのファイルやCSSなど。
.gitignore
Gitのバージョン管理対象外のファイルを指定するファイル。
ここに書かれているファイルはGitでは管理されない＝当然GitHubにも上がらない。
※ここに最初からnode_modulesが含まれている。
package.json
この内容に従って、依存関係を保ったまま、モジュールをインストール可能。
このファイルを共有しておけば、同じ環境で開発が可能になる。
README.mdとyarn.lockの説明は省略。
今回はとりあえず、ここまで。
ESLintとPrettierの設定は「React環境構築②～ESLintとPrettierの導入」で。
