Lesson2では、Node.jsの環境構築について解説します。Node.js本体はもちろん、コードエディタ「VSCode」やパッケージ管理ツール「npm」との連携も学んでいきましょう。

まずはNode.jsのインストールから始めます。手順に沿えば難しいことはありません。掲載した画像と見比べながら読み進めてください。

インストーラーをダウンロードする

Node.jsをインストールする方法として、最も手軽で確実なのは公式のインストーラーを使用することです。

すでにNode.jsをインストールしている方も、本教材に取り組むにあたって最新の推奨版をインストールしましょう。

※以下、掲載している画像はWindows11のものです。Macを使用している場合も基本的なインストールの流れは変わりません。環境に応じて読み替えるようにしてください。

Node.js公式サイト

Node.js 公式サイト画面

表示されているバージョンが2つありますが、左側に表示される「LTS」バージョンを選択してください。LTSとは「Long Term Support」の略で、公式サイトが長期サポートを明言している安定版です。

一方、右側に表示されているのは、安定性を約束しない代わりに追加機能を盛り込んだ最新版です。

新機能を試したいなどの理由が無い限りは、基本的にLTS版を使用するようにしてください。

インストーラーを起動する

ここからはインストーラーを操作します。インストーラーの画面を続けて掲載していますが、注釈が無い限りは「Next」をクリックして問題ありません。

規約画面です。同意する場合は「I accept the terms in the Licence Agreement」にチェックを入れ、 「Next」を押して次画面に進みます。

インストール先を選択する画面です。変更する場合は「Change」から変更してください。

インストールするソフトウェア一覧です。前述した「npm」もここでインストールされます。

インストールを自動化するために、関連ツール（Chocolatey）を導入するかどうか聞かれています。今回は必要ないためチェックを外して進みましょう。

最後に「Finish」をクリックすれば完了です。

インストールできたか確認する

正常にインストールできたか、コマンドラインを立ち上げて確認しましょう。

コマンドラインが起動したら、以下の通り入力してください。

コマンドプロンプト

node --version

公式サイトで選択したバージョンが表示されれば、問題なくインストールされています。

コマンドプロンプト

v16.16.0

これでNode.jsのインストールは完了です。

Node.jsは頻繁にアップデートが行われるため、プロジェクトによって複数のバージョンを使い分ける機会が頻繁に生じます。「NVM」などのバージョン管理ツールも多く公開されているため、積極的に活用するといいでしょう。

次のChapterでは、インストールしたNode.jsを実際に起動してみます。

Chapter1では、Node.jsのインストール方法を解説しました。それでは、インストールしたNode.jsを実際に起動してみましょう。

Node.jsを初回起動する

まずは任意の場所に作業用ディレクトリを作成します。その中に以下のコードを書いたJavaScriptファイルを作成してください。

hello.js

console.log("Hello World!");

※ここでは「practice」というディレクトリと、「hello.js」というJavaScriptファイルを作って進めます。

続いて、コマンドプロンプトで以下のコードを実行します。

コマンドプロンプト

node hello.js

「Hello World!」の文字が出力されたら成功です。

簡単にコードを説明しましょう。「hello.js」ファイルに書いたconsole.logは、引数として渡された文字列を出力するコードです。

ここではHello Worldが渡された結果、コマンドライン上に同様の文字列が出力されました。

試しに上記のコードをconsole.log("hogehoge")に変更すると、「hogehoge」の文字が出力されるはずです。

参考：ディレクトリ（フォルダ）の移動

コマンドプロンプトでnode hello.jsを実行する際、カレントディレクトリが作業用ディレクトリであることを確認するようにしましょう。

以下のコマンドでカレントディレクトリを上の階層に変更できます。

1つ上のフォルダに移動するコマンド

cd ..\

たとえば、カレントディレクトリがC:\User\hoge\fugaであるとき、 上のコマンドを実行するとC:\User\hogeに移動します。

一方、次のコマンドを入力するとカレントディレクトリを指定した階層に変更できます。

1つ下のフォルダに移動するコマンド

cd (移動したいフォルダ名)

たとえば、カレントディレクトリがC:\User\hogeのとき、 cd fugaを実行すると、カレントディレクトリが C:\User\hoge\fugaに移動します。

ここで取り上げたコマンドライン操作は、Node.jsの基本です。今後も繰り返し使うことになるため、忘れずに覚えておいてください。

このChapterでは、ソースコードを書く際に便利なテキストエディタ「Visual Studio Code」（以下VSCode）のインストール手順を紹介します。

VSCodeは、Microsoft社が2015年に発表したテキストエディタ（コードエディタ）です。オープンソースとして無償提供されており、軽量な動作と拡張性の高さを特徴としています。

Node.js用の機能も充実しており、きっと皆さんの開発を後押ししてくれるはずです。今まで通常のテキストエディタを使用していた方も、この機会にVSCodeを体験してみましょう。

VSCodeをインストールする

今回もWindowsを想定してインストールを行います（MacやLinuxの場合は適宜読み替えてください）。

VSCodeのダウンロードページから、「Windows User installer」を選択します。

Visual Studio Codeのダウンロードページ

VSCodeダウンロード画面

Windowsの場合「x64」「x86」「Arm64」版が用意されています。自分のOSのビット数を調べ、64ビットであれば「x64」を、32ビットであれば「x86」を選択してください。

なお、Windowsのビット数はPCの「設定＞システム＞バージョン仕様」で確認できます。

上記の場合は64bitの方をインストールします。

インストール方法による違い

ちなみに、Windowsの場合は同じバージョンでも3種類のインストール手段が提供されています。

• User Installer
• System Installer
• .zip

特別な事情がない限り、「User Installer」を選んでおいて問題ありません。参考までに、インストール手段による違いを紹介します。

インストール方法	説明
User Installer	アカウント毎に個別インストールする。
System Installer	すべてのアカウントに一括インストールする。
.zip	インストーラーを経由せず、展開先のディレクトリ内にファイルを保存する。

利用しているPCに複数のアカウントが存在する場合、「System Installer」からインストールすることですべてのアカウントがVSCodeを使えるようになります。

「.zip」はインストーラーを経由せず、圧縮ファイルから直接VSCodeをインストールします。設定ファイルなどはすべて解凍したディレクトリ内に保存されるため、外出先などで一時的にVSCodeを使いたい場合に最適です。

インストーラー経由でインストールすると、VSCodeのバージョンアップがあった場合に自動でアップデートを行ってくれます。長期的にVSCodeを使う場合は「User Installer」からインストールするようにしましょう。

インストーラーを使ってインストールする

ここからは、「Uset Installer」によるインストール手順を解説します。

Node.jsと違ってVSCodeのインストーラーは日本語化されているため、表示されている説明に従ってインストールしてください。

上記の画面にある「PATHへの追加」は、コマンドプロンプトからVSCodeが開けるようになる機能です。その他の項目は。必要に応じてチェックしてください。もちろん、後から設定し直すことも可能です。

以上でインストール完了です。VSCodeの機能は多岐にわたり、ここですべてを紹介することはできません。日本語の情報も充実しているため、ぜひ使いながら覚えてくようにしてください。

以降のChapterでは、VSCodeの画面を参照しながらコードの解説をしていきます。

Node.jsの特徴のひとつに、豊富なパッケージによる拡張性の高さが挙げられます。公式に提供されるパッケージはもちろん、有志によるオープンソース開発も盛んであり、多彩な機能を誰でも試すことが可能です。

こうしたパッケージは、npm（Node Package Manager）と呼ばれるツールで手軽にインストールできます。パッケージ間の依存関係を整理し、バージョンの競合問題を避けることもできるため、実際の開発では手放せないツールといえるでしょう。

今回は、このnpmの概要と使い方、および「package.json」と呼ばれるファイルについて学習します。

npmとは

npmは、Node.jsのパッケージを管理するためのツール（パッケージ管理システム）です。Node.jsの黎明期から続く歴史を持ち、現行ツールの中でも高いシェアを誇ります。

Node.jsは世界中の開発者に利用されており、オープンソースの様々なパッケージが公開されています。npmを介してこれらのパッケージを導入することで、自由度の高い開発が実現可能です。

パッケージ（モジュール）とは

ここで「パッケージ」という言葉について補足しておきましょう。Node.jsにおけるパッケージとは、「複数のJavaScriptモジュールをまとめたもの」を指します。

通常、JavaScriptの関数は別のファイルから呼び出せません。外部から参照するためには、次のようなexport文を使って明示的にエクスポートする必要があります。

main.js

export const myFunc = function (num1, num2) {
  return num1 + num2
}

パッケージは、このエクスポートされたJavaScript関数を機能ごとにまとめたものです。多くはオープンソースとして公開され、誰でも手軽に利用することが可能です。

参考として、パッケージの具体例をいくつか挙げておきます。

• 配列・文字列操作を行うためののパッケージ
• httpリクエストを処理するためのパッケージ
• 高速なWebフレームワークのパッケージ
• 単体テストを作成するためのパッケージ

上記はあくまでも一例です。実際は100万以上のパッケージがnpm上で公開されており、自由にインストールすることが可能です。

パッケージ管理の難しさ

ところで、そもそもなぜnpmのようなパッケージ管理システムが求められているのでしょうか。その理由は、パッケージの大規模化・複雑化にあります。

前述した通り、パッケージは複数のJavaScriptモジュールを内包しています。しかし、パッケージの数が増え、その規模が大きくなるにつれて、内部で他のパッケージを使用するパッケージも増えてきました。

以下のイメージ画像が示す通り、現在のパッケージといえば、他のパッケージに依存していることがほとんどです。

パッケージのイメージ

このように大規模化・複雑化したパッケージでは、主として次の問題が発生します。

• バージョン管理の問題
• 依存関係の問題

いずれも手作業による環境構築を困難にするものです。順に解説していきましょう。

バージョン管理の問題

使用するパッケージの数が増えるにつれて、バージョン管理（バージョニング）の不具合が生じやすくなります。

バージョニングの問題は、何もパッケージに限った話ではありません。ソフトウェア業界において、バージョン間の互換性には慎重な態度が求められます。

ひとつのソフトウェアをアップデートすることで、連動する他のソフトウェアが動作しなくなり、システム全体のダウンを引き起こす可能性があるからです。

そのため、ほとんどのソフトウェアはバージョンごとに互換性の有無を細かく定めています。PCや携帯のOSに付く「4.3.2」といった数字も、このルールに従ったものです。

依存関係の問題

複雑化したパッケージは、同時に依存関係の問題も引き起こします。

一言でいえば、依存関係とは「AファイルでBファイルのモジュールを使っている」ような状況です。モジュールがファイル間での呼び出しを前提としている以上、そこにはつねに依存関係が生じます。

モジュールの利用

ごく単純なシステムであれば、Aファイルが依存するBファイルをインストールするだけで済みます。しかし、実際にはBファイルもCファイルに依存しており、CファイルもDファイルに依存する……といった複雑な状況が発生し得るでしょう。

パッケージ管理ツールによる自動化

このバージョン管理と依存関係の問題を解消するため、パッケージ管理ツールは開発されました。

Webアプリケーション開発では、外部パッケージを使う場面が多くあります（前述した通り、多くは「ライブラリ」と呼ばれます）。

外部パッケージは複雑な依存関係のもと構築されており、バージョンの互換性も様々です。手当たり次第に最新パッケージをインストールすれば良いという訳ではありません。正しい順番で、正しいバージョンのパッケージをインストールする必要があります。

二、三のパッケージならまだ管理できるでしょう。しかし、依存パッケージが10や100となると、現実的な管理はとても不可能です。

人的ミスも起きかねないため、npmのようなパッケージ管理システムが必要となるでしょう。

npmの使い方

それでは、実際にnpmを使う方法を見ていきましょう。

npmはNode.jsと同時に自動でインストールされ、コマンドラインから使用可能です。

試しにコマンドライン上にnpm -vと入力してください。以下のように何らかのバージョンが表示されれば、npmを利用できる環境は整っています。

コマンドライン（一例）

$ npm -v
6.14.12

npmでライブラリをインストールする

npmの操作は難しくありません。ライブラリをインストールする場合は以下のコマンドを打ちます。

コマンドライン

npm install ライブラリ名

たとえば、今後のLessonで学ぶライブラリ「Express」を入れる場合は以下のコマンドです。

コマンドライン

npm install express

この「express」というライブラリは、パッケージ間の複雑な依存関係によって構築されています。それらのパッケージをすべて手作業でインストールするのは大変です。

その点、npmであれば使用者が意識せず、自動で構築を行ってくれます。

npmでスクリプトを実行する

npmはパッケージ管理だけではなく、開発に必要なスクリプトを実行する機能もあります。

最もよく使われるのは、サーバーを立ち上げるためのスクリプトです。後述する「package.json」に任意のスクリプトを記述し、たとえばstartコマンドを割り当てます。

以降、コマンドラインから次のように入力するだけでサーバーの立ち上げが可能です。

コマンドライン

npm run start

他によく使われるものとしては、以下のスクリプトがあります。

• 他にもパッケージの一覧を表示する
• 開発プロジェクトの初期化を行う
• 特定のファイルを実行する

上記の通り、npmはパッケージ管理だけではなく、開発に必要な機能の一部を担ってくれます。Node.jsを用いた開発には欠かせないツールと言っても過言ではありません。

package.jsonとは

Node.jsで必ず利用するファイルに「package.json」があります。主に使用するライブラリのバージョンが記載されているほか、前述したスクリプトの設定も行えるファイルです。

package.jsonを使う流れは以下の通りです。

1. 以下の例のようにnpm installコマンドでライブラリをインストールする
2. インストールされたライブラリのバージョン情報が自動で記載される

コマンドライン

npm install [ライブラリ名]

たとえば、Expressがインストールされた後のpackage.jsonは以下のようになります。"dependencies"の部分を見ると「Express」に対応する形で記載されています。

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  // ここに注目
  "dependencies": {
    "express": "^4.18.2"
  }
}

また、package.jsonにあらかじめライブラリとバージョンを記載しておき、一気にインストールすることも可能です。

その場合はライブラリ名を用いず、以下のコマンドで複数のライブラリをインストールできます。

コマンドライン

npm install

プロジェクトの作成

前回インストールしたVSCodeを使って、Chapter2「Node.jsを動かしてみる」で作成したディレクトリを開きましょう。

開始時のフォルダ構成

practice
 └─hello.js

上部の「File」メニューから「Open File」を選択します。

VSCodeの画面

画像下部に「ターミナル」と表示されているのは、VSCode内で立ち上げたコマンドラインです。通常のコマンドラインと操作は変わりません。

このように、VSCodeではコードの編集とコマンドラインの実行を同じ画面で行うことが可能です。

package.jsonの作成

続いて、プロジェクトの初期設定を行います。カレントディレクトリを「practice」に変更し、以下のコマンドを入力してください。

コマンドプロンプト

npm init -y

実行すると、カレントディレクトリに「package.json」というファイルが作成されているはずです。

コード実行後のVSCodeの画面

前述した通り、「package.json」ファイル内のdependencies以下には、インストールしたパッケージの情報が書き込まれます。現在はnpmでパッケージをインストールしていないため、何も記述されていない状態です。

参考：パッケージのインストール方法

パッケージは、ターミナルでnpm install <package名>を実行することでインストールできます。 ただし、インストール時に以下のオプションを指定できます。

コマンド	インストール種類	使うタイミング
npm install -g <package名>	グローバルインストール	現在開発中のプロジェクト以外でも使うパッケージの場合
npm install -D <package名>	ローカルインストール	・開発中のプロジェクトのみで使うパッケージの場合 ・開発環境のみで使うパッケージの場合
npm install <package名>	ローカルインストール	・開発中のプロジェクトのみで使うパッケージの場合 ・本番環境でも使うパッケージ場合

※開発環境：文字通りプロジェクトの開発を行う環境

※本番環境：実際にユーザーがシステムに触れる環境

開発環境と本番環境の違いについては、この後のLesson12「複数の環境に適用する」で詳しく扱います。現時点では、環境ごとにパッケージを使い分けられることを気に留めておきましょう。

まとめ

今回はNode.jsのパッケージ管理システム「npm」について学びました。

npmを用いることで、面倒なバージョン管理や依存関係の問題から解放されます。また、開発に必要なスクリプトを実行できるなど、パッケージ管理以外の機能も豊富です。

npmの各種設定は「package.json」に記述されます。"dependencies"以下にあるパッケージ名とバージョンを確認するようにしてください。

次のChapterでは、Node.jsを使って実際にブラウザ上に文字を表示させてみます。

前回のChapterでは「package.json」の内容を解説しました。それでは、実際にコードを記述し、ブラウザに「Hello World!」の文字を表示させてみましょう。

main.jsの作成

まずはVSCodeを開いて、作業用の新しいファイルを作成します（左側の「エクスプローラー」ビューから直接ディレクトリを参照できます）。

画像の通り、作業ディレクトリの直下に「main.js」というファイルを作成しました。

続いて、作成した「main.js」ファイルに以下のコードを書いてみましょう。

main.js

const http = require('http');

var server = http.createServer(
  (request,response)=>{
    response.end('Hello World!');
  }
)
server.listen(3000);

main.jsの起動

コードの説明は後ほど行います。VSCodeのターミナルで以下の通り入力し、Node.jsを実行しましょう。

ターミナル

node main.js

その後、任意のブラウザで「localhost:3000」にアクセスしてください。 以下の画像のように表示されたら成功です。

コードの解説

先ほどの「main.js」について、具体的なコードを見ていきましょう。

main.js

const http = require('http');

上記の部分では、HTTPにアクセスするための「httpモジュール」を読み込み、定数httpに保管しています。

main.js

var server = http.createServer(
  (request,response)=>{
    response.end('Hello World!');
  }
)

上記の部分では、クライアントからのアクセス（リクエスト）に対するレスポンスを記述しています。

今回の場合、レスポンスとして「Hello World!」の文字列を出力する指定です。

main.js

server.listen(3000);

最後の箇所でサーバーのポート番号を指定しています。

以上でLessson2は完了です。Node.jsの環境構築を無事に終え、簡単なコードを実行することができました。

次のLesson3では、EJSとExpressを使って動的な画面を表示させてみましょう。