🥁

Node.jsにたまに触る程度の人向けのもろもろバージョンアップ手順

2022/05/26に公開

Node.js

環境構築

tech

これは何の記事？

Node.js環境にたまにしか触らない人間（ぼくのことです）が、バージョンアップのもろもろを行なえるようにする記事です。具体的には、下記の4つをバージョンアップさせます。使用OSはWindows10 (バージョン21H2 (OSビルド 19044.1706))です。

scoop
nvm-windows
Node.js
npm

本記事では最後にcreate-react-appまでやります。

使用ツール

Node.jsはインストール済みの状態です。下記ツールを利用しました。インストールから始める場合は、下の「参考」を参照してください。

scoop
nvm-windows

参考

WindowsでのNode.js環境構築は、erukitiさんの「WindowsでNode.js環境を構築する」記事を読んで行ないました。

ツールおよびNode.js（npm含む）のアップデート

上記ツール群と、Node.jsをアップデートする手順です。詳細をこれから書きます。
これらのコマンドはすべてPowerShell v7.2.4 (Windows Terminal)上で実行しています。

scoop update
scoop update nvm
nvm install latest
nvm use 18.2.0
npm update -g npm (3,4の工程を踏んだ場合は不要)
npx create-react-app my-app -template typescript

scoop自体をアップデートする

scoopを最新バージョンにアップデートします。

scoop update

scoopのwikiによると、引数を指定せずにupdateを実行することでscoop自体をアップデートできます。

nvm-windowsをアップデートする

nvm-windowsを最新バージョンにアップデートします。

scoop update nvm

scoop経由でインストールした個別のツールをアップデートする場合は、updateの引数に指定します。

インストールしたNode.jsを使用できる状態にする

インストールに成功はしたものの、この状態だとnode -vを実行できません。なので、Node.jsを認識してもらうためにコマンドを実行します。

nvm use 18.2.0

※コマンド実行時にエラー"exit status 1:"が発生する場合

Windows Terminalを「管理者として実行」します。その後再度コマンドを実行してみます。

ググったときのキーワード：「nvm use exit status 1」
実際に見た記事：「NVM for WindowsでNode.jsを上手くインストールできない」

npmをアップデートする

この項は、実際にコマンドを実行したときに書きます。。

nvm install latestで最新のNode.jsをインストールした場合は、npmも一緒に最新バージョンのものがインストールされます。そのためアップデートが不要なのです。

create-react-appをする

Reactに入門したいので、create-react-appをします。

npx create-react-app my-app -template typescript

エラー"Unexpected token '.'"が発生する

実行すると、エラーが発生しました。（発生したのは、scoopおよびnvm-windowsをアップデートする前のことです。後述しますが、このエラー解決のためにnvm-windowsのアップデートが必要との情報を得たためscoopと合わせてアップデートを実施しました。）

❯ npx create-react-app 'my-app' -template typescript
npm ERR! Unexpected token '.'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Slim\AppData\Local\npm-cache\_logs\2022-05-26T12_24_30_138Z-debug-0.log

ググったときのキーワード：「npx create-react-app unexpected token」
実際に見た記事：「reactjs - Unexpected token '.' when run create-react-app - Stack Overflow」
この記事からnpmのissueにたどりつきます。NVMをバージョンアップして、Node.jsを入れ直すと動作するよと書かれています。

NVMのバージョンを1.1.9に上げる
インストール済みのNode.jsをアンインストール（nvm uninstall 18.2.0）
再度Node.jsをインストール（「ツールおよびNode.js（npm含む）のアップデート」の3,4を実施するという意味です。）
再度create-react-appを実行する

上記手順を踏むと、実際に動作するようになりました。やっとReactに入門できる…。

❯ npx create-react-app 'my-app' -template typescript
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

以上です。