UnsplashのBea Bercesが撮影した写真

はじめに

Node.jsをインストールし、以下３つそれぞれで新規プロジェクト作成の手順をまとめた記事です。
・Express：Node.jsのサーバーサイドのフレームワーク
・React.js：フロントエンドのライブラリ
・Next.js：Reactを使ったフレームワーク

Node.jsをインストールするだけで、Express、React.js、Next.jsの３つが使えるようになるので、この記事を読み終わる頃には得した気分になるかと思います！

環境

・Windows11
・WSL(Ubuntu20.04)

WSL2をインストール

WSL2をまだインストールしていない方もいるかと思いますので、WSL2のインストールからやっていきます。

といってもコマンド１つでWSL2(Ubuntu)はインストールできます。

コマンドプロンプトを開いて以下コマンドを打ち込んでください。

wsl --install

処理完了後にコマンドプロンプトを一度閉じて再度開き以下コマンドを打ち込むとWSL2がインストールされたことを確認できると思います。

wsl

「wsl」このコマンドだけで、WSLを起動できます。

rootユーザーでログインしてしまうと思うので新規ユーザーを作成した方が良いのですが、rootユーザーでこの先を進めても問題は無いのでここでは省略させていただきます。

※WSL2のインストールは下の記事を参考にしました。
　https://learn.microsoft.com/ja-jp/windows/wsl/install

Node.jsをインストール

まずExpress、React、NextのベースであるNode.jsをインストールします。
Node.jsは以下のページ（Microsoft公式）を参照して環境構築しました。
https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl

nvmをインストールする

Node.jsをインストールする前に、Node.jsのバージョン管理ツールであるnvmをインストールします。

この先何らかの事情でNode.jsの複数バージョンを使い分けたいときにnvmがあると便利です！

nvmをインストールするために必要な「cURL」をインストールします

sudo apt-get install curl

次に、nvmをインストールします。

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

インストールが終わったらコマンドプロンプトを開きなおし、以下コマンドを打ち込んでみてください。

command -v nvm

このように↓「nvm」と帰ってきたらnvmがインストールできています。

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

以下コマンドでNode.jsをインストールします。

nvm install --lts

インストールが完了したら以下画像のように「node -v」「npm -v」と打ち込んでみてください。
画像とバージョンは違うかと思いますが、バージョン情報が帰ってきていればNode.jsのインストール完了です。

※npm：Node Package Manager。Node.jsで後々使うパッケージ類を管理するためのツールで、Node.jsをインストールすると付属してきます。

これでExpress、React.js、Next.jsで新規プロジェクトを作成する準備ができたので、さっそくやっていきます。

Expressで新規プロジェクト作成

任意のディレクトリに移動し以下コマンドを打ち込むと新規プロジェクトを作成できます。
何か聞かれたら迷わずEnterで進めてください。

npx express-generator [プロジェクト名]
例）npx express-generator firstexpress

※npx：npmのパッケージをインストールすることなくネット上のパッケージを直接実行するコマンドです。

プロジェクトが作成できたら、以下のように作成したプロジェクトにcdコマンドで移動し「npm install」と「npm start」コマンドを打ち込みます。

cd firstexpress
npm install
  ～処理結果が数行出力されます～
npm start
　> firstexpress@0.0.0 start　⇐こんな出力が帰ってきます
　> node ./bin/www

npm startまで打ち込んだらブラウザのURL欄に「localhost:3000」と打ち込んでEnterしてください。
ブラウザの左上にちょこんと下画像のように表示されていればExpressが正常に動いています！

これでExpressの新規プロジェクト作成は完了なので、続いてReactです。

Reactで新規プロジェクト作成

Reactも新規プロジェクトを作成して動かしてみます。

任意のディレクトに移動し、以下コマンドを打ち込んで新規プロジェクトを作成してください。

npx create-react-app [プロジェクト名]
例）npx create-react-app firstreact

プロジェクトが作成できたら、以下のように作成したプロジェクトにcdコマンドで移動し「npm start」コマンドを打ち込みます。

cd firstreact
npm start

自動でブラウザが立ち上がり画面中央に以下のように表示されたはずです。

ちなみにですが、もしブラウザが自動で立ち上がらなくてもブラウザのURL欄に「localhost:3000」と打ち込めばアクセスできるはずです。

Nextで新規プロジェクト作成

最後にNextの新規プロジェクトを作成して動かします。

任意のディレクトに移動し、以下コマンドを打ち込んで新規プロジェクトを作成してください。
いくつか質問がありますが、とりあえずデフォルトで良いのでひたすらEnterで進めてください。

npx create-next-app [プロジェクト名]
例）npx create-next-app firstnext

プロジェクトが作成できたら、以下のように作成したプロジェクトにcdコマンドで移動し「npm run dev」コマンドを打ち込みます。

cd firstnext
npm run dev

npm run devまで打ち込んだらブラウザのURL欄に「localhost:3000」と打ち込んでEnterしてください。
このように表示されていればNextが正常に動いています！

まとめ

最後にこの記事の内容をざっくり表にまとめます。

Node インストール	参考ページ：WSL2上でNode.jsを設定する｜Microsoft Learn １．WSL2(Ubuntu)をインストール ２．nvmをインストール ３．Node.jsをインストール ※Node.jsに付属してnpmもインストールされる
Express	プロジェクト作成　　：npx express-generator [プロジェクト名] 依存関係インストール：npm install サーバー起動　　　　：npm start URL　　　　　　　　：localhost:3000
React	プロジェクト作成：npx create-react-app [プロジェクト名] サーバー起動　　：npm start URL　　　　　　：localhost:3000
Next	プロジェクト作成：npx create-next-app [プロジェクト名] サーバー起動　　：npm run dev URL　　　　　　：localhost:3000