プロジェクトの初期化

最初の目標は、フォームとメッセージのリストを提供するシンプルなHTMLウェブページを設定することです。この目的のために、Node.JSのWebフレームワーク`express`を使用します。 Node.JSがインストールされていることを確認してください。

まず、プロジェクトを記述する`package.json`マニフェストファイルを作成しましょう。専用の空のディレクトリ（私の場合は`socket-chat-example`と呼びます）に配置することをお勧めします。

CommonJS

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "type": "commonjs",
  "dependencies": {}
}

ESモジュール

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "type": "module",
  "dependencies": {}
}

注意

"name"プロパティは一意である必要があります。「socket.io」や「express」のような値は使用できません。npmが依存関係のインストール時にエラーを発生させるためです。

次に、必要なものを簡単に`dependencies`プロパティに追加するために、`npm install`を使用します。

npm install express@4

インストールが完了したら、アプリケーションを設定する`index.js`ファイルを作成できます。

CommonJS

const express = require('express');
const { createServer } = require('node:http');

const app = express();
const server = createServer(app);

app.get('/', (req, res) => {
  res.send('<h1>Hello world</h1>');
});

server.listen(3000, () => {
  console.log('server running at http://localhost:3000');
});

ESモジュール

import express from 'express';
import { createServer } from 'node:http';

const app = express();
const server = createServer(app);

app.get('/', (req, res) => {
  res.send('<h1>Hello world</h1>');
});

server.listen(3000, () => {
  console.log('server running at http://localhost:3000');
});

これはつまり

• Expressは`app`を、HTTPサーバーに提供できる関数ハンドラーとして初期化します（5行目参照）。
• ウェブサイトのホームにアクセスしたときに呼び出されるルートハンドラー`/`を定義します。
• HTTPサーバーをポート3000でリッスンするようにします。

`node index.js`を実行すると、以下が表示されます。

そして、ブラウザで`http://localhost:3000`にアクセスすると

今のところ順調です！

情報

CommonJS

この例は、以下のブラウザ上で直接実行できます。

• CodeSandbox
• StackBlitz

ESモジュール

この例は、以下のブラウザ上で直接実行できます。

• CodeSandbox
• StackBlitz