Node.js初心者徹底解説うさうさ

うさうさ研修工房 Node.js 初心者徹底解説 JavaScriptをブラウザの外で動かす、最初の一歩 図解・公式参考つき ／ 講師：［入力］ ／ 対象版：Node.js LTS（確認日：［入力］）

この講座で学ぶこと 全体の流れ 1 Node.jsとは 2 インストール 3 最初のプログラム 4 モジュール 5 npm 6 非同期処理 7 Webサーバー 8 公式参考・まとめ 対象：JavaScriptの基本（変数・関数・if・for）が少し分かる方 Node.js 初心者徹底解説 2

Node.jsとは JavaScriptをブラウザの外で動かす実行環境（公式の説明の要約） 従来（ブラウザ） JavaScript ブラウザ 画面の操作・表示 Node.js JavaScript Node.js 初心者徹底解説 3 Node.js ファイル・サーバー・ツー ル • 裏側（サーバー・PC）で動く • ブラウザと同じJavaScript の文法 • 画面と裏側を同じ言語で書 ける

仕組みを層で理解する 細かい中身は後回しでOK。流れだけ覚える • V8：Chromeにも使われる実行 エンジン • libuv：待ち時間のある処理を 裏で進める あなたのコード（index.js） V8（JavaScriptを実行するエンジン） Node.jsのAPI（fs・http など）＋libuv（非同期） OS（ファイル・ネットワーク・タイマー） Node.js 初心者徹底解説 4 • ファイル読み込みやサーバーは • OSの機能を借りて動く

インストールと確認 公式サイトのLTS版を入れる 公式サイトを開く nodejs.org LTS版を選ぶ 「Recommended」 $ node -v v22.x.x ← 表示される番号は環境によって異なります $ npm -v つまずき：command not found → ターミナルを開き直す／古い番号 → 版を揃える Node.js 初心者徹底解説 5 インストール node -v npm -v で確認

最初のプログラム（hello.js） ファイルを作って、node で実行する console.log('こんにちは、Node.js'); hello.js を作る $ node hello.js node hello.js 画面に表示される ポイント：node の後ろには、実行したいファイル名を書く Node.js 初心者徹底解説 6

モジュール：機能を借りる
Node.jsの標準機能は require で読み込む

// memo.js
const fs = require('node:fs/promises');
async function main() {
const text = await fs.readFile('memo.txt', 'utf-8');
console.log(text);
}
main();

require（伝統的な書き方）と import は混ぜない。この講座ではrequireに統一

Node.js 初心者徹底解説 7

モジュール

役割

node:fs

ファイルの読み書き

node:path

ファイルの場所を組み立てる

node:http

Webサーバーを作る

node:os

OSの情報を得る

npm と package.json 外部の部品（パッケージ）を取り込む仕組み npm init -y package.json ができる • node_modules：部品の実体（Gitには含めない） • package.json：使っている部品と版の一覧 • 別のPCでも npm install で再現できる Node.js 初心者徹底解説 8 npm install 部品名 使う

非同期処理：待たずに次へ進む
「後で結果が届く」処理を理解する

console.log('1: 開始');

コードを上から実行

setTimeout(() => {
console.log('3: タイマー');
}, 0);
console.log('2: 終了');

待つ処理は裏側へ依頼

実行結果
完了したら順番に実行
1: 開始
2: 終了
3: タイマー
setTimeoutは「後で」と予約されるため、2の後に表示される

Node.js 初心者徹底解説 9

小さなWebサーバーを作る
標準モジュール http だけで動く

const http = require('node:http');
const server = http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/plain; charset=utf-8'
});
res.end('こんにちは、Node.jsのサーバーです \n');
});
server.listen(3000, () => {
console.log('http://localhost:3000');
});

ブラウザ

GET /（リクエスト）

Node.jsのサーバー

200 こんにちは（レスポンス）

止めるには Ctrl + C

Node.js 初心者徹底解説 10

よくあるつまずき 症状から原因を探す 症状 原因の例 対処 node: command not found インストール後に開き直していない ターミナルを再起動 想定と違う動き 学習資料と版が違う 公式ドキュメントの版を確認 Cannot find module 部品が未インストール npm install を実行 結果の順番がおかしい 非同期の処理を同期と思っている setTimeout等は後で実行と理解 ポート3000が使用中 前のサーバーが動いたまま Ctrl + C で止めて再実行 Node.js 初心者徹底解説 11

エラーの読み方 最初に出たエラーから、順に読む TypeError: Cannot read properties of undefined (reading 'name') at showName (/home/user/app/index.js:4:21) at Object.<anonymous> (/home/user/app/index.js:8:1) ①種類 TypeError 何が起きたか ②メッセージ 変数名・ファイル名 ポート番号が入る ③場所（at …） 最初に出るファイル:行 ここから直す 大切な習慣：メッセージの文章はバージョンで変わることがある。判断には err.code を使う 公式参考：Node.js Errors（https://nodejs.org/docs/latest/api/errors.html） Node.js 初心者徹底解説 12 ④code ENOENT など 文章より code で判断

エラー対応の流れ 原則：最初に出たエラーから直す エラーが出た 種類とメッセージを読む code を公式一覧で確認 最初のエラーから直す エラーの読み方へ戻る 公式・検索（エラー文を使う） 直ったか確認 「直ったか」で はい → 完了。いいえ → 公式で調べて、読み方に戻る Node.js 初心者徹底解説 13

代表的なエラーと対処 症状から原因と対処を探す エラー よくある原因 対処 参照 SyntaxError 括弧・カンマ・引用符の抜け 該当行の前後を確認 MDN ReferenceError 変数の綴り違い・宣言忘れ const で宣言、綴りを確認 MDN TypeError undefined の値を使った 値が入っているか確認（?. も可） MDN MODULE_NOT_FOUND 部品が未インストール npm install、require のパス確認 npm ENOENT ファイルがない・場所違い カレントフォルダを確認 Node.js EACCES 権限がない 権限を確認（sudo は慎重に） Node.js EADDRINUSE ポートが使用中 前のサーバーを Ctrl + C で停止 Node.js Node.js 初心者徹底解説 14

非同期のエラーは try / catch で受ける 想定のエラーは説明し、想定外は投げ直す await readFile 成功：表示する 想定のエラー（ENOENT）：説明を出す 想定外：throw err で上へ投げ直す 公式参考：Node.js Errors（https://nodejs.org/docs/latest/api/errors.html） Node.js 初心者徹底解説 15 失敗：catch へ code で分岐（ENOENT等）

ポート競合（EADDRINUSE）の対処 Webサーバーの演習で最も多いエラー はい node server.js 起動する ポート3000は空き？ EADDRINUSE 確認（Linux）：sudo ss -ltnp | grep :3000 Node.js 初心者徹底解説 16 前のサーバーを Ctrl + C

require が部品を探す順番 Cannot find module が出た時に見る図 node:fs など → 標準モジュール require('名前') ./x.js など → 自分のファイル lodash など → node_modules を探す 対処：npm install 部品名 ／ require の名前・パスの綴りを確認 Node.js 初心者徹底解説 17 見つかった？ いいえ：Cannot find module

公式の参考資料 迷ったら、まず公式で確認する 入口 https://nodejs.org/ ダウンロードと概要 学習ガイド https://nodejs.org/learn 公式の入門コンテンツ API仕様 https://nodejs.org/docs/latest/api/ fs・http などの詳細 https://www.npmjs.com/ パッケージの検索 部品の探索 ※ URLは作成時点のもの。公式サイトの構成は変わることがあるため、リンク切れの際は公式サイト内で検索 Node.js 初心者徹底解説 18

• https://nodejs.org/
• https://nodejs.org/learn
• https://nodejs.org/docs/latest/api/
• https://www.npmjs.com/

学習ロードマップ 一段ずつ、確認してから次へ インストール hello.js 変数・関数 条件分岐 標準モジュール fs・path 非同期 async/await npm package.json 次の一歩：今日は「hello.js」と「Webサーバー」の二つを、自分の手で動かしてみる Node.js 初心者徹底解説 19 http Webサーバー 自分の小さな アプリ

確認問題 答えは次のスライド • Node.jsは、どこでJavaScriptを動かす実行環境か？ • node hello.js の hello.js は何を指しているか？ • setTimeout の処理が最後に表示される理由は？ • package.json の役割は？ • 公式のAPI仕様を確認したい時、どのページを見るか？ Node.js 初心者徹底解説 20

確認問題の解答例 • ブラウザの外（サーバーやPCの上） • 実行するJavaScriptのファイル • 非同期の処理は後で実行されるよう予約されるため、同期の処理（2: 終了）の後に表示される • プロジェクトの情報と、使う部品（パッケージ）の一覧を記録する • https://nodejs.org/docs/latest/api/ Node.js 初心者徹底解説 21

• https://nodejs.org/docs/latest/api/

演習の提出から採点までの流れ 受講者ページのフローを、図形で描き直したもの はい 演習に取り組む 実行できた？ はい 提出チェック表で確認 いいえ 全項目OK？ ファイルを提出 いいえ ヒント・公式資料で確認 不足を直して再確認 はい 合格 70点以上？ いいえ 書き直して再提出 凡例：角丸の四角＝作業 ／ ひし形＝判断 ／ 矢印＝次の段階へ進む Node.js 初心者徹底解説 22 講師が採点 自己採点シート

段階ごとの担当と成果物 誰が、何を使って、何を出すか 段階 担当 使うもの 出力 取り組み 受講者 演習課題（exercises.md） hello.js、memo.js、server.js 提出前確認 受講者 提出チェック表 チェック済みの表、実行環境 提出 受講者 提出先 3ファイル（memo.txtを含む） 自己採点 受講者 自己採点シート 点数と振り返り 採点 講師 解答例・採点基準 合否とコメント 合格の目安：70点以上。未満の場合は不足の演習を直して、提出に戻る Node.js 初心者徹底解説 23

演習課題（1/3）：hello.js を自分用に変える 名前を変数に入れて、テンプレートリテラルで表示する 課題 • name に自分の名前を入れる • 「こんにちは、（名前）さん」と表示する • 名前を変えて、表示が変わることを確かめる ヒント：バッククォート（`）で囲み、${変数名}と書く Node.js 初心者徹底解説 24

演習課題（2/3）：ファイルを読み、行数を数える memo.txt を読み、空行を除いた行数を表示する • memo.txt（3行以上）を作る • fs.readFile で読み込む（await を使う） • 空行を除いた行数を「行数：N」と表示する 確認：行を増やすと数が変わるか？ Node.js 初心者徹底解説 25 ヒント • split で改行で分ける • filter で空行を除く • Windowsの改行は /\r?\n/ で対応

演習課題（3/3）：Webサーバーを改造する server.js に三つの動きを追加する パス 動き /hello?name=名前 こんにちは、（名前）さん（名前がなければ「名無し」） /time 現在時刻をJSONで返す（例：{"now":"..."}） それ以外 404 と「見つかりません」を返す • ヒント：new URL(req.url, "http://localhost:3000") で pathname と searchParams を取り出す • 確認：ブラウザで三つのURLを開いて、期待どおりか確かめる Node.js 初心者徹底解説 26

【講師用】演習1の解答 配布時は削除するスライド // hello.js const name = '太郎'; console.log(`こんにちは、${name}さん`); ポイント：テンプレートリテラル（バッククォートと ${}）を確認する Node.js 初心者徹底解説 27

【講師用】演習2の解答
配布時は削除するスライド
// memo.js
const fs = require('node:fs/promises');
async function main() {
const text = await fs.readFile('memo.txt', 'utf-8');
const lines = text.split(/\r?\n/)
.filter((line) => line.trim() !== '');
console.log(`行数：${lines.length}`);
}
main();

ポイント：await で読み込みを待つ。filter で末尾の改行による誤カウントを防ぐ

Node.js 初心者徹底解説 28

【講師用】演習3の解答
配布時は削除するスライド
const http = require('node:http');
const server = http.createServer((req, res) => {
const url = new URL(req.url, 'http://localhost:3000');
if (url.pathname === '/hello') {
const name = url.searchParams.get('name') ?? '名無し';
res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end(`こんにちは、${name}さん\n`);
} else if (url.pathname === '/time') {
res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
res.end(JSON.stringify({ now: new Date().toISOString() }) + '\n');
} else {
res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end('見つかりません \n');
}
});
server.listen(3000, () => console.log('http://localhost:3000'));

Node.js 初心者徹底解説 29

まとめ • Node.js＝JavaScriptをブラウザの外で動かす実行環境 • LTS版を入れ、node -v で確認する • require で標準機能、npm で外部の部品を使う • 非同期は「後で結果が届く」と理解する • 困ったら公式サイトのAPI仕様と学習ページへ Node.js 初心者徹底解説 30