記事の概要
この記事では、オープンソースのJavaScript開発・実行環境であるNode.jsを使って、Dockerコンテナで動作するWebアプリの開発環境の構築から開発、実行までの流れを紹介します。
この記事を参考に、Node.jsやWebアプリ開発のスタートの一助となれば幸いです。
今回の記事の対象者
この記事は次のような方に向けています：
- Node.jsの環境を構築してアプリ開発を始めたい方
- Dockerコンテナを使ってサーバー（VPSやクラウド環境）を環境を統一したい方
- シンプルなWebアプリでNode.jsの実装イメージを理解したい方
はじめに
今回は、JavaScript開発・実行環境であるNode.jsを使ってシンプルなWebアプリの開発を解説します。
Webアプリ開発を以下の2段階で行いステップバイステップでNode.jsについて学べる構成としています。
- 第1段階：Node.jsを使ったWebアプリの基礎を解説します。
- 第2段階：作ったWebアプリを拡張して、「おみくじ」アプリへと拡張します。
また、作成したソースコードをもとに、Node.jsの基礎を詳細に解説していますので、是非活用してみてください。
Node.jsとは
Node.jsは、「サーバーサイド（裏側）でJavaScriptを使ってプログラムを書くためのツールおよび環境」で、完全なオープンソースです。
通常、JavaScriptはブラウザ（Google ChromeやSafariなど）で動くのですが、Node.jsを使うと、パソコンやサーバーという場所でもJavaScriptを使ってプログラムが動くようになります。
これにより、Webアプリを作るときにフロントエンド（見た目）とバックエンド（裏側）で同じJavaScriptを使えるという便利さがあります。
Node.jsは、主に以下の特徴があります。
- 高速
- Chrome で使われているV8 JavaScriptエンジンのおかげでJavaScriptが非常に速く動作します。Node.jsもそれを活かして多くのリクエストを素早く処理できます。
- 使いやすい
- フロントエンドとバックエンドの両方でJavaScriptを使えるため、学ぶべき言語が一つで済みます。
- 大規模なコミュニティ
- Node.jsは人気があり、多くの人が使っているため、困ったときに助けを得やすいです。
Node.jsは、以下のようなソフトウェア開発に適しています。
- Webアプリを作る
- インターネット上で情報をやり取りするための仕組みを作ることができます。
- データベースと連携する
- 保存しておいたデータを取り出したり、新しいデータを保存したりできます。
- リアルタイムで情報を送受信する
- チャットアプリなど、リアルタイムでメッセージをやり取りするアプリを作ることができます。
Node.jsについての詳細は、公式サイトをご覧下さい。
目次
Webアプリの概要と学習のポイント
Webアプリ（ベース）
最初のアプリは、ブラウザでアクセスした際に「Hello, World!」メッセージを表示するシンプルなアプリです。Node.jsでのサーバーの作り方と基本的なリクエスト/レスポンスの処理を学びます。
プログラムの概要:
- HTTPモジュールを使って、シンプルなWebサーバーを作成します。
- Webサーバーが動作すると、ブラウザでアクセスした際に「Hello, World!」メッセージを表示するようにします。
Node.jsの学習ポイント①
Webアプリ（ベース）のソースコードを通して、Node.jsの基本機能について学びます。
- HTTPモジュールの基本的な設定と動作
- リクエストとレスポンスの処理
- Node.jsの基本的なモジュールの使い方
Webアプリ（おみくじ）
拡張したアプリは、ブラウザでアクセスした際に、その日の運勢について「おみくじ」が表示されます。ランダムな値の生成とシンプルなウェブページの生成を学びます。
プログラムの概要:
- ユーザーがボタンを押すと、その日の運勢が表示される「おみくじ」を作成します。
- 運勢はランダムで「大吉」や「中吉」などが表示されるようにします。
Node.jsの学習ポイント②
Webアプリ（おみくじ）のソースコードを通して、Node.jsの基本機能について学びます。
- ランダム値の生成
- 基本的なHTMLとNode.jsでのデータのやり取り
- シンプルなユーザーインターフェースの作成
ソフトウェア・ハードウェア
必要なツール、ライブラリ、端末は以下の通りです。
開発ツール
以下、開発ツールとその公式サイトの一覧です。導入しておくと開発作業が楽になります。
端末
以下、今回の環境を構築する対象の端末スペックです。
| 項目 | 詳細 |
|---|---|
| ハードウェア | Apple Silicon M3, RAM 24GB |
| OS | macOS Sonoma 14.6 |
本記事で紹介するソフトウェアおよびツールは、筆者の個人的な使用経験に基づくものであり、公式のサポート外の設定や使用方法を含む場合があります。利用に際しては、公式サイトの指示およびガイドラインを参照し、自己責任で行ってください。
Node.js環境の構築
Node.jsのインストール
まずは、Node.jsをインストールして、プログラムを実行できる環境を整えます。Node.jsの公式サイトからインストーラをダウンロードしてインストールします。
今回は、PreBuilt Installerからダウンロードします。
Node.jsのバージョンはv20.16.0（LTS）、OSはmacOS、実行環境はM3チップ搭載のMacBookなのでARM64を選択します。
今回は、以下のダウンロードファイル名となります。
node-v20.16.0.pkg
ダウンロードしたファイルをダブルクリックして開いて、インストールしてください。正常にインストールされるとインストーラに以下のメッセージが表示されます。
This package has installed:
• Node.js v20.16.0 to /usr/local/bin/node
• npm v10.8.1 to /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.
Node.jsは、JavaScriptをバックエンドで実行するための環境です。これをインストールすることで、macOS上でJavaScriptを使ってウェブサーバーを立ち上げることができるようになります。
npmはNode.jsのパッケージを管理するツールで、後で必要なライブラリを簡単にインストールできます。
インストールが終わったら、macOSのターミナルで以下のコマンドを実行して、Node.jsがちゃんと使えるか確認します。
node -v
npm -v
node -v はNode.jsのバージョンを表示し、npm -v はNode.jsに付属するパッケージ管理ツールであるnpmのバージョンを表示します。これにより、正しくインストールされたか確認できます。
Node.jsとnpmがインストール正常にされていれば、それぞれのコマンドでバージョン情報が表示されます。
(base) xxxxx@xxxxx ~ % node -v
v20.16.0
(base) xxxxx@xxxxx ~ % npm -v
10.8.1
(base) xxxxx@xxxxx ~ %
DockerとDocker Composeのインストール
Dockerは、アプリケーションをコンテナと呼ばれる仮想的な環境に入れて動かすためのツールです。Docker Composeは、複数のコンテナを一度に管理するためのツールです。
Docker Desktopのインストールは、以下の記事を参考にしてください。
Docker Desktopをインストールした後、以下のコマンドで正しくインストールされたか確認します。
docker --version
docker compose --version
DockerとDocker Composeがインストールされ、docker –versionとdocker-compose –versionでバージョン情報が表示されます。
(base) xxxxx@xxxxx ~ % docker --version
Docker version 27.1.1, build 6312585
(base) xxxxx@xxxxx ~ % docker compose version
Docker Compose version v2.29.1-desktop.1
(base) xxxxx@xxxxx ~ %
プロジェクトディレクトリのセットアップ
プロジェクト用のフォルダを作成し、その中で開発を進めます。
プロジェクトディレクトリの作成
プロジェクト専用のフォルダを作成します。今回は、nodejs-omikuji-appという名前にします。
mkdir nodejs-omikuji-app
cd nodejs-omikuji-app
weather-appというフォルダを作成し、その中に移動しカレントディレクトリを確認します。
(base) xxxxx@xxxxx test-pj % mkdir nodejs-omikuji-app
(base) xxxxx@xxxxx test-pj % cd nodejs-omikuji-app
(base) xxxxx@xxxxx nodejs-omikuji-app % pwd
/Users/xxxxx/test-pj/nodejs-omikuji-app
(base) xxxxx@xxxxx nodejs-omikuji-app %
Webアプリ（ベース）の開発
作成するプロジェクトのファイルは以下の通りです。
nodejs-omikuji-app/
├── Dockerfile
├── docker-compose.yml
├── package.json
└── server.js
- nodejs-omikuji-app/
- プロジェクトのルートディレクトリ。
- server.js
- Node.jsでサーバーを動かすためのメインのコードが書かれたファイルです。
- Dockerfile
- Node.jsアプリケーションをDockerコンテナにパッケージするための設定ファイルです。
- docker-compose.yml
- Docker Composeを使って、コンテナを簡単に管理・実行するための設定ファイルです。
- package.json
- プロジェクトで使用する依存関係やスクリプトを管理するファイルです。
ソースコードの作成
プログラムのコードを書いて、アプリケーションの機能を実装します。
server.jsファイルの作成
server.jsファイルを作成し、以下のコードを記述します。
const http = require('http');
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!\\n');
});
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server running at <http://localhost>:${PORT}/`);
});
httpモジュールを使ってシンプルなウェブサーバーを作成します。このサーバーはブラウザからアクセスされると、「Hello, World!」というメッセージを返します。
package.jsonの作成
package.jsonファイルを作成し、以下の内容を記述します。
{
"name": "nodejs-omikuji-app",
"version": "1.0.0",
"description": "Simple Node.js Server",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {},
"private": true
}
package.jsonは、Node.jsプロジェクトの依存関係やスクリプトを管理するためのファイルです。ここでは、サーバーを起動するためのスクリプトとしてnpm startコマンドが使えるように設定しています。
Docker関連ファイルの作成
このアプリケーションをDockerで動かすためのファイルを作成します。
Dockerfile の作成
プロジェクトの中にDockerfileを作成し、以下の内容を記述します。
# ベースイメージとして公式のNode.jsイメージを使用
FROM node:20
# アプリケーションディレクトリを作成
WORKDIR /usr/src/app
# package.jsonをコピー
COPY package*.json ./
# 依存関係をインストール
RUN npm install
# アプリケーションコードをコピー
COPY . .
# アプリケーションを公開するポート
EXPOSE 3000
# アプリケーションの起動
CMD ["npm", "start"]
Dockerfileは、アプリケーションをコンテナ内で実行できるようにするための「レシピ」です。このファイルに従って、Node.jsアプリケーションをコンテナにパッケージします。
docker-compose.yml の作成
同じく、プロジェクトの中にdocker-compose.ymlを作成し、以下の内容を記述します。
services:
web:
build: .
ports:
- "3000:3000"
command: npm start
docker-compose.ymlは、Dockerコンテナを簡単に管理・起動するための設定ファイルです。このファイルを使って、Node.jsサーバーをコンテナ内で実行します。
Webアプリ（ベース）の実行
それでは、開発環境を起動し、アプリケーションが正しく動作するかを確認します。
アプリケーションのビルドと実行
Docker Composeを使ってアプリケーションをビルドし、コンテナを起動します。
プロジェクトディレクトリで、以下のコマンドを実行します。
docker compose up --build
Dockerコンテナをビルドし、Node.jsサーバーを起動します。
(base) xxxxx@xxxxx nodejs-omikuji-app % docker compose up --build
[+] Building 1.7s (11/11) FINISHED docker:desktop-linux
=> [web internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 517B 0.0s
=> [web internal] load metadata for docker.io/library/node:20 1.6s
=> [web internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [web 1/5] FROM docker.io/library/node:20@sha256:d3c8ababe9566f9f3495d 0.0s
=> [web internal] load build context 0.0s
=> => transferring context: 4.93kB 0.0s
=> CACHED [web 2/5] WORKDIR /usr/src/app 0.0s
=> CACHED [web 3/5] COPY package*.json ./ 0.0s
=> CACHED [web 4/5] RUN npm install 0.0s
=> [web 5/5] COPY . . 0.0s
=> [web] exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:7c05fb781279a7d6e8a65e0c890f25ccd2f4a1248eee0 0.0s
=> => naming to docker.io/library/nodejs-omikuji-app-web 0.0s
=> [web] resolving provenance for metadata file 0.0s
[+] Running 2/0
✔ Network nodejs-omikuji-app_default Created 0.0s
✔ Container nodejs-omikuji-app-web-1 Created 0.0s
Attaching to web-1
web-1 |
web-1 | > nodejs-omikuji-app@1.0.0 start
web-1 | > node server.js
web-1 |
web-1 | Server running at <http://localhost:3000/>
ブラウザで http://localhost:3000 にアクセスして、「Hello, World!」が表示されることを確認します。
Webアプリ（おみくじ）に拡張
ソースコードの変更
プログラムのコードを開いて、アプリケーションの機能を拡張します。
server.jsファイルの変更（URLルーティングを追加する）
server.jsを以下のように変更し、特定のURLに応じたレスポンスを返す機能を追加します。
const http = require('http');
const server = http.createServer((req, res) => {
if (req.url === '/') {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!\\n');
} else if (req.url === '/hello') {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, User!\\n');
} else {
res.statusCode = 404;
res.setHeader('Content-Type', 'text/plain');
res.end('Not Found\\n');
}
});
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server running at <http://localhost>:${PORT}/`);
});
このコードは、異なるURL（/ や /hello）にアクセスしたときに、それぞれ異なるメッセージを返すようにします。これにより、Webアプリで複数のページを持つ仕組みに拡張できます。
/helloにアクセスした画面です。
/hoge（存在しないパス）にアクセスした画面です。
server.jsファイルの変更（おみくじ機能を追加する）
server.jsをさらに以下のように変更し、/omikujiにアクセスするとランダムなおみくじの結果を返す機能を追加します。
const http = require('http');
// おみくじの結果のリスト
const omikujiResults = [
'大吉',
'中吉',
'小吉',
'吉',
'末吉',
'凶'
];
const server = http.createServer((req, res) => {
if (req.url === '/') {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.end(`
<html>
<head><meta charset='utf-8'></head>
<body>
<h1>おみくじアプリへようこそ！</h1>
<p><a href="/omikuji">おみくじを引く</a></p>
</body>
</html>
`);
} else if (req.url === '/hello') {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, User!\\n');
} else if (req.url === '/omikuji') {
// ランダムにおみくじの結果を選択
const randomIndex = Math.floor(Math.random() * omikujiResults.length);
const result = omikujiResults[randomIndex];
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.end(`
<html>
<head><meta charset='utf-8'></head>
<body>
<h1>おみくじの結果は: ${result} です！</h1>
<p><a href="/">戻る</a></p>
</body>
</html>
`);
} else {
res.statusCode = 404;
res.setHeader('Content-Type', 'text/plain');
res.end('Not Found\\n');
}
});
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server running at <http://localhost>:${PORT}/`);
});
/omikujiにアクセスすると、omikujiResults配列からランダムなおみくじの結果を選んで表示します。この機能により、プログラムでランダムな結果を生成し、それをブラウザに表示するように拡張できます。
アプリケーションの再ビルドと実行
Docker Composeを使ってアプリケーションを再ビルドし、コンテナを起動します。
プロジェクトディレクトリで、以下のコマンドを実行します。
docker compose up --build
このコマンドは、最新のコードでアプリケーションを再ビルドし、コンテナ内でサーバーを起動します。
Dockerコンテナをビルドし、Node.jsサーバーを起動します。
(base) xxxxx@xxxxx nodejs-omikuji-app % docker compose up --build
[+] Building 1.4s (11/11) FINISHED docker:desktop-linux
=> [web internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 517B 0.0s
=> [web internal] load metadata for docker.io/library/node:20 1.4s
=> [web internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [web 1/5] FROM docker.io/library/node:20@sha256:d3c8ababe9566f9f3495d 0.0s
=> [web internal] load build context 0.0s
=> => transferring context: 731B 0.0s
=> CACHED [web 2/5] WORKDIR /usr/src/app 0.0s
=> CACHED [web 3/5] COPY package*.json ./ 0.0s
=> CACHED [web 4/5] RUN npm install 0.0s
=> CACHED [web 5/5] COPY . . 0.0s
=> [web] exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:e0efa06efe5e223989baf763e409f9868eecbb903ae2a 0.0s
=> => naming to docker.io/library/nodejs-omikuji-app-web 0.0s
=> [web] resolving provenance for metadata file 0.0s
[+] Running 2/1
✔ Network nodejs-omikuji-app_default Created 0.0s
✔ Container nodejs-omikuji-app-web-1 Created 0.0s
Attaching to web-1
web-1 |
web-1 | > nodejs-omikuji-app@1.0.0 start
web-1 | > node server.js
web-1 |
web-1 | Server running at <http://localhost:3000/>
ブラウザで http://localhost:3000/にアクセスして、ランダムなおみくじの結果が表示されることを確認します。
おみくじアプリのトップ画面です。
おみくじの結果画面です。
終了とクリーンアップ
作業が終わった後、開発環境を終了し、不要なリソースをクリーンアップします。
コンテナの停止
開発が終了したら、Docker Composeを使ってコンテナを停止します。docker compose up –buildを実行したものと別のコンソールを開いて、プロジェクトディレクトリで以下のコマンドを実行してください。
docker compose down
コンテナが停止し、リソースが解放されます。
(base) xxxxx@xxxxx nodejs-omikuji-app % docker compose down
[+] Running 2/1
✔ Container nodejs-omikuji-app-web-1 Removed 0.6s
✔ Network nodejs-omikuji-app_default Removed 0.1s
クリーンアップ
不要になったDockerのリソースを削除します。
docker system prune
削除前
(base) xxxxx@xxxxx nodejs-omikuji-app % docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
nodejs-omikuji-app-web latest 386b6135ecda 50 seconds ago 1.09GB
<none> <none> e0efa06efe5e 4 minutes ago 1.09GB
<none> <none> a8ca1268642b 5 minutes ago 1.09GB
<none> <none> 934845833b4a 6 minutes ago 1.09GB
<none> <none> 41417c108d46 8 minutes ago 1.09GB
<none> <none> 7c05fb781279 38 minutes ago 1.09GB
削除後
削除後、<none>が削除されていることが確認出来ます。
(base) xxxxx@xxxxx nodejs-omikuji-app % docker system prune
WARNING! This will remove:
- all stopped containers
- all networks not used by at least one container
- all dangling images
- unused build cache
Are you sure you want to continue? [y/N] y
Deleted Images:
deleted: sha256:a8ca1268642bfb4b37cfdb70ce2d267985c7cb2ba99ac1ab68de56e323ef2517
deleted: sha256:41417c108d46d8c70fc3a019b19f14aeb5897ebf3651c670c7067ee5da5d7b22
deleted: sha256:934845833b4a0a7aef7f62af9efea8b9667164424ce5480d3dbd354caf7ddea2
deleted: sha256:7c05fb781279a7d6e8a65e0c890f25ccd2f4a1248eee0ea0eb6ba0ba67c1f2f8
deleted: sha256:e0efa06efe5e223989baf763e409f9868eecbb903ae2a83e56746c6138bb1434
Deleted build cache objects:
v8218geg08w7iydhepkv0252a
o3tetxpqv47k01oe69hgn6nyj
nsk4wrcxafd2pavhsnc7yb439
wc4mukmelubx9hu6kh6hzn5w1
elwz5uuy9gko86pz2a6eldmos
rd1odmtet7gh6gxyzzvx8r7uv
kts5e5dtks1ybugbeikt20gyz
hwxluap3g83xmvm17b63a5mx4
pgb8j2uywiyzd25a7vq5ans92
Total reclaimed space: 48.4kB
(base) xxxxx@xxxxx nodejs-omikuji-app % docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
nodejs-omikuji-app-web latest 386b6135ecda 2 minutes ago 1.09GB
コードの解説
今回のNode.jsアプリケーションを使って、各学習ポイントについて詳しく解説します。
1. Node.jsの基本的なモジュールの使い方
解説:
- モジュールとは、Node.jsで使える機能のまとまりで、アプリを作るための機能を他のプログラムから呼び出せるようにフォルダやファイルをまとめたものです。必要な機能を持ったモジュールをプログラムに「インポート」することで、さまざまな機能を簡単に利用できます。
コード例:
const http = require('http');
説明:
require('http')は、Node.jsに組み込まれているhttpモジュールをインポートしている部分です。- このようにして、
httpモジュールの機能を使ってWebサーバーを作成できます。ほかにも、fs（ファイルシステム）やpath（パス操作）など、さまざまなモジュールを利用できます。
2. HTTPモジュールの基本的な設定と動作
- HTTPモジュールとは、Node.jsに標準で含まれている機能の一つで、Webサーバーを作るために使います。
- Webサーバーは、Webブラウザ（Google ChromeやSafariなど）からのリクエストを受け取って、Webページ（HTMLやテキストなど）を返す役割を持ったコンピューターの事を言います。
コード例:
const http = require('http');
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!\\\\n');
});
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server running at <http://localhost>:${PORT}/`);
});
説明:
httpモジュールを使って、Webサーバーの機能を作成します。http.createServerは、Webサーバーを作成する関数で、req（HTTPリクエスト）とres（HTTPレスポンス）という2つの引数を取ります。server.listen(PORT, ...)は、サーバーを特定のポート（ここでは3000番）で待機させる部分です。ブラウザがhttp://localhost:3000にアクセスすると、このサーバーが動作します。なお、ポート番号は任意の番号を指定できます。
3. HTTPリクエストとHTTPレスポンスの処理
解説:
- HTTPリクエストとは、Webブラウザがサーバーに「このページの内容をください」と要求することです。
- HTTPレスポンスとは、WebサーバーがそのHTTPリクエストに対して「これがそのページの内容です」と返すことです。
コード例:
const server = http.createServer((req, res) => {
if (req.url === '/') {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!\\\\n');
} else if (req.url === '/hello') {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, User!\\\\n');
} else {
res.statusCode = 404;
res.setHeader('Content-Type', 'text/plain');
res.end('Not Found\\\\n');
}
});
説明:
req.urlは、WebブラウザがHTTPリクエストしたURL（例えば、/や/hello）を表します。res.statusCodeは、WebサーバーがHTTPリクエストに対して返すステータスコードを設定します。200は「成功」を意味し、404は「ページが見つからない」を意味します。res.setHeaderで、HTTPレスポンスのタイプを設定します。ここでは文字だけで構成され、レイアウト情報や装飾情報などを持たないテキストデータ（プレーンテキスト）を指定しています。res.endで、Webブラウザに返す内容を設定します。ここでは「Hello, World!」などのメッセージを指定しています。
4. ランダム値の生成
解説:
- ランダム値とは、予測できないような数値や結果を作り出すことです。おみくじアプリでは、ランダムな結果（「大吉」や「凶」など）を返すために使います。
コード例:
const omikujiResults = [
'大吉',
'中吉',
'小吉',
'吉',
'末吉',
'凶'
];
const randomIndex = Math.floor(Math.random() * omikujiResults.length);
const result = omikujiResults[randomIndex];
説明:
Math.random()は0から1未満のランダムな小数を生成します。Math.floor()は、小数点以下を切り捨てて整数にします。omikujiResults.lengthは、おみくじの結果の数です。- このコードでは、
Math.random()を使っておみくじ結果のリストからランダムに結果を選び、その結果をresultに格納します。
5. 基本的なHTMLとNode.jsでのデータのやり取り
解説:
- HTMLはWebページの構造を表すマークアップ言語で、Webブラウザで表示される内容を記述します。
- Node.jsを使ってWebサーバーからHTTPリクエスト内容に応じたHTMLを返すことで、動的なWebページを作成できます。
コード例:
const server = http.createServer((req, res) => {
if (req.url === '/') {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.end('<html><body><h1>Hello, World!</h1></body></html>\\\\n');
} else {
res.statusCode = 404;
res.setHeader('Content-Type', 'text/plain');
res.end('Not Found\\\\n');
}
});
説明:
res.setHeader('Content-Type', 'text/html')は、Webブラウザに返すデータがHTMLであることを示します。res.endにHTMLコードを記述して、その内容をWebブラウザに返します。この場合、<h1>Hello, World!</h1>が表示されるWebページが生成されます。
6. シンプルなユーザーインターフェースの作成
解説:
- ユーザーインターフェース（UI）は、ユーザーがWebアプリを使うための接点と方法を提供します。
- シンプルなUIでは、ユーザーが簡単に使えるように、「見た目」や「使い方」等、直感的なデザインを心がけます。
コード例:
const server = http.createServer((req, res) => {
if (req.url === '/') {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.end(`
<html>
<head><meta charset='utf-8'></head>
<body>
<h1>おみくじアプリへようこそ！</h1>
<p><a href="/omikuji">おみくじを引く</a></p>
</body>
</html>
`);
} else if (req.url === '/omikuji') {
const omikujiResults = ['大吉', '中吉', '小吉', '吉', '末吉', '凶'];
const randomIndex = Math.floor(Math.random() * omikujiResults.length);
const result = omikujiResults[randomIndex];
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.end(`
<html>
<head><meta charset='utf-8'></head>
<body>
<h1>おみくじの結果は: ${result} です！</h1>
<p><a href="/">戻る</a></p>
</body>
</html>
`);
} else {
res.statusCode = 404;
res.setHeader('Content-Type', 'text/plain');
res.end('Not Found\\\\n');
}
});
説明:
- ここでは、Webページ上に「おみくじを引く」リンクを表示し、そのリンクをクリックするとおみくじの結果が表示されるシンプルなインターフェースを作成しています。
href="/omikuji"とすることで、ユーザーがリンクをクリックするとおみくじの結果を表示する処理が行われます。
まとめ
手順まとめ
シンプルなWebアプリの作成から、おみくじアプリへの拡張までを、Node.jsのインストール手順から始めて、ステップバイステップで説明しました。
また、Dockerを使うことで、開発環境を簡単に構築し、どんな場所でもアプリケーションを実行できることが学べました。
以下に、手順のサマリーを記載しますので、頭の整理に役立てて下さい。
- Node.jsのインストール:
- Node.jsとnpmをインストールし、JavaScriptでサーバーを動かせる環境を整えます。
- シンプルなHTTPサーバー:
- 「Hello, World!」を表示する基本的なHTTPサーバー。
- Dockerコンテナ内で動作し、ブラウザからアクセス可能。
- おみくじアプリ:
- 特定のURL（/hello, /omikuji）にアクセスすると、対応するメッセージやランダムなおみくじの結果を返す機能を追加。
- Dockerコンテナ内で、ブラウザからアクセスして動作確認。
学習ポイントまとめ
Webアプリのソースコード通じて、Node.jsでのWebサーバーの基本的な動作から、実際にランダムなデータを扱う簡単なアプリの作成までを理解することができました。初心者の皆さんは、これらの概念を学ぶことで、Webアプリ開発の基礎を固めに役立てていただければ幸いです。
以下に、学習ポイントのサマリーを記載しますので、おさらいに役立ててください。
- Node.jsの基本的なモジュールの使い方
- HTTPモジュールの基本的な設定と動作
- リクエストとレスポンスの処理
- ランダム値の生成
- 基本的なHTMLとNode.jsでのデータのやり取り
- シンプルなユーザーインターフェースの作成
これからもNode.jsとDockerコンテナを活用して、より高度なアプリケーション開発に挑戦してみてください！
最後に、この記事がNode.jsの学習やアプリ開発に役立つことを願っています。
