- ホーム
- ＞
- Node.jsでWebサーバーを作ってみた
Node.jsでWebサーバーを作ってみた
2025.2.9
最近よく耳にするNode.jsについて勉強しました。今回は、Node.jsをインストールして私が実際にやってみたことと、理解できたことをブログにまとめていこうと思います。よろしくお願いします！
Node.jsとはなにか
「Node.js」は、一言でいうと「JavaScriptをブラウザ上だけでなく、サーバーサイドでも実行できるようにするための実行環境」のことです。
JavaScriptは、本来ブラウザ上で動作するプログラミング言語で、サーバーサイドでの実行を想定されてつくられたものではありませんでした。しかし、Node.jsの登場により、サーバーサイドでもJavaScriptを実行できるようになりました。
クライアントサイドでも活躍
さきほどNode.jsについて説明する際に、「サーバーサイドのJavaScript実行環境」というような書き方をしました。これは、本来のNode.jsが開発された目的としては間違っていないのですが、Node.jsは現在のWeb業界ではクライアントサイドJavaScriptの開発環境としても広く利用されています。
Node.jsの「ブラウザ上でなく、パソコン(OS)上でJavaScriptを実行できる」という特性に目をつけた開発者によって、どんどんクライアントサイドJavaScriptの開発に便利なライブラリが整備されていった結果だといわれています。
少し複雑にはなってしまいますが、とにかく現在では「Node.jsはサーバーサイドのJavaScript実行環境としても、クライアントサイドJavaScriptの開発環境としても利用されている」と憶えておきたいです。
npmとは
npmはNode.jsのパッケージ管理ツールです。「パッケージ」というのはライブラリやフレームワークのことを指します。ライブラリを使う際、通常JSファイルをダウンロードしてきて<script src=”xxx.js”></script>のように書きますが、Node.jsの場合はnpmを使ってインストールします。
実際にインストールして使ってみる
言葉だけの説明を聞いても理解しきれないと思ったので、さっそく実践に移りました。今回は上の動画を参考に、自力でWebサーバーを作っていきました。
流れとしては、ターミナルを使って以下のことを行いました。復習がてら自分用に書き出してみようと思います。
ーーーーーーーーーーーーーーーーーーー
[1] 専用のフォルダをデスクトップなどに作成(mkdir)&移動(cd)
↓
[2] VSCodeを開く(code .)
↓
[3] VSCode内のターミナルを開く(command + j)
↓
[4] Node.jsがインストールされているか調べる
(node -vでバージョンが表示されればすでにある。ない場合公式サイトからダウンロード)
↓
[5] npmコマンドが使えるようになる(npm -vで確認)
↓
[6] npm init -yでpackage.jsonというファイルを自動的に生成
↓
[7] JSファイルを一つ作成(server.jsなどのファイル名)
↓
[8]JSファイル内にconsole.log(‘nodejs’);などと記述してVSCode内のターミナルでnode server.jsと打つ(node ファイル名の形)▶︎コンソールに書かれた内容が表示されればOK。ファイルが問題なく読み込まれている
↓
[9]npm install –save-dev httpでhttpモジュールを利用▶︎package.jsonの中に自動的に”http”が追加される
"license": "ISC",
"description": "",
"devDependencies": {
"http": "^0.0.1-security"
},
"dependencies": {
"nodemon": "^3.1.9"
}
}=httpモジュールが利用できるようになる
↓
[10]”script”内のtestを消し、”start”: “node server.js”に内容を書き換える(startでもdevでもなんでもOK)
{
"name": "node",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node server.js"
},これでターミナルにnpm run startと打ち込むだけでローカルサーバーで確認することができるようになる
↓
[11]JSファイルにhttpモジュールを読み込む(require)
const http = require('http');↓
[12]Webサーバーを作っていく。serverという定数を用意しcreateServerでサーバーを作成するための関数を記述する
const http = require('http');
//webサーバーを作ろう
const server = http.createServer((req, res) => {
//ブラウザからアクセスが来たときの処理
res.writeHead(200, { "Content-Type": "Text/html" });
res.write(<h1>Hello World!</h1>);
res.end();
});↓
[13]Webサーバーを起動していく。PORT番号を指定
const http = require('http');
const PORT = 8000;
//webサーバーを作ろう
const server = http.createServer((req, res) => {
//ブラウザからアクセスが来たときの処理
res.writeHead(200, { "Content-Type": "Text/html" });
res.write(<h1>Hello World!</h1>);
res.end();
});
server.listen(PORT, () => {
console.log('server running!');
});ターミナルにもう一度npm run startと書く▶︎console内のserver running!が表示される
↓
[14]自分で作ったローカルサーバーがしっかり機能しているか確認。アドレスバーにlocalhost:8000と入力。さきほど作成したhtmlの文書、”Hello World!”の文字が表示されていれば成功！
↓
[15]res.write(<h1>Hello World!</h1>);の部分について。この中に全て書き込むのは大変。htmlファイルとの紐付け方について見ていく。
index.htmlファイルを作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTMLファイルです。</h1>
</body>
</html>Node.jsがあらかじめ用意しているfsというライブラリを使う。(すでに標準で実装されている)
server.jsに下のように記述▶︎ターミナルにnpm run startと再度記述しページをリロード
const http = require('http');
const PORT = 8001;
const html = require('fs').readFileSync("./index.html")
//標準でライブラリがすでに実装されている
//webサーバーを作ろう
const server = http.createServer((req, res) => {
//ブラウザからアクセスが来たときの処理
res.writeHead(200, { "Content-Type": "Text/html" });
res.write(html);
res.end();
});
server.listen(PORT, () => {
console.log('server runnning!');
});HTMLファイルです。と表示されれば成功！
↓
[16]変更を加えてページをリロードするのに毎回npm run startと記述するのは大変…▶︎解決できるモジュールがある！
ターミナルにnpm install -g nodemonと書く。nodemonを使うことによって、ファイルを保存するたびに勝手にブラウザを更新してくれるようになる。enter押すとインストールが開始される。
インストールが完了したら、package.jsonに戻り”start”: “node server.js”の部分を”start”: “nodemon server.js”に変更する。▶︎npm run startとターミナルに記述すると、nodemonが開始される。
{
"name": "node",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"http": "^0.0.1-security"
},
"dependencies": {
"nodemon": "^3.1.9"
}
}これで、server.jsを保存するたび、ページをリロードすれば自動的に変更が加えられるようになった！
↓
[17]Webサーバーを無事作り終えることができました。
補足①：package.jsonとは
package.jsonは、Node.jsのプロジェクトにおける設定ファイルで、プロジェクトのメタデータや依存関係などを管理するために使用されます。
おもな内容としては、プロジェクト名、バージョンなどの基本情報(name/version/description/author)や、依存関係の管理(dependencies/devDependencies)、スクリプト(scripts)などがあります。その他にもmainやrepository、licenseなどがあるようです。
{
"name": "my-project",
"version": "1.0.0",
"description": "A sample Node.js project",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"nodemon": "^2.0.7"
},
"author": "Your Name",
"license": "MIT"
}補足②：httpモジュールとは
httpモジュールは、Node.jsでHTTP通信を扱うための組み込みモジュールです。これを使うと、Webサーバーを作成したり、HTTPリクエストを送信したりすることができます。
まとめ・感想
選んだ動画や記事の内容がとてもわかりやすく、勉強する前は「Node.jsってどれだけ難しいんだろう」と身構えていたのですが、思っていたよりも内容を理解しながら取り組むことができ、よかったです。
ターミナルを使ったのも新鮮で貴重な体験でした。普段行っている作業を、文字を打つだけで行えるのがとても便利で感動的だったし、面白かったです。
この動画の内容を通して、Node.jsについて色々と知ることができましたが、それでもまだ理解が曖昧な部分が多い印象なので、これからも色んな実践を通して、より理解を深めていけたらいいなと思います。
本当に楽しい勉強内容でした！！最後まで読んでくださりありがとうございました。
