初期設定を行う

バージョンの確認

ターミナル上から、node.jsの環境がインストールされていることを確認します。

node -v

バージョン情報が以下のように表示されれば、インストールされていることになります。

package.jsonを作成（初期化）

以下のコマンドを使用して、pacage.jsonを設定（初期化）します。

npm init -y

実行すると、以下のようにpackage.jsonがルートフォルダに追加されます。

サーバーが起動するかを確認

ルートフォルダにServer.jsのファイルを作成し、サーバーが起動するかを確認します。

node server.js

以下の画像のように、ターミナル上にログが表示されていれば、起動できていることがわかります。

httpパッケージを追加

http通信をするために必要なパッケージをインストールします。

npm install -—save-dev http

インストールが完了すると、package.jsonに"http"のバージョンが記録されています。

サーバーをもう一度起動し、起動するかを確認

package.jsonのscriptsの中を、startに変更して、node server.jsを記入します。（コピー&ペーストを行った場合、VSCodeが正しく認識しない場合があるので、その場合は手入力してください）

“start”: “node server.js”

その後、サーバーを起動してみます。

npm run start

起動できることを確認します。

Webサーバーを起動し、リクエストを送信してみる

server.jsに以下の記述をし、Webサーバーを起動してみます。

const http = require("http");
const PORT = 3000;

const webServer = http.createServer((req, res) => {
  console.log("リクエストが来ました");
});

webServer.listen(PORT, () => {
  console.log("Webサーバーが起動しました");
});

起動すると、Webサーバーが起動されていることがわかります。

ブラウザのアドレスバーから、以下のアドレスでリクエストを送ると、Webサーバー側でログが出力されます。

http://localhost:3000/

ブラウザへのレスポンス処理（描画処理など）は作成していないので、ブラウザ上には何も表示されません。読み込みは停止して大丈夫。

index.htmlを作成し、レスポンスを確認する

index.htmlファイルを作成・記述

ルートフォルダに"index.html"ファイルを新規作成し、その中に表示したい情報を記述していきます。以下の画像では、"Hello World"を表示するためのコーディングを施しています。

レスポンス処理を記述

リクエストがあった場合に、Webサーバーがレスポンスとしてhtmlを返す処理をコーディングしていきます。

const http = require("http");
const PORT = 3000;
const html = require("fs").readFileSync("./index.html");

const webServer = http.createServer((req, res) => {
  // console.log("リクエストが来ました");
  res.writeHead(200, { "Content-Type": "text/html" });
  res.write(html);
  res.end();
});

webServer.listen(PORT, () => {
  console.log("Webサーバーが起動しました");
});

リクエストを送り、レスポンスを確認

ブラウザのアドレスバーから、リクエストを送信すると、Webサーバー側からHTMLファイルがレスポンスとして返ってきます。それを受け取ったブラウザがHello Worldを表示しています。

開発を効率化

コーディングする際、手作業でWebサーバーを停止・起動しながら、都度反映するのは不便です。そのため、コーディングした内容が自動で反映されるように、nodemonを導入します。

nodemonをインストール

以下のコマンドを実行し、nodomonをインストールします。

npm install -g nodemon

package.jsonを書き換え

package.jsonのscriptsの中を、nodemon server.jsに変更します。（コピー&ペーストを行った場合、VSCodeが正しく認識しない場合があるので、その場合は手入力してください）

“start”: “nodemon server.js”

再度、Webサーバーを起動

以下のコマンドから起動すると、都度、サーバーを手動で停止、起動する必要がなくなります。

npm run start

server.js上で、ファイルを保存すると、自動で停止と起動が行われるようになるため、非常に効率よく開発を進めることができます。

環境

• OS： macOS Ventura 13.4.1
• VSCode: 1.79.2 (Universal)
• Node.js: v14.21.3

本記事における注意事項

• 本記事は、備忘録としてまとめたものになります。
• 他の方の参考になる可能性も踏まえて、一般公開も行なっております。
• また記載内容はすべて、正しい内容が記載されているとは限りません。
• 誤った内容を見つけた場合は、ご指摘をお願いいたします。