React Native for Windows 環境構築

2021-01-12 06:38 programming diary node.js

この記事が役に立ちそうな対象者

Windows でちょっとしたフォームアプリを作りたい。
開発にjavascript,Node.jsとか使いたい。
Node.js はバージョン管理したい。
今までに多少なりともそういった開発環境を自力で構築しようとした経験がある。

といった方になります。かなりニッチな層だけども( ﾟДﾟ)

というわけで、なんとなく Electron からの乗り換えを模索中。

MS謹製なので（と言っていいのか微妙な感じだけど）とりあえず Helloworld できるまで環境構築をした時の備忘録。

ネット上の情報が錯綜していてどれが正しいのかさっぱりわからない（どれも正しいのかもしれんけど）。 ChocolateryとかExpoとかReact Native Cliとか、選択肢というか個々の環境（好みともいう）によって構築の手順が変わるせいなのが問題な気がします。

まず根本的に「Unity」とか「Android Studio」みたいな「React Native for Windows」というオールインワンなパッケージがあるわけではなく（いや、componentというかpluginというか、そういうのはあるんだけどね）、「React」っていうライブラリを使ってUWPを作るためのツールやライブラリを総称して、ざっくりと「React Native for Windows」と呼んでいるんだと私は理解しました。

何が言いたいかというと「これをインストールすれば React Native で Windows用アプリ作れるよー」っていうのは無くて、windows上でいろんな開発環境を準備したら React Native で Windows用アプリができてしまうよー、って事です。

※Electronの記事でも書いてましたが、私はちょっとしたwindows用アプリが作りたいだけで、UWP的なアンドロイドでもmacosでも動く的なものを作ることは想定していません。なのでアンドロイドでもmacosでも動くアプリをbuildしたい人にはこの記事の内容では不足がある事に留意してください。

真夜中的「React Native for Windows」環境構築手順

OSとバージョン
Windows 10 Pro 20H2

※PowerShellでコマンド実行してますが、実際はほぼVScodeのターミナル上から実行しました。

設定＞更新とセキュリティ＞開発者向け Windowsの開発者モードをONに変更。
※MS公式の記事にTIPS的な感じで書いてあったので、どれくらい効果あるのか微妙(´・ω・`)

MS Visual Studio をインストール (2021年1月現在 version2019).
Visual Studio installer を使って.NET、UWP、C++、Node.jsの各workloadを追加。
※個別コンポーネントで、MSVC v141 - VS 2017 C++ ARM ビルドツール(v14.16)、MSVC v141 - VS 2017 C++ x64/x86 ビルドツール (v14/16)にチェックが入ってないならそれも追加。入ってないとbuild時に入ってないYO！と怒られる。

PowerShell のセキュリティポリシーを変更する。※VSCodeからではなく管理者権限のPowerShellで実行してください。

PowerShell:PowerShell Get-ExecutionPolicy
PowerShell Set-ExecutionPolicy RemoteSigned

windows パッケージマネージャ chocolatey をインストール。
※java8 SDKをインストールするためだけに使ってるので、すでに入ってるまたは手動でSDKをインストールする方は無視してください。

PowerShell:
iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

java8 SDK をインストール。

PowerShell:
choco install -y openjdk8

nodist(Node.js のバージョン管理ツール) をインストール
https://github.com/nullivex/nodist/releases
インストーラーを使って表示される指示に従ってインストールするだけ。

Node.js をインストールして好みのバージョンに切り替え

PowerShell:
nodist + 14.15.4
nodist global v14.15.4

nodistでNode.jsを追加するとnpmが更新されない。ある意味致命的な気がするけどそういうものだと割り切ります。
「あくまでもNode.jsのバージョンしか管理しねえんだよオレは( ﾟДﾟ)」的な感じなのかもしれません。

Node.jsのバージョンに対応するnpmのバージョンは以下のページで確認できます。
https://nodejs.org/ja/download/releases/

手動でインストールしてもOKですが、やはり誰かが致命的だと考えたのか、 npmのバージョンを整合させるためのコマンドが用意されています。

PowerShell:
nodist npm match

npx をインストール。npxはnpmに組み込まれている便利なコマンドで、ざっくりいうとローカルのライブラリを検索して、もしローカルにライブラリがない（インストールされていない）場合はネット上から適当に探して使ってくれるというものです。

が、先ほど書いた通りnodistでインストールした場合はnpmが追随しないので個別に入れないとだめなようです。

PowerShell:
npm install -g npx

さらに、npxはローカルに"npm"を内包しており、しかもそのバージョンが@5.x.xなので先ほどnodistで整合させたglobalの"npm"とバージョンの違いによる不整合（実行時にエラーを吐く）を引き起こします。

この問題を解決するため、npx配下の"npm"のバージョンアップを行います。
手順としてはnpxがのインストールされているディレクトリに移動して"npm"を上書きインストールします。
インストールするための"npm"のバージョンは使用するNode.jsに合わせるため先ほどのサイトで確認するか、npm -v などでglobalのnpmのバージョンを確認して同じものをインストールしてください。

PowerShell:
cd [nodist install path]\Nodist\bin\node_modules\npx
npm install npm@[node.js match npm version]

ここまでが環境構築手順となります。はっきりいってめんどくさいです( ﾟДﾟ)

テストプロジェクト（HelloWorld）生成

PowerShell:
npx react-native init hellornw --template react-native@^0.63.4
cd hellornw
npx react-native-windows-init --overwrite
npx react-native run-windows

npxを使ってるのでreactとかreact-nativeとかそのあたりはインストールしなくても勝手に見繕ってうまくやってくれます。
プロジェクト生成に使用するテンプレート（react-native）のバージョンは2021年1月現在は0.63.4でした。

windowsshellやらchoromeやらが立ち上がりますが、最終的に以下のような「Welcome to React」のwindowができれば成功です。

APIの読み込みに失敗したりしますが、メッセージ通りに何度かreloadすれば正常に読み込まれるはずです。

ここまで書いておいてなんですが、素直にVisualStudio使ってC#で作ったほうがいいんじゃないかって気がしてきてます(´・ω・｀)

Tweet If you feel like it, I would be happy if you could tweet it.

Next Post Previous Post