MacからWindowsへ

ここ１年ほどNext.jsを使用した個人開発に取り組んできました。
個人開発では、これまでMacを愛用してきたのですが、この度Windows PCに買い換えました。
よって、Next.jsを使用した個人開発を新しいWindows環境でもできるように環境を整える必要がありました。
どのように作業をしたらいいのか、具体的なコマンドをいろいろなページを確認しながら作業を進めました。
振り返れば、実作業よりも作業手順を調べるほうが大変だったので、備忘録程度にまとめます。
この記録がどなたかの役に立てばうれしいです。

Next.jsを動かすためにはNode.jsが必要

基本的なことではありますが、Next.jsはReact.jsをベースとしたフレームワークです。
React.jsは、言語としてはJavaScriptですので、JavaScriptの実行環境となるNode.jsが必要になります。
よって、MacであろうとWindowsであろうと、Next.jsを使用するためには、まずNode.jsをインストールする必要があります。

さて、次に問題になるのは、WindowsにどうやってNode.jsをインストールするのかということです。
以下のページにも書いてあるように、WindowsにNode.jsをインストール手段は２パターンあります。

一つは、Windowsに直接インストールする方法、もう一方は、Windows Subsystem for Linux (以下、WSL)を使用して、windowsにLinux環境を構築する方法です。

Windowsに直接インストールする方が手順は簡単です。
ですので、とりあえずNode.jsを触ってみたいといった方は、Windowsに直接インストールしてしまった方が良いのでしょう。
ただし、サーバーで使用されているOSのほとんどはLinuxです。
実際、Node.jsもサーバー上でもJavaScriptを動かせるようにと開発された経緯があるため、Linuxとの相性が良いです。

本番環境へのデプロイまでを想定するなら、WSL上にNode.jsをインストールする方がいいのでしょう。

作業の流れ

さて、WindowsへのNode.jsのインストール方法が決まりましたので、環境の構築手順を以下まとめていきます。

手順

WSLとLinuxOSであるUbuntuをインストールし、WindowsでLinuxを使用できる環境を整える
Ubuntu上にNode.jsをインストール
この時nvmを使用してNode.jsをインストールすることで、Nodeのバージョン管理も併せて実行したい
また、Nodeパッケージツールであるnpmもインストールしてパッケージ管理もできるようにしたい

手順１：WSLのインストール

power Shellを管理者権限で立ち上げ、以下のコマンドを実行します。

実行コマンド

wsl --install

このコマンドは以下のページを参考にしました。

Windowsのバージョンに注意
Windows10バージョン 2004 以降、もしくは、Windows11以降はこのコマンドを実行するだけでWSLとUbuntuのインストールは完了となるそうです。
それよりも古いバージョンの場合は、手動インストールが必要になるとのことでした。

実際にこのコマンドを実行したところ、Ubuntuがインストールされませんでした。
もう一度実行したらUbuntuがインストールされました。
なぜ一度のコマンド実行でUbuntuのインストールまでできなかったのかは不思議ですが、作業結果に問題はなかったので、この辺りはスルーします。

Ubuntuのインストールが完了すると、Ubuntu のユーザー名とパスワードの設定を求められるので、それぞれ設定します。

余談 ubuntuのアップデート

パッケージの更新とアップデートは自動ではしてくれないので、定期的に個人で実行する必要があります。
その際は以下のコマンドを使用するよう、ページには記述されていました。

実行コマンド

sudo apt update && sudo apt upgrade

手順２：nvmと、Node.js、npmをインストールする。

以下のページを参考に作業をしました。

このページで紹介されている作業手順を抜粋すると以下の通りです。

nvmをcurlコマンドでインストールできるように、管理者権限を使用してcurlツールをインストール
curlコマンドで、nvmをインストール
nvmは Node.jsのバージョン管理ツール。その名前の通りNode.jsのバージョン管理をすることができるので、Node.jsの運用が楽になる。
LTS版と最新版のNode.jsをそれぞれインストール
※LTSは安定して使用できるバージョンのこと。
Node.jsとnpmがインストールされているかどうかを確認

この手順に沿って作業を進めました。
また、ここからは手順１でインストールしたUbuntu上で、作業を行います。
手順１を終えると、スタート画面からUbuntuアプリを確認することができるので、
確認できたUbuntuアプリをダブルクリックし、Ubuntuを立ち上げることができます。

Curlツールをインストール

手順通りに作業をする前に、この時点でCurlコマンドを使用できるかどうか、以下のバージョン確認コマンドを実行して確認しました。

実行コマンド

curl -v

すると、すでにCurlコマンドが使用できたので、Curlツールをインストールする手順は実行しませんでした。

nvmのインストール

nvmは、Node.jsのバージョン管理ツールです。
以下のコマンドを実行して、nvmをインストールします。

実行コマンド

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

nvmインストールした後に、nvmのバージョン確認コマンドを実行しました。
すると、そのようなコマンドはないとエラーが出力されてしまいました。

調べてみると、nvmは、シェル起動時に設定ファイルから読み込まれるスクリプトのため、
nvmをインストールした直後だと、再度設定ファイルを読み込む、もしくは、シェルを再起動する必要がありました。

そこで私は以下の手順で設定ファイルを再読み込みさせることで、この課題を解消しました。

設定ファイルの再読み込み手順

ホームディレクトリの隠しファイルを以下のコマンドで表示させ、シェルの設定ファイルが何かを確認する
bash ls -ltra
設定ファイルがbashrcだったため、以下のコマンドを実行して、設定ファイルを再読み込みする
source ~/.bashrc
上記の手順で設定ファイルを再読み込みすると、nvmのバージョン確認コマンドを問題なく使用できました。よって、次の手順に進みます。

Node.jsをインストール

先ほどインストールしたnvmでLTS版と最新の Node.jsをインストールします。
実行するコマンドは以下の通りです。

LTS版をインストール

nvm install --lts

最新版をインストール

nvm install node

Node.jsのインストールが完了したら、Node.jsとnpmがインストールされているかどうかを以下のコマンドで確認します。

nodeのバージョン確認

node -v

npmのバージョン確認

npm -v

以上でNode.jsのインストール作業が完了しました。

WSLでの開発作業

ここまでの一連の作業を行なったことで、WindowsとWSL上のUbuntuという2つのOSが共存している環境が完成しました。
この環境での作業についての留意点が以下のページにまとめられています。

このページに書かれていることを要約すると、システム間をまたいで作業をすると処理速度が落ちてしまうので、
Windows側で作業をするならば、使用するファイルはすべてWindows側に、
WSL側で作業をするならば、使用するファイルはすべてWSL
側に格納するべきであるとのことでした。

私の場合、ここで一つ問題が発生しました。
それは、開発作業で使用したいVS Codeが、Windows側にインストールされているということです。
上記の留意点を考慮するならば、WSL側にVS Codeをインストールする必要があるのではと思いました。
しかし、さらに調べていくと、「リモート接続」を使ってWindows版のVS Codeを利用する方法が公式で推奨されていました。
具体的な方法が以下のページに記述されていました。

するべきことは簡単で、以下の「リモート開発拡張機能パック」をVS Codeにインストールするだけです。

まず、Windows側のVS Codeにリモート開発拡張機能パックをインストールします。
その後、WSL上のUbuntuを起動し、開発作業を実施したいディレクトリに移動し、code.を入力し、実行します。
すると、コマンドを実行したディレクトリをVS Codeで展開させることができます。

この時、拡張機能によってはWindows側だけでなくWSL側にもインストールする必要がある場合もあります。
その時は、以下の画像のように、Windows（ローカル）側と、WSL側のそれぞれにインストールされてる拡張機能を確認することができるので、比較しながら、適宜WSL側にインストールすれば問題ないそうです。

WSL側で使用できる拡張機能が限られているといった記事を見たりしましたが、私の場合は今のところ、そのような現象は起きておらず、問題なく作業ができています。

まとめ

以上で、Windows上にNext.jsの開発環境を作成することができました。

これまでMacを使用してきたので、違いに戸惑いはしましたが、個人開発が無事に作成することができてほっとしています。

今回セットアップした環境で何か不具合が生じたら、また追記していきたいと思います。
ここまでご拝読いただきありがとうございました。