035.1 Node.jsの基礎
Web Development Essentials | 2024/10/22

トピック035からはNode.jsについて学習していきます。Node.jsはJavaScriptを使って学習するため、JavaScriptに自信がない方は、まずトピック034を読み直してから学習を進めましょう。

Node.jsの基礎

JavaScriptは、クライアントサイドJavaScriptとサーバーサイドJavaScriptの二つに大きく分類することができ、クライアントサイドJavaScriptはWebブラウザ上で実行され、Webアプリケーションの中で、フロントエンド(ユーザーが直接触れる部分)を担当します。
一方、サーバーサイドJavaScriptはバックエンド(データ処理や通信などユーザーから見えない部分)での処理を担い、実行環境として「Node.js」が利用されます。

Node.jsでは、フロントエンドとバックエンドの両方でJavaScriptが実行でき、同じ言語を使ってアプリケーション全体を構築することができます。そのため、プログラムの管理もしやすく、開発効率を向上させることができます。

JavaScriptは、2つ以上の処理を並行して実行できない言語のため、一つの処理が完了するまで次の処理には移ることができず、時間がかかる処理を行っている間はその他の操作やページのレンダリングが止まり、画面が固まってしまうように見えることがあります。加えて、多数の同時接続が発生すると処理への応答が遅くなり、パフォーマンスに影響がでます。(※レンダリングとは、HTMLやCSS、画像のデータなどが読み込まれ、ブラウザ上に描画される過程のことを指します。)

一方、Node.jsは「イベントループ」という仕組みを採用しており、一つの処理が完了するのを待たずに次々と処理することができ、非常に効率的で高速な処理を実現することができます。この仕組みでは、多くのユーザーが同時にアクセスするようなWebアプリケーションでも高いパフォーマンスを維持することができます。

トピック035ではNode.jsを実際にインストールし、ソースコードを記述してその結果を確認しながら学習します。Node.jsのインストール手順はこちらの記事で詳しく説明していますので、ご自身の環境でインストールしてみましょう!

モジュールとは

モジュールとは、一連の機能やコードが組み込まれたJavaScriptファイル、またはそれらのファイルを含むフォルダのことです。Node.jsアプリケーションでは、プログラムを複数のモジュールに分割し、各モジュールが独立して機能するように設計されています。これにより、HTTPリクエストを処理するモジュールや、データベースと通信するモジュールなど、様々なモジュールを組み合わせて大規模なプログラムを構築することができます。

それでは、簡単にNode.jsに触れてみましょう。
「lesson」フォルダ内に「node」という名前の新しいフォルダを作成し、その中に「server.js」という名前でJavaScriptファイルを作り、以下の記述例を貼り付けましょう。

■server.js

const http = require("http");
const port = 3000;

const server = http.createServer((request, response) => {
    response.writeHead(200, {
      "Content-Type": "text/html",
      "Content-Type":"text/html;charset=utf-8"
    });
    response.write("<h1>Hello World!</h1>");
    response.end();
});
server.listen(port);

上記記述例ではNode.jsを使用して、Webサーバを構築し、ブラウザ上に「Hello World!」という文字を表示する内容となります。

require()

概要:モジュール化されたJavaScriptファイルをNode.jsから取り込み、利用するための関数です。引数には「モジュール名」や「ファイルのパス」を指定します。

listen()

概要:Node.jsでWebサーバを起動し、指定したポート番号でリクエストをリッスン(待ち受け状態に)します。
※ポート番号とは、TCP/IP通信(インターネット通信を可能にするためのプロトコル群)において コンピュータが通信に使用するプログラムを識別するための番号を表します。

現状のままではブラウザで確認することはできませんので、実際にサーバを起動させて、表示を確認してみましょう。
Node.jsを使用する際は、コンピュータのターミナルを開き、「node」コマンドを使用します。
(※ターミナルとは、コマンド(命令文)を利用してプログラムを実行したり、システム設定を変更するためのアプリケーションです。今回はVSCodeに搭載されているターミナルを使用します。)

node

概要:Node.jsの本体のプログラムで、このプログラムにJavaScriptで書かれたファイルを指定することで、サーバーサイドでJavaScriptを実行することができます。コマンドの指定方法では、node コマンドの後に実行したいJavaScriptファイルを指定します。

以下はserver.jsの実行手順と、その表示結果です。

①VSCodeを開き、画面上部の「ターミナル(T)」にカーソルを合わせます。
②表示されたメニューから「新しいターミナル」をクリックすると、VSCodeの下部にターミナルが表示されます。

③VSCodeの下部にターミナルが表示されるので、cdコマンドを使用して「node」フォルダに移動します。

■<Windowsの場合>

C:\Users\ユーザ名> cd $env:USERPROFILE\Desktop\lesson\node

■<Mac OSの場合>

> cd $HOME/Desktop/lesson/node

nodeコマンドを使用して実際にサーバを起動しましょう。今回はファイル名がserver.jsなので「node server.js」とすることで実行できます。

■<Windows・Mac OSの場合>

> node server.js

コマンドを実行後、Webブラウザを開き「http://localhost:3000」にアクセスすると、Hello World!という文字が表示されたら成功です。
(※Windowsで実行する場合は、セキュリティ警告が表示されることがありますが、その場合は「許可」を選択してください。)

なお、今回使用したモジュールは一度起動すると手動で停止するまで動作し続けます。終了するにはターミナル上でショートカットキー「Ctrl」キー+「c」を入力しましょう。

上記のように、トピック035ではターミナル上でコマンドを入力する必要があります。フォルダを移動する「cd」コマンドなどは試験に出題されないと思いますが、学習するうえで必要になりますので、覚えておきましょう。

npm

npm(Node Package Manager)は、JavaScriptのパッケージ管理システムです。Node.jsのモジュールを管理するために使われます。npmを使用すると、プロジェクトに必要なライブラリやフレームワーク(プログラム開発に必要な機能をまとめた枠組み)を簡単にインストールしたり、自分で作成したモジュールを公開することができます。

なお、npmはNode.jsと共に自動でインストールされます。Node.jsで使用することが可能なモジュールを利用するには、「npm init」というコマンドを使って、「package.json」ファイルを作成する必要があります。

package.json

概要:プロジェクトやアプリケーションの基本情報(名前、バージョン、スクリプトの定義など)が記述されているファイルです。npmを使用して、ライブラリやモジュールをインストールする際、システムがpackage.jsonから依存関係を読み取り、必要なライブラリを自動で判断してインストールします。また、package.jsonを使用することで、複数の開発者が同じプロジェクトを進める際にも、必要なライブラリを正確に管理することができます。
以下はpackage.jsonファイルの表示例です。

■package.json

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npm init

概要:プロジェクトを初期化してpackage.jsonを生成します。既にpackage.jsonファイルが存在する場合は、npm initコマンドを実行することで内容を更新することができます。
以下はpackage.jsonの作成手順です。

①VSCodeでターミナルを開いて任意のフォルダに移動します。今回はデスクトップ上の「node」フォルダに移動します。

■<Windowsの場合>

C:\Users\ユーザ名> cd $env:USERPROFILE\Desktop\lesson\node

■<Mac OSの場合>

> cd $HOME/Desktop/lesson/node

②「npm -y init」コマンドを入力し、package.jsonファイルを作成します。

■<Windows・Mac OSの場合>

> npm -y init 

※「npm init」コマンドを実行すると、ターミナル上に対話形式で必要な情報を入力する必要がありますが、今回は質問をスキップするために「-y」オプションを使用します。細かく設定する場合は、それぞれの質問に対して入力する必要がありますが、特別なことが無い限り、デフォルトの設定を変更する必要はありません。

npm install

概要:npmから使いたいモジュールをインストールするためのコマンドです。ターミナルで「npm install (モジュール名)」と入力すると使用できます。インストールしたモジュールはプロジェクトフォルダ内の「node_modules」というフォルダに保存されます。
※npm installを使ったモジュールの具体的な記述例については次回の記事にて説明するので、本章では省略します。

node_modules

概要:package.json に記述された依存関係に基づいて、npmや他のパッケージ管理システムを使用してインストールされるパッケージが保存される場所(フォルダ)です。

前述の通り、Node.jsはJavaScriptを使用するため、JavaScriptの基礎知識が必要で、ターミナル操作にも慣れる必要があります。これまでに学習したJavaScriptはブラウザを通してすぐに結果を確認することができましたが、Node.jsではnodeの基本操作と適切なJavaScriptコードを記述しなければ、結果が表示されません。最初は戸惑うかもしれませんが、じっくりと学習し、理解を深めましょう!

それでは、今回はここまで〜。

PAGE TOP