WindowsでExpressを動かしHello Worldを表示する

求人を眺めていたら気になる会社があり、技術スタックが「Node.js + Express」でした
そういえばこの組み合わせは触ったことないなと思い、ひとまずHelloWorld動作までやってみることにしました

環境はWindows(WSL)

面白かったのが、その会社の開発環境がWindows(WSL)ということ
Node.js(というかモダンなウェブ系システム開発)はMacのほうが向いていそうな気がするけど、そういうわけでもないのか

ということで、今回は珍しくWindowsでウェブ開発です
まずはWSLを起動してみます

自分のマシンにはインストール済みなので、もし未インストールであれば以下のコマンドでインストールします

Power Shellを管理者権限で開いて以下を実行
wsl --install

起動すると以下のようになりました

以下の方法でWSLにNode.jsをインストールします
(記事執筆時点の最新版はv0.40.7でした)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.7/install.sh | bash
source ~/.bashrc
nvm install --lts
node -v
npm -v

インストールが完了し、各バージョンが表示されればNode.jsのインストールは完了です

次にプロジェクトフォルダを作成します

mkdir ~/express-hello
cd ~/express-hello
npm init -y

ちなみに、作成したディレクトリにエクスプローラーからアクセスする場合は、以下のパスをエクスプローラーに直接貼り付けて移動します

WSLのファイルは仮想ドライブに保存されるようで、エクスプローラーから直接参照する場合はUNCパスを使用するようだ

\\wsl.localhost\Ubuntu\home\[ユーザー名]

次にフレームワークであるExpressをインストールします

npm install express

次に「index.js」を作成しますが、ここでVSCodeとWSLを連携できるように設定しておきます

まずはVSCodeの拡張機能をインストールします

その後、WSLから「code .」を実行します
VSCodeが自動で立ち上がり、ファイルが連携されます

以下のように「index.js」を作成しました

const express = require('express');

const app = express();
const port = 3000;

app.get('/', (req, res) => {
	res.send('Hello World!');
});

app.listen(port, () => {
	console.log(`Example app listening at http://localhost:${port}`);
});

※ちなみにHello WorldコードはAI生成です・・・

実際に起動させます

node index.js

上記表示が行われたのち、「http://localhost:3000」にアクセスすれば、「Hello World」が表示されます

おまけで、Hello WorldのTypeScript版
これから開発を行うのであれば、TypeScriptを利用しない理由はないでしょう

import express, { Request, Response } from 'express';

const app = express();
const port = 3000;

app.get('/', (_req: Request, res: Response) => {
	res.send('Hello World!');
});

app.listen(port, () => {
	console.log(`Example app listening at http://localhost:${port}`);
});

TypeScriptを使用する場合は、コンパイルしてから実行する