WindowsでReactの開発環境を整える

#はじめに
WindowsでReactの開発環境を作ってみたところ、いくつかエラーが出たのでその手順と解決法を残します。
使用した環境は以下の通り

• Windows10
• Node.js v14.8.0
• NPM v6.14.7
• Windows パワーシェル（VScode経由）

#手順

1. Node.jsのインストール
2. create-react-appのインストール
3. プロジェクトを作成してHello worldしてみる

#おまけ

• ESlintを設定する
• ディレクトリ構成のかんたんな説明

1.Node.jsのインストール

まずはNode.js公式サイトからダウンロードし、Node.jsをインストールします。
ターミナルで以下のコマンドを打ってVersion情報が表示されればインストール成功しています。

Node.jsのVersion情報を確認する

node -v

Node.jsがインストールされていればnpmも使うことが可能になります。

2.create-react-appのインストール

create-react-appをグローバルインストールします。

create-react-appをインストールする

npm install -g create-react-app

ここまでで準備は完了です。

3.プロジェクトを作成してHello worldしてみる

プロジェクトを作成したいディレクトリに移動し、プロジェクトを作成していきます。
多くのドキュメントではプロジェクトを作成するのに以下のコマンドを見かけると思います。

Reactのプロジェクトを作成する

create-react-app <プロジェクト名>

Windowsでは、インストールしただけでは上記のコマンドにパスが通っておらず使う事ができないことがあるようです。
解決方法は以下

1. パスを通す
2. npxコマンドを使う

今回はnpxコマンドを使う方法で作成していきます。
(以下サンプルのプロジェクト名をhelloworldとして作成します。)

Reactのプロジェクトを作成する

npx create-react-app helloworld

これで、カレントディレクトリにhelloworldというディレクトリが作られ、プロジェクトの作成が完了します。

パスの通し方については現在調査中です。

プロジェクトが作成できたら、早速動かして行きます。
helloworldディレクトリに移動し、仮想サーバー上でWebアプリの動作を確認します。

Webアプリをプレビューする

cd helloworld
npm start

以上のコマンドを打つと、規定のブラウザが起動してWebアプリの動作を確認することができます。
他のブラウザで見たい場合はlocalhost:3000にアクセスすることで見ることができます。
終わる場合はターミナルでCtrl + cを押して終了します。

以降、srcディレクトリ内のApp.jsを編集することでWebアプリを作っていきます。

おまけ

ESlintを設定する

create-react-appを使用してプロジェクトを作成すると、ESlintがモジュールに追加された状態になっています。
なので、設定を行うだけでESlintが使用可能になります。

ESlintの設定ファイルを作成する

npm eslint --init

最後の質問、「Would you like to install them now with npm?」でYesにするとうまく動かなかったので、Noにしています。
ここで改めてインストールしてしまうと、競合するのかもしれません。

Compiles successfully!と表示されたら初期化が完了します。
画像では設定ファイルをJavaScriptにしているので.eslintrc.jsというファイルが作成されます。
環境に合わせて設定を追加してください。

ディレクトリ構成のかんたんな説明

以下は自分のための備忘録としての、ディレクトリ構成のかんたんな説明です。

<プロジェクト>
　　　L ./node_modules　（インストールされているモジュールが入ってる場所。）
　　　L ./public　（テンプレートのHTMLや画像が入っています。）
　　　L ./src　（アプリのソース等、ここのファイルを編集してアプリを作成していきます。）
　　　L .eslintrc.js　（ESlintの設定ファイル）
　　　L .gitignore　（Gitで追跡対象にしないファイルを設定します。）
　　　L package.json　（インストールされているモジュールについての設定ファイル）
　　　L README.md　（Read meファイル）
　　　L yarn.lock　（環境によっては無いこともある）

この他、ビルド後のデータを格納するディレクトリがあります。

#最後に
create-react-appを使ってReactの開発環境を作ると、すでに必要なモジュールやファイルが用意されているため素早く開発を始められます。
最初はCDNを使ってみようと思ったのですが手こずってしまい、結局こちらのほうが早くReactの勉強を始めることができました。