UnsplashのNEOMが撮影した写真

はじめに

WindowsでプログラミングをするならWSLが便利ですが、諸事情でWindowsに直接Node.jsの開発環境を作る機会があったので、その手順を簡単にメモします。

WSLで環境を作りたい方は以下をご参照ください。

　https://tekutekku.com/node_express_react_next_on_wsl/

Node.jsをインストールすると、バックエンドのフレームワークのExpress、フロントのReact.js・Next.jsも使えるようになるので、お得感があっておすすめです！

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

以下リンク先のMicrosoft公式ページに沿ってNode.jsをインストールします。

　https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows

nvmのインストール

nvmはNode.jsのバージョン管理ツールです。Node.jsの複数のバージョンをインストールしておき、プロジェクトによって使い分けるのに役立ちます。

■手順１：nvmのダウンロード

以下リンク先ページから最新バージョンの「nvm-setup.zip」をクリックしてダウンロードします。

https://github.com/coreybutler/nvm-windows/releases

■手順２：nvmのインストール

ダウンロードしたフォルダ中の「nvm-setup.exe」をダブルクリックし、開いたウィンドウはぽちぽちで進めます。

※特にこだわりが無ければ全てデフォルトでOK！

■手順３：インストール完了を確認

コマンドプロントを開き以下コマンドを打ち込みバージョン情報が表示されればOK！

> nvm -v

Nodeのインストール

nvmがインストールできたら次はNode.jsのインストールです。

■手順１：Node.jsのインストール

コマンドプロンプトにて以下のコマンドでインストールします。

※以下のコマンドでは最新の安定版のバージョンがインストールされます。

> nvm install --lts

■手順２：インストール済みのNode.jsのバージョン確認

以下のコマンドでNode.jsがインストールできたか確認できます。

> nvm ls

■手順３：使用するNode.jsのバージョンを指定する

以下のコマンドで使用するNode.jsのバージョンを指定します。

> nvm use [バージョン]
例）nvm use 18.17.0

■手順４：Node.jsのインストール完了確認

以下コマンドを打ち込み、Node.jsのバージョンが表示されればOKです。

> node -v

Node.jsをインストールできたら、バックエンドのExpress、フロントエンドのReact.js・Next.jsが触れるので、

以降では触り方を簡単にご紹介します。

Expressを触ってみる

Expressはバックエンドのフレームワークの１つです。Node.jsさえあれば簡単に触れるます。

以下①～④の順に作業してください。

①プロジェクトの作成

コマンドプロンプトを開き任意のフォルダに移動して以下コマンドを打ち込んでください。

> npx express-generator [プロジェクト名] 

②依存関係のインストール

作成したプロジェクトのルートに移動し、以下コマンドを打ち込んでください。

> npm install

③サーバーの起動

プロジェクトのルートで以下コマンドを打ち込むと、サーバーを起動できます。

npm start

④ブラウザで表示を確認する

ブラウザを開き「localhost:3000」にアクセスしてください。

表示される画面はとてもシンプルで、真っ白な背景の左上に「Express Welcome to Express」と表示されるはずです。

React.jsを触ってみる

React.jsはJavaScriptのライブラリで簡単にSPAを作成でき、Node.jsさえあれば簡単に触れるます。

以下①～③の順に作業してください。

①プロジェクトの作成

コマンドプロンプトを開き任意のフォルダに移動して以下コマンドを打ち込んでください。

> npx create-react-app [プロジェクト名]

②サーバーの起動

プロジェクトのルートで以下コマンドを打ち込むと、サーバーを起動できます。

> npm start

上のコマンドを打ち込むと自動でブラウザが立ち上がると思いますが、もし立ち上がらなければ「③ブラウザで表示を確認する」をご確認ください。

③ブラウザで表示を確認する

ブラウザを開き「localhost:3000」にアクセスしてください。

React.jsのシンボルマークが中心にあるかっこいいページが確認できると思います。

Next.jsを触ってみる

以下①～③の順に作業してください。

①プロジェクトの作成

コマンドプロンプトを開き任意のフォルダに移動して以下コマンドを打ち込んでください。

> npx create-next-app [プロジェクト名]

上のコマンドを打ち込むと、いくつか質問されますが、今回は動作確認なので全てデフォルトでOKです！Enterを連打してください。

②サーバーの起動

プロジェクトのルートで以下コマンドを打ち込むと、サーバーを起動できます。

> npm run dev

③ブラウザで表示を確認する

ブラウザを開き「localhost:3000」にアクセスしてください。

ページ上段に「NEXT.js」と表示されたかっこいい画面が表示されると思います。

おわりに

今回はこれで以上です。

JavaScriptはフロント、バック、スマホアプリ、デスクトップアプリまで幅広くカバーしていてとても魅力的ですよね。

少しずつJavaScriptのスキルを深めていこうと思っている今日この頃です。