Node.jsとは~入門編~インストール方法と使い方

Node.jsとは~入門編~インストール方法と使い方

更新日
2023/02/14
カテゴリ
Javascript
プロセス
実践
ホーム

初心者向け学習方法一覧はこちら

はじめに

本記事ではサーバサイドのJavaScript実行環境であるNode.jsについて解説します。 もともとはWebページの動的なコンテンツを作成するために生まれたJavaScriptですが、Node.jsという実行環境が生まれたことでサーバサイドの処理もJavaScriptで記述できるようになりました。

Node.jsとは？

Node.jsはサーバーサイドのJavaScriptの実行環境です。 もともとJavaScriptはブラウザ上で動的コンテンツを実現するために利用されていました。 サーバーサイドで何らかの処理を行う際は別の言語（PHPやJava）で開発していたのですが、Node.jsの登場によりサーバーサイドの処理もJavaScriptで記述可能となりました。

Node.jsにはWebサーバーを動かすためのライブラリも含まれているので、自分でサーバを動かすことが可能です。 Node.jsによって構築されたサーバーは大量のアクセスを処理する能力が高く、リアルタイムに処理を実行する事ができます。

そのため、大量のアクセスが発生するチケットなどの予約サイトの開発に使われていることが多いです。

Node.jsの使用方法

まずは母体となるNode.jsをインストールします。 Node.jsをインストールすると、コアモジュールと呼ばれるサーバー生成やWebアプリ開発に欠かせないモジュール群も標準で含まれています。

その他にもnpm（Node Package Manager）というパッケージを管理するツールも含まれています。 npmは公開されているパッケージやモジュールを簡単にインストールして利用可能にしてくれます。

管理ツールを利用しなくても外部のパッケージをインストールして利用することはできますが、外部のパッケージが更新されたときやパッケージ間で依存関係がある場合などユーザがすべてを把握して管理するのが難しくなります。

npmはパッケージの依存・競合関係を適切に管理してくれるので、ユーザが外部パッケージの変更点を意識しなくても適切に利用することが可能になります。

Node.jsの環境構築

それでは実際にNode.jsの環境構築をしてみましょう。

Node.jsの公式サイトにアクセスします。 https://nodejs.org/ja/

「推奨版」と「最新版」の2つがありますが、今回は推奨版をインストールします。 推奨版というのは現在までに公開されたバージョンのうちで安定稼働がある程度保証されているバージョンです。 基本的に推奨版をインストールして利用するようにしましょう。

Windowsでのインストール

Windowsマシンで公式サイトにアクセスするとWindows用のダウンロードページが表示されます。 本記事作成時点の推奨版は「16.16.0 LTS」ですが、インストール時点で推奨版となっているバージョンをダウンロードしてください。

image

ダウンロードしたインストーラーを起動してセットアップを完了してください。

MacOSでのインストール

Macマシンで公式サイトにアクセスするとMac用のダウンロードページが表示されます。 Windowsと同様に「推奨版」を選んでダウンロードしてください。

image

ダウンロードしたインストーラーを起動してセットアップを完了させてください。

image

インストール後の動作確認

インストーラーでセットアップが完了したら、コマンドを実行できるアプリを起動し、Node.jsおよびnpmが使用できるようになっていることを確認します。

  • Windowsの場合は「PowerShell」または「コマンドプロンプト」
  • macOSの場合は、「ターミナル」アプリ

Windowsのコマンドプロンプトの場所がわからない場合は、検索ボックスで「コマンドプロンプト」を検索して起動しましょう。

image

MacのターミナルもSpotlight検索から検索して起動できます。

image

コマンドプロンプトでもターミナルでも実行するコマンドは同じです。 以下のコマンドを実行して結果を確認します。

> node -v
> npm -v

実行結果としてインストールしたバージョンが表示されれば、Node.jsを使用する準備ができています。 コマンドが実行できない場合はPCを再起動して再実行してみましょう。

image

MacOSでのインストール

Macマシンで公式サイトにアクセスするとMac用のダウンロードページが表示されます。 Windowsと同様に「推奨版」を選んでダウンロードしてください。

image

ダウンロードしたインストーラーを起動してセットアップを完了させてください。

image

インストール後の動作確認

インストーラーでセットアップが完了したら、コマンドを実行できるアプリを起動し、Node.jsおよびnpmが使用できるようになっていることを確認します。

  • Windowsの場合は「PowerShell」または「コマンドプロンプト」
  • macOSの場合は、「ターミナル」アプリ

Windowsのコマンドプロンプトの場所がわからない場合は、検索ボックスで「コマンドプロンプト」を検索して起動しましょう。

image

MacのターミナルもSpotlight検索から検索して起動できます。

image

コマンドプロンプトでもターミナルでも実行するコマンドは同じです。 以下のコマンドを実行して結果を確認します。

> node -v
> npm -v

実行結果としてインストールしたバージョンが表示されれば、Node.jsを使用する準備ができています。 コマンドが実行できない場合はPCを再起動して再実行してみましょう。

VSCode上からNode.jsを実行する

Node.jsを使用する準備が整ったらVSCode上で実行してみましょう。 まずは、VSCodeに便利なプラグインの追加と設定の変更を行います。

コード整形プラグインを追加します。 拡張機能の検索から「Prettie」を検索してインストールします。

image

VSCodeの設定を開いて「テキストエディター」→「書式設定」のFormat On Saveにチェックを入れます。 日本語化していない場合は「Text Editor」→「Formatting」を開いてください。

image

次にVSCodeの設定で対応する括弧に色をつける機能を有効にします。

設定で「bracket」と検索しましょう。 Editor > Bracket Pair Colorization: Enableにチェックを入れて有効にします。

image

これで、設定の変更は完了です。

VSCodeでjsファイルを作ってみましょう。 新規ファイル「index.js」を作成して、コンソールログを出力するコードを1行記述します。

console.log("Hello Node.js!");

ファイルを保存したら、右クリックのメニューから「統合ターミナルで開く」を選んでターミナルを表示します。

image

ターミナルで以下のコマンドを実行します。

% node index.js

ターミナルにコンソールログとして「Hello Node.js!」が表示されます。 これがjsファイルを実行した結果です。

Node.jsの環境があればWebブラウザがなくてもJavaScriptのコードが実行可能になります。

Node.jsでサーバを立ててみよう

Node.jsでサーバを立ててみましょう。 VSCodeで新規ファイル「server.js」を作成して下記のコードを記述します。

// モジュール準備
const http = require("http");

// サーバー作成
const server = http.createServer((_, res) => {
  // HTMLファイルを返却する準備
  res.writeHead(200, {
    "Content-Type": "text/html; charset=utf-8",
  });
  // HTMLファイルの内容
  res.end("<h1>Hello World!</h1>");
});

// サーバー起動
const port = 3000;
server.listen(port, function () {
  console.log("Node.js Server Started:" + port);
});

サンプルコードではサーバーを生成してHTMLファイルの内容を返却します。 返却する内容は<h1>タグで囲われたHello World!という文章です。

ローカルホストの3000番ポートで起動する設定にしています。

ファイルを保存したらVSCodeのターミナルで実行しましょう。

% node server.js

image

コマンドを実行したら、Webブラウザで「http://localhost:3000/」にアクセスしてみましょう。 Hell World!が表示されます。

image

動作確認後はVSCodeのターミナルから起動したサーバを停止しておきましょう。 Windowsではctrl + c、MacOSではcontrol + cで停止させられます。

image

Webサーバーを作ろう

先ほどはjsファイル内に直接返却するHTMLファイルの内容を記述しましたが、次はjsファイルとは別にHTMLファイルを用意して、そちらの内容を返却するサーバの処理を学びましょう。

今回の作業で作成するフォルダとファイルの階層関係はこのようになります。

image

先ほどとは別の階層に「server.js」を新規作成して、下記のコードを記述します。

// モジュール準備
const http = require("http");
const fs = require("fs");

// サーバー作成
const server = http.createServer((_, res) => {
  // HTMLファイルを返却する準備
  fs.readFile("./public/index.html", "UTF-8", (_, data) => {
    res.writeHead(200, { "Content-Type": "text/html" });
    res.write(data);
    res.end();
  });
});

// サーバー起動
const port = 3000;
server.listen(port, function () {
  console.log("Node.js Server Started:" + port);
});

同じ階層にpublicフォルダを作成します。 publicフォルダ内にindex.htmlを新規作成して、下記のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Title Page</title>
  </head>
  <body>
    <h1>Hello from Node.js Server!</h1>
  </body>
</html>

VSCodeのターミナルからserver.jsを起動します。 このときに先に起動していたサーバを停止していないと、同じ3000ポートを使用しようとするためエラーが発生します。 エラーが発生した場合は他のサーバを起動していないか今一度確認しましょう。 コマンドを実行したら、Webブラウザで「http://localhost:3000/」にアクセスしてみましょう。

image

index.htmlの内容が表示されます。

モジュールを使ってみよう

今回はnpxでhttp-serverというモジュールを実行して、同一フォルダ内のファイルにアクセス可能となるサーバを立ち上げます。

npxはNode.jsのnpmに含まれているコマンドです。 npxを使用するとモジュール設定などの手間を省いて簡単に実行できます。

今回は実行用フォルダ準備し、その中にHTMLファイルを2つ用意します。

まずは実行用に「NPX」というフォルダを新規作成します。

次に、「index.html」というファイルを新規作成して、下記のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Title Page</title>
  </head>
  <body>
    <h1>Hello from Node.js Server!</h1>
    <a href="next">Next Page</a>
  </body>
</html>

同じく、「next.html」というファイルを新規作成して、下記のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Next Page</title>
  </head>
  <body>
    <h1>Hello from Next Page!</h1>
    <a href="/">Title Page</a>
  </body>
</html>

ファイルを保存したら、右クリックメニューの「統合ターミナルで開く」をクリックしてターミナルを起動します。 ターミナルの%の前には実行するフォルダの名前が表示されています。

image

実行結果にhttp://127.0.0.1:8080とローカルネットワーク用URLが表示されます。 Webブラウザで「http://127.0.0.1:8080」にアクセスしてみましょう。index.htmlの内容が表示されます。

image

Next Pageというリンクをクリックするとnext.htmlの内容が表示されます。 http-serverで立ち上げたサーバが稼働している間は、同じフォルダ内のファイルにアクセスすることが可能です。

image

他にNode.jsでできること

今回はNode.jsでサーバを立ち上げてHTMLの内容を表示するサンプルを実行しましたが、他にもNode.jsでできることはたくさんあります。

Web開発でよく使われているフレームワークやライブラリ（Express.jsなど）はnpmの管理ツールの仕組みを利用しています。 例にあげたもの以外にもnpmの仕組みを活用している様々なフレームワークやライブラリが存在します。

npmを利用して外部のパッケージを有効に取り入れていきましょう。

他にも自分でWeb APIサーバを立ち上げることもできます。

Web APIサーバの立ち上げ方については次回の記事で詳しく解説していきます。

まとめ

今回はJavascriptのサーバサイドの実行環境であるNode.jsについて解説しました。 Node.jsを利用してサーバを立ち上げたり、リクエストに対する応答箇所をプログラムで記述したりとサーバサイドの処理について知識が深まったと思います。

次回はさらに発展させてNode.jsでWeb APIサーバを立ち上げる方法について解説していきます。

プログラミングスクールの選び方

転職を検討中の方向け

フリーランス・副業で活躍したい方向け

教養・キャリアアップしたい方向け

給付金について詳しく知りたい方向け

学習方法一覧

学習方法一覧

‣
学習方法
‣
VS Code
‣
GitHub
‣
Docker
‣
Linux
‣
SQL
‣
HTML
‣
CSS
‣
Javascript
‣
オブジェクト指向
‣
Ruby
‣
Python

Copyright © 2022 Protogram