Zenn
😄

Node.js に入門してみた

2024/07/28に公開
Node.js
プログラミング初心者
tech

こんにちは。今回は、フロントエンドの学習を終えた後、バックエンドの学習としてNode.jsに入門した経験をシェアします。Node.jsについて全くの初心者だった私が学んだことをまとめましたので、同じように学び始めた方の参考になれば幸いです。

Node.jsとは？

Node.jsは、以下のような特徴を持つJavaScriptの実行環境です：

  1. サーバーサイドでJavaScriptを動かせる環境（プログラミング言語ではありません）
  2. 非同期処理が得意で、リアルタイムアプリケーション（例：Zoom）の開発に適しています
  3. 独自のサーバーを構築できます
  4. フロントエンドとバックエンドの両方をJavaScriptで開発できる

プロジェクトの立ち上げ方

Node.jsプロジェクトを始めるには、以下の手順を踏みます：

  1. Node.jsをインストールします
  2. npm initコマンドでpackage.jsonファイルを作成します
  3. npm install -g nodemonコマンドでnodemonをグローバルにインストールします

nodemonを使うと、コードを変更するたびにサーバーを手動で再起動する必要がなくなります。server.jsファイルを保存し、ブラウザを更新するだけで最新の変更が反映されます。

実際のコード

それでは、簡単なサーバーを作成してみます。以下の2つのファイルを用意します：

  1. server.js：サーバーのロジックを記述
  2. index.html：クライアントに表示するHTMLファイル

server.js

// httpサーバーを構築するための標準モジュール
const http = require("http");
// ファイルシステムを操作するための標準モジュール
const fs = require("fs");

// index.htmlファイルを同期的に読み込む
const html = fs.readFileSync("./index.html");

// ポート番号を定義
const PORT = 8000;

// 新しいHTTPサーバーを作成
const server = http.createServer((req, res) => {
  // レスポンスヘッダーを設定（ステータスコード200、コンテンツタイプはHTML）
  res.writeHead(200, { "Content-Type": "text/html" });

  // レスポンスボディにHTMLの内容を書き込む
  res.write(html);

  // レスポンスを終了
  res.end();

  // GETリクエストの処理
  if (req.method === "GET") {
    // GETメソッドの処理をここに記述（今回は記載しない）
  }

  // POSTリクエストの処理
  if (req.method === "POST") {
    // POSTメソッドの処理をここに記述（今回は記載しない）
  }
});

// サーバーを指定したポートで起動
server.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Node.js入門</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

サーバーの起動と動作確認

  1. コマンドラインでnpm run devを実行してサーバーを起動します。（あらかじめ、packege.jsonの "scripts"で "dev": "nodemon server.js" にしておきます）
  2. ブラウザでhttp://localhost:8000にアクセスすると、"Hello World"と表示されます。
  3. index.htmlの<h1>タグの内容を変更し、server.jsを保存します。
  4. ブラウザを更新すると、変更が反映されます。

まとめ

今回、Node.jsの基本的な使い方を学びました。サーバーの作成、HTMLファイルの読み込み、そしてクライアントへのレスポンス送信という一連の流れを理解できたと思います。

今後は、Express.jsフレームワークの使用、データベース連携、RESTful APIの作成など、さらに高度なトピックに挑戦していきたいと思います。

Discussion