Reactの環境構築

いつもyarn startで失敗してできなかったReactの環境構築
新しいノートパソコンを買ったので頑張ってみた記録

今回の流れはこんな感じです

1. Visual Studio Codeをインストール
2. Node.jsをインストール
3. yarnをインストール
4. create-react-appでReactアプリを作る
5. yarn startしてみる
6. yarn startできないエラーを解決する
7. もう一度yarn startしてみる

基本情報

OS：Windows 10

1. Visual Studio Codeをインストール

まずは以下リンクからVS Codeをインストール

インストーラは全部同意、他は何も気にせずok

2. Node.jsをインストール

以下のリンクからLTS版をインストール

ここのインストーラも同意、ok

インストール終わったらコマンドプロンプトで以下のコマンドを実行
バージョンが返ってくればok

$ node -v
v16.13.2

3. yarnをインストール

仕事ではnpmじゃなくてyarnを使ってるのでyarnにしたい！
ので以下のコマンドをコマンドプロンプトで実行

$ npm install --global yarn

完了したらコマンドプロンプトで以下のコマンドを実行
これもバージョンが返ってくればok

$ yarn --v
1.22.17

いったん環境構築は完了したので、アプリ作って動かしてみる

4. create-react-appでReactアプリを作る

Reactのひな型作ってくれるコマンド使ってアプリ作ってみる。
フォルダ名は「helloworld」
とりあえずCドライブ直下に「Program」フォルダを作ってそこに作る

まずはフォルダに移動

$ cd C:\Program
$ Program> 

移動出来たら以下のコマンドを流す

$ Program> npx create-react-app helloworld

うまくいけばProgramフォルダの中にhelloworldフォルダができる

5. yarn startしてみる

アプリ作れたので、動かしてみよう

VS Codeでさっきのhelloworldフォルダを開く
VS Codeのターミナルを開いて、以下のコマンドを実行

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

うまくいくはず、、だけどやっぱりエラーが出た…

6. yarn startできないエラーを解決する

いつも詰まっていたところにたどり着きました…
ですが今回はあきらめません

色々調べて今回参考にしたのはこちら

原因は「セキュリティ上の理由で、スクリプトの実行が無効化されている」ためでした

ここからはWindows PowerShellの出番です
下の虫眼鏡でWindows PowerShellを検索し、右クリックして「管理者として実行」
まずは権限が何か確認します

PS > Get-ExecutionPolicy
Restricted

Restrictedは「全スクリプト実行不可」という意味だそうです
なのでここをRemoteSignedに変えます
意味は「インターネット経由でダウンロードしたスクリプトのみ証明書を要求」

PS > Set-ExecutionPolicy RemoteSigned

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

ここは「y」を入力してEnterでok
最後に代わっているかを確認

PS > Get-ExecutionPolicy
RemoteSigned

無事変わりました！

7. もう一度yarn startしてみる

ここまでくれば大丈夫でしょう！
ドキドキしながらVS Codeでyarn startをしてみると、、、
実行できました！！！
やった！！

感想

今回環境構築からアプリの実行までがうまくできたのは、「Set-ExecutionPolicyコマンドを実行するのはコマンドプロンプトではなくWindows PowerShellだと気づけたこと」です！
実行するアプリの違いで詰まってたとはお恥ずかしい…
教訓としてきちんと覚えておこうと思います

【参考】