はじめに
Windows10 64bitでTypeScriptでReact Appを生成するまでの環境構築方法をまとめておきます。
Chocolateyをインストール
Windows用のパッケージマネージャーChocolateyをインストールします。
ソフトウェアのインストールと更新、削除が簡単にできるようになります。
Chocolatey Software | Installing Chocolatey にあるコマンドを管理者権限のPowerShellで実行します。
インストール終了後は、バージョン確認出来たらOKです。
> choco -v
nodistのインストール
nodistを使ってNode.jsをバージョン管理します。
Chocolateyを使ってnodistをインストールします。
管理者権限のコマンドプロンプトで実行します。
インストールしてバージョン確認します。
> choco install -y nodist
> nodist -v
開発時はLST推奨版のバージョンで開発を行うことが多いと思います。
Node.jsからLST推奨版のバージョンをインストールします。
(2020/10/25時点では、v12.19.0が最新でした)
> nodist + 12.19.0
globalで使用するバージョンを指定しないとデフォルト指定されずインストールしたのに何故か古いバージョンで動いているといったことになるため注意が必要です。
Node.jsのバージョンを確認します。
> nodist global 12.19.0
> node --version
Windowsで、Chocolateyとnodistで、バージョン切り替え可能なNode.jsの環境を構築する - Qiita より
yarnのインストール
JavaScriptのパッケージマネージャyarnをインストールします。
npmよりインストール速度が速く厳密にバージョンを固定出来るのが特徴です。
バージョンはyarn.lockファイルに記録されてインストール時に同じバージョンがインストールされます。
検索するとnpmがいまだに多いので、 npmとyarnのコマンド早見表 - Qiita 見ながらコマンド実行しています。
Chocolateyを使ってyarnをインストールします。
管理者権限のコマンドプロンプトで実行します。
インストールしたらパスを指定しておきます。
> choco install yarn
> set Path = %Path%;"C:\Program Files (x86)\Yarn\bin"
コマンドプロンプトを再起動してバージョン確認します。
> yarn -v
このあとCreate React Appを使うのにnpxを使いたい場合、
nodeistからだと自動でnpxがインストールされない(さらにnpmが古い)ため個別でインストールします。
今回は、v6.14.8をインストールしました。
> nodist npm global 6.14.8
> npm install -g npx
Chocolateyからyarnをインストールする手順 - Qiita より
React Appの生成
Create React Appを使ってReact Appを生成します。
npxは、npmパッケージを実行するコマンドです。
ローカルにインストールされていないコマンドの場合は、最新版をダウンロードして実行した後、そのコマンドのパッケージを削除してくれます。
詳しくは、npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう - Qiita 参照。
npx create-react-app hello-world --template typescript
因みにnpmのバージョンを挙げていないとCreate React Appを使う時に以下のエラーが出ます。
npm ERR! cb.apply is not a function
npm ERR! A complete log of this run can be found in:
公式ドキュメントによるReact + TypeScriptのスタートガイドは以下です。
microsoft/TypeScript-React-Starter: A starter template for TypeScript and React with a detailed README describing how to use the two together.