初心者向け!WindowsでReactNative入門~環境構築編~ ①Node.jsインストール

f:id:enia:20210920164331p:plain

えにあです。 今回からWindowsでReactNative入門~環境構築編~をスタートしていきます。
ReactでもReactNativeでも、まずはNode.jsが必要ですのでインストールしていきます。

目次

前回まで

経緯についてはこちら。
enia.hatenablog.com

Node.jsのインストーラをダウンロードする

まずは以下の公式ページにアクセスしてNode.jsのインストーラをダウンロードしていきます。 nodejs.org

赤い枠の位置をクリックするとダウンロードが始まります。(サイズ29.1MB) f:id:enia:20210920165942p:plain

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

ダウンロードが完了したらインストーラを実行します。
セットアップウィザードが起動したら、Nextを押します。
f:id:enia:20210920170036p:plain

利用規約に同意して、Nextを押します。
f:id:enia:20210920170137p:plain

インストールディレクトリを指定してNextを押します。デフォルトのディレクトリでよいでしょう。
f:id:enia:20210920170206p:plain

カスタムセットアップの設定です。デフォルトのままNextを押します。
f:id:enia:20210920170653p:plain

PythonやVisualStudio Build Toolsなどを一緒にインストールするか聞かれています。
チェックをいれてNextを押します。
任意項目ですので不要であればチェックしなくても構いません。
f:id:enia:20210920170845p:plain

Installを押します。
f:id:enia:20210920171049p:plain

インストールが始まります。30秒くらいで完了します。
f:id:enia:20210920171325p:plain

インストールが完了しました。Finishを押します。
f:id:enia:20210920171437p:plain

関連パッケージをインストールする(任意)

途中でPythonVisual Studio Build Toolsをインストールする設定をいれた場合、以下のコマンドプロンプトが起動します。続行するために何かキーを押します。
f:id:enia:20210920171537p:plain

画面が切り替わります。
f:id:enia:20210920171719p:plain

PowerShellが起動してインストールが始まります。私の環境では15分ほどかかりました。インストールが完了したEnterキーを入力します。
f:id:enia:20210920173807p:plain

これでインストールは完了です。

インストールの正常性確認

nodeコマンドとnpmコマンドが使えるようになっているはずです。
Power Shellを起動してnode --version npm --versionを実行します。バージョン名が表示されれば正常にインストールされています。

PS C:\Windows\system32> node --version
v14.17.6
PS C:\Windows\system32> npm --version
6.14.15

追加インストールを行った場合はpythonもインストールされています。python --versionを実行して、pthonがインストールされていることを確認します。

PS C:\Windows\system32> python --version
Python 3.9.7
PS C:\Windows\system32>

Yarnのインストール

Yarnとは、主にJavaScriptで開発されたプログラム部品(モジュール)を管理するためのパッケージ管理システムの一つで、npmと互換性があります。

npmに比べ実行速度が高速です。パッケージの導入時に依存先のパッケージのバージョン番号を記録(yarn.lockファイル)するため、環境の再構築や他のコンピュータでの環境構築において正確に同じバージョンのパッケージを導入することができます。npmで許可されていたパッケージ導入時のコード実行が禁止され、パッケージの整合性をチェックサムで検証するなどセキュリティにも配慮しています。

2016年に米SNS大手フェイスブックFacebook)社が自社環境でのパッケージ管理のために開発し、BSDライセンスに基づいてオープンソースソフトウェアとして公開しました。

yarnのインストール手順は下記の公式サイトに記載されています。 classic.yarnpkg.com

PowerShellを管理者権限で起動してnpm install --global yarnコマンドでインストールします。

PS C:\Windows\system32> npm install --global yarn

> yarn@1.22.11 preinstall C:\Users\xxxxx\AppData\Roaming\npm\node_modules\yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

C:\Users\xxxxx\AppData\Roaming\npm\yarn -> C:\Users\xxxxx\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
C:\Users\xxxxx\AppData\Roaming\npm\yarnpkg -> C:\Users\xxxxx\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
+ yarn@1.22.11
added 1 package in 3.182s

yarnコマンドが利用可能になっていることをyarn --versionで確認します。

PS C:\Windows\system32> yarn --version
1.22.11

以上でyarnのインストールは完了です。

今回はここまで! 次回はAndroid Studioをインストールしていきます。