🦁

React.jsの環境構築（windows編）

2022/03/10に公開

JavaScript

React

環境構築

tech

こんにちはフロントエンジニアのかげつぐです。
今回は現在流行りのJavaScriptのライブラリであるReact.jsの環境構築について説明したいと思います。
この記事を読めば基本的には難なくReactの環境構築ができるようになると思います。環境構築ではコマンド操作を必要としますが、不安にならず一緒に環境構築をしていきましょう！！

必要なソフト

Windows Terminal
VSCode

インストールするパッケージの説明

まず、今回の環境構築でインストールするパッケージですが

①nvm-windows → これはNode.jsのバージョン管理ツールです

②Node.jsのインストール→ イベント化された入出力を扱うサーバサイド JavaScript環境

③npm → Nodeのパッケージマネージャー

nvm-windowsをインストールする

nvm-setupをインストール

まずは、https://github.com/coreybutler/nvm-windows/releases/ にアクセスしてnvm-setup.zipをインストールしてください。
そのあと、zipファイルを解凍し、nvm-setupを開いてください。

開くと下のような画面に移りますが、"I accept the agreement" を選択して、Nextを押してください。

nvm-windowsがインストールされているかの確認

Windows PowerShellを開き、nvm -v と入力してみてください。

PS C:\Users\kagetugu> nvm -v
Running version 1.1.9.

このように表示されればnvmのインストールは完了です。

もし、エラーが出てしまった場合

管理者権限が付与されていないことが考えられますので、Windows Terminalを 「管理者で実行」 で開いて下のように Set-ExecutionPolicy RemoteSignedと入力し 「はい」 を実行してください。すると管理者権限が付与されるかと思います。ここでは詳しくは話しませんが、Set-ExecutionPolicyとwebで検索してもらえるとわかるかと思います。

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

Node.jsをインストールする

この記事を書いている時点では、Node.jsの推奨バージョンは16.14.0であるので、こちらをインストールしていきます。推奨版の確認方法はNode.jsのホームページにアクセスして 「推奨版」 の部分を確認してください。

コマンドで推奨版のインストール

では、さっそくWindows Terminalを 管理者権限 で開いてNode.jsのインストールをしていきましょう！
PowerShellで nvm install v16.14.0（推奨版のバージョン） を入力して実行をします。下のようになれば問題なくインストールされています。

PS C:\Windows> nvm install v16.14.0
Downloading node.js version 16.14.0 (64-bit)...
Extracting...
Complete

Installation complete. If you want to use this version, type

きちんとインストールされているかを確認します。nvm ls とコマンドを入力してください。すると下のようになるかと思います。

PS C:\Windows> nvm ls
   16.14.0

次にインストールしたバージョンを指定します。 node use v16.14.0（使うバージョン） をTerminalで入力してください。下のように Now using node v16.14.0 と表示されれば、nodeが指定したバージョンで利用されていることになります。

PS C:\Windows> nvm use v16.14.0
Now using node v16.14.0 (64-bit)

最後に自分のパソコンがNode.jsを利用しているかを確認します。Terminalで（ ここでは管理者として実行してなくても問題ないです ） node -v と入力してください。下のようにバージョン名が出れば自分のパソコンがNode.jsを利用していることを確認できます。

PS C:\Windows> node -v
v16.14.0

以上でNode.jsのインストールまで完了しました！お疲れ様です！

npmをインストールする

実は、nvmでNode.jsをインストールするとnpmも一緒にインストールしてくれます。ですのでこれといった操作は特に必要ないです。一応、確認だけしておきましょう

npmがインストールされているか確認

Terminalで、 npm -v と入力してください。すると下のように現在使われているnpmのバージョンが表示されると思います。

PS C:\Users\kagetugu> npm -v
8.3.1

React.jsの環境構築

ファイルの用意

適当なフォルダを用意します。今回は React_test というフォルダをデスクトップに作成します。作成したら、そのフォルダをエディタで開きます。エディタは自分のお好きなもので構いません自分はVSCodeというエディタを使用します。

エディタのターミナルでコマンドの実行

React_testフォルダに対してエディタのターミナルで
npm create vite@latest とコマンドを入力します。
今回は React_test 内に vite-project というフォルダを作ります。

PS C:\Users\kagetugu\Desktop\React_test> npm create vite@latest
√ Project name: ... vite-project
√ Select a framework: » React
√ Select a variant: » TypeScript

構築が成功するとすると下のようにプロジェクトを始めるためのコマンドが表示されるかと思います。

Done. Now run:

  cd vite-project
  npm install
  npm run dev

Reactを立ち上げる

エディタのコマンドで cd vite-project（自分が指定したプロジェクト名） と入力し、vite-project ファイルに移動します。cdとは Change Directory の意味です。コマンドでのファイル移動の操作は別途調べてください。

PS C:\Users\kagetugu\Desktop\React_test> cd vite-project

移動出来たら npm install とコマンドを入力してください。すると依存パッケージがインストールされるかと思います。
この時に react-dom や react がインストールされます。

PS C:\Users\kagetugu\Desktop\React_test\vite-project> npm install

依存パッケージがインストールできたら npm run dev とコマンドを入力してください

PS C:\Users\kagetugu\Desktop\React_test\vite-project> npm run dev

このような画面が出れば、React の環境構築は成功です！

最後に

これで React の環境構築に関しては終わりとなります。お疲れさまでした！
環境構築でつまずく人が多いと思いますが、こちらの記事ですべてカバーできていると思います。ぜひ皆さんも React を使って web アプリケーションを作ってみてください！
これからも、React にある機能の説明などをあげていこうと思っているのでそちらもぜひ目を通していってください！