「create-react-app」を用いてReactの環境構築を行う5つのステップ（windows版）

はじめに

初めてReactに挑戦するときにまず躓くのは環境構築（と言われています）
特にWindowsだと予期せぬエラーに出くわすことがよくあるので。
Windowsユーザーの助けになればと思って書いたのでよかったら。

目次

• 作業環境の確認
• 環境構築を行う5つのステップ

作業環境

当たり前ですが「環境（前提条件）」が異なれば「方法」も異なるのでご注意を。

ホストOS : windows10 pro
CLIツール : Powershell（今回はこれ）

環境構築までの5つのステップ

環境構築が出来るまでには、大きく分けて5つの工程があります。

① Node.jsのインストール

まず公式から「LTSのwindowsインストーラー」をダウンロードする。

Node.jsのバージョンには2つのものがあります。

1つは「LTSバージョン」です。この「LTS」とは「Long-Term Support」の略で長期間サポートされることを意味します。今回は、これから新たにNode.jsを利用するのであればなるべく長期間安定して使えたほうが良いということで「LTSバージョン」の方を使うように推奨しています。これは通常、偶数のバージョンが当てられます。（例 v12.14.2）

もう1つは「currentバージョン」です。これは短期間のサポートしかしない代わりに新しい機能などを積極的に盛り込んだバージョンのことを指します。ただし半年ほどでサポートが終わってしまうので常にバージョンアップし続ける必要があります。通常は奇数バージョンが当てられます。（例 v11.14.2）

インストールして起動すると「Welcome～」という画面が表示される。
その後はデフォルト設定のまま「右下のNextボタン」を連打して何も問題は無い。

ダウンロード出来ているかどうかは以下のコマンドで確認できる。

> node -v
v12.14.2

> npm -v
6.13.4

npmは「Javascriptのパッケージ管理ツール」です。Javascriptの様々なソフトウェアを簡単なコマンドでのインストールやアップデートが可能になります。このnpmはNode.jsというプログラムに標準で組み込まれているのでNode.jsをインストールすると自動的にnpmもインストールされます。

バージョンはSemver (Semantic Versioning) という規則に則った3つの数字で構成されている。上に記したように「.」で区切られた3つの数字が確認できたら次へ進む。

② create-react-appのインストール

次に以下のコマンドを入力し「create-react-app」をインストールする

> npm install -g create-react-app

create-react-appは「React.jsアプリを素早く作成するCLIツール」です

Reactは環境構築をするのが非常に面倒なのですが「create-react-app」を使うことで「BabelとWebpackが標準実装された環境」を作ることが出来るので非常に便利。GOD。

③ Powershellの実行ポリシーの確認

React公式ドキュメントではこのタイミングで
「create-react-app hello-world」をコマンド入力するように書かれています。

しかしPowershellの場合「実行ポリシー」をコマンドで確認する必要がある。
これは以下のコマンドを入力して確認する。

> Get-ExecutionPolicy
Restricted

上記のように「Restricted」と結果が出力されているまま「create-react-app hello-world」とコマンド入力をしてしまうと以下のようなエラー文が出る。

> create-react-app hello-world
create-react-app : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\Owner\AppData\Roaming\npm
\create-react-app.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.co
m/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ create-react-app hello-world
+ ~~~~~~~~~~~~~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException

なので「実行ポリシー」の権限を変える必要がある。先に答えをいうと「Restricted」を「RemoteSigned」に変更すればうまくいく。下記コマンドで権限を変更する。

> Set-ExecutionPolicy RemoteSigned -Scope CurrentUse
実行ポリシーの変更
実行ポリシーは、信頼されていないスクリプトからの保護に役立ちます。実行ポリシーを変更すると、about_Execution_Policies
のヘルプ トピック (https://go.microsoft.com/fwlink/?LinkID=135170)
で説明されているセキュリティ上の危険にさらされる可能性があります。実行ポリシーを変更しますか?
[Y] はい(Y)  [A] すべて続行(A)  [N] いいえ(N)  [L] すべて無視(L)  [S] 中断(S)  [?] ヘルプ (既定値は "N"):

「変更しますか？」と聞かれるので「y」と入力すればOK。

そのあと実際にうまく設定が変更されたかどうかの確認を行う。

> Get-ExecutionPolicy
RemoteSigned

上記のように出力されればOK。次に進める。

④ Powershellを管理者権限で実行する

ここまでの作業は「管理者権限」でPowershellを開いていなくても問題ない。

しかし「create-react-app hello-world」をコマンド入力するときは「管理者権限」でPowershellを開いたうえで実行しないとPowershellに怒られちゃいます。

Error: EPERM: operation not permitted,

これは直訳すると「管理が許可されていない」ってことなので「管理者権限」でPowershellを開きディレクトリの階層関係を合わせた上で下記コマンドを入力する。

> create-react-app hello-world

上記コマンドを入力すると以下の結果が出力される。

Creating a new React app in C:\Users\Owner\Desktop\React\hello-world.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

（長いので省略）

Initialized a git repository.

Installing template dependencies using npm...
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

（長いので省略）

npm WARN rollback Rolling back readable-stream@2.3.7 failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Users\Owner\Desktop\React\hello-world\node_modules\watchpack\node_modules\fsevents\node_modules'
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 1 package and audited 931401 packages in 25.051s

58 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


Created git commit.

Success! Created hello-world at C:\Users\Owner\Desktop\React\hello-world
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd hello-world
  npm start

Happy hacking!

「WARN」の警告は出てるが最後に「Happy hacking」が表示された。
「Happy hacking」が表示されれば成功なのでOK。

⑤ サーバーを起動してみる

Powershell画面で下記コマンドを実行する。

> cd hello-world
> npm start

ブラウザが立ち上がり下記画面が表示されれば成功。

おわりに

やっぱりWindowsだと環境構築はひと手間かかりますね。
この記事を通して少しでも挫折する人が減ったら嬉しいです。

参考文献

React公式ドキュメント
React.js&Next.js 超入門
【初心者向け】NPMとpackage.jsonを概念的に理解する
PowerShellでスクリプトを実行するとセキュリティエラーになるときの対策