Node 開発環境の設定

Node と Express のおかげで、ウェブアプリケーションの開発を始めるためにコンピューターをセットアップすることが非常に簡単になります。この節では必要なツールの概要、Ubuntu、macOS、および Windows に Node (および Express) をインストールするための最も簡単な方法について説明し、インストールをテストする方法を示します。

Express 開発環境には Nodejs、npm パッケージマネージャー、および (オプションで) ローカルコンピューターに Express Application Generator がインストールされています。

Node と npm パッケージマネージャーは、準備されたバイナリーパッケージ、インストーラー、オペレーティングシステムのパッケージマネージャー、またはソースから一緒にインストールされます (次の節を参照)。 Express は、npm によって、個々の Express ウェブアプリケーションの依存関係として (テンプレートエンジン、データベースドライバー、認証ミドルウェア、静的ファイルを提供するためのミドルウェアなどの他のライブラリーと共に) インストールされます。

npm は MVC パターンに従ったスケルトンの Express ウェブアプリケーションを作成するための便利なツールである Express Application Generator を (グローバルに) インストールするためにも使用できます。Express を使用するアプリを作成したり、同じアーキテクチャ上のレイアウトや依存関係を持つ Express アプリを構築したりするためにこのツールを使用する必要はないため、アプリケーションジェネレーターはオプションです。ただし、使い始めるのがはるかに簡単になり、モジュール式のアプリケーション構造が促進されるため、これを使用します。

テキストエディターやコード編集用の IDE、コードの異なるバージョンを安全に管理するための Git などのソース管理マネジメントツールなど、一般的な開発環境の一部である他の周辺ツールもあります。これらの種類のツール (特にテキストエディター) が既にインストールされていると仮定しています。

Node は Windows、macOS、Linux の多くの「フレーバー」、Docker などで実行できます (nodejs のダウンロードページに完全なリストがあります)。ほとんどのパーソナルコンピューターは開発中に Node を実行するのに必要な性能を持っているはずです。Express は Node 環境で実行されるため、Node を実行する任意のプラットフォームで実行できます。

この記事では Windows、macOS、および Ubuntu Linux のセットアップ手順を説明します。

たくさんの Node のリリースがあります - 新しいリリースにはバグ修正、ECMAScript (JavaScript) 標準のより最新のバージョンのサポート、そして Node API の改良が含まれています。

一般的には最新の LTS (長期サポート) リリースを使用するべきです。比較的最新の機能を持ちながら (そして現在も積極的にメンテナンスされています)、"最新の" リリースより安定しているからです。LTS バージョンに存在しない機能が必要な場合は、最新版リリースを使用してください。

Express は常に最新のバージョンを使うべきです。

データベースドライバー、テンプレートエンジン、認証エンジンなどのその他の依存関係はアプリケーションの一部であり、npm パッケージマネージャーを使用してアプリケーション環境にインポートされます。それらについては、後のアプリ固有の記事で説明します。

Express を使用するには、 Nodejs と Node Package Manager (npm) をオペレーティングシステムにインストールする必要があります。 これを簡単にするために、最初に node バージョンマネージャをインストールし、それを使用して最新の LTS(Long Term Supported) バージョンの node と npm をインストールします。

Windows 用の node バージョン管理ツールは数多くあります。 ここでは、node 開発者の間で高く評価されている nvm-windows を使用します。

nvm-windows/releases ページから任意のインストーラーを使用して最新バージョンをインストールします。 nvm-windows がインストールされたら、コマンドプロンプト（または PowerShell）を開き、以下のコマンドを入力して最新の LTS バージョンの nodejs と npm をダウンロードします。

nvm install lts

執筆時点での nodejs の LTS バージョンは 20.11.0 です。 下記コマンドで使用する現在のバージョンとして設定することができます。

nvm use 20.11.0

コマンド nvm --help を使用して、利用できるすべてのノードのバージョンやダウンロードした NVM のバージョンの一覧など、他にもコマンドラインオプションを探すことができます。

Ubuntu や macOS 用のノードバージョン管理ツールはいくつもあります。 nvmはより人気のあるものの 1 つで、 nvm-windows の元になったバージョンです。 nvm の最新バージョンをインストールする端末の手順については nvm > Install & Update Script を参照してください。

nvm がインストールされたら、端末を開いて以下のコマンドを入力し、最新の LTS バージョンの nodejs と npm をダウンロードしてください。

nvm install --lts

執筆時点での nodejs の LTS バージョンは 20.11.0 です。 コマンド nvm list はダウンロードしたバージョンと現在のバージョンを設定します。 下記コマンドで特定のバージョンを現在のバージョンとして設定することができます（nvm-windows の場合と同じです）。

nvm use 20.11.0

他にもコマンドラインオプションを探すには nvm --help コマンドを使用します。 これらは nvm-windows が提供するものと似ているか、同じであることが多いです。

特定のノードバージョンを使用するように nvm を設定したら、インストールをテストすることができます。 これを行うための良い方法は、端末やコマンドプロンプトで "version" コマンドを使用し、期待するバージョンの文字列を返すか調べることです。

> node -v
v20.11.0

Nodejs パッケージマネージャー npm もインストールされているはずで、同じ方法でテストできます。

> npm -v
10.2.4

もう少し刺激的なテストとして、ブラウザーで正しい URL にアクセスしたときにブラウザーに単純に "Hello World" を出力する、とても基本的な "純粋な Node" サーバーを作成しましょう。

1. 次のテキストを hellonode.js というファイルにコピーします。これは純粋な Node の機能を使用します（Express からは何もしません）。

   js

   //HTTP モジュールを読み込む
   const http = require("http");
   const hostname = "127.0.0.1";
   const port = 3000;
   
   //HTTP サーバーを作成し、3000 番ポートでリクエストを待機します。
   const server = http.createServer((req, res) => {
     //HTTP ステータスとコンテンツタイプを持つ応答 HTTP ヘッダーを設定します。
     res.statusCode = 200;
     res.setHeader("Content-Type", "text/plain");
     res.end("Hello World\n");
   });
   
   //3000 番ポートでリクエストを待機し、受信したときにログ出力するコールバック関数
   server.listen(port, hostname, () => {
     console.log(`Server running at http://${hostname}:${port}/`);
   });
   

   このコードは "http" モジュールをインポートし、それを使用して 3000 番ポートで HTTP リクエストを待機するサーバーを作成 (createServer()) します。次に、スクリプトはサーバーをテストするために使用できるブラウザー URL についてのメッセージをコンソールに出力します。 createServer() 関数は、HTTP リクエストを受信したときに呼び出されるコールバック関数を引数として取ります。これは HTTP ステータスコード 200 ("OK") とプレーンテキスト "Hello World" のレスポンスを返します。

   メモ: このコードが何をしているのか正確に理解できなくても心配しないでください。Express を使い始めたら、コードについて詳しく説明します。

2. コマンドプロンプトで hellonode.js ファイルと同じディレクトリーに移動し、次のようにスクリプト名とともに node を呼び出してサーバーを起動します。

   bash

   node hellonode.js
   

   サーバーが起動すると、サーバーが動作している IP アドレスを示すコンソール出力が表示されます。

   Server running at http://127.0.0.1:3000/
   

3. http://127.0.0.1:3000 の URL に移動します。すべてがうまくいったら、ブラウザーは単に文字列 "Hello World" を表示するはずです。

Node 自体の次に、npm は Node アプリケーションを操作するための最も重要なツールです。 npm は、アプリケーションが開発、テスト、運用に必要なパッケージ（JavaScript ライブラリー）を取得するために使用されます。また、開発プロセスで使用されるテストやツールを実行するために使用されることもあります。

手動で npm を使用して、必要な各パッケージを別々に取り出すことができます。通常、代わりに package.json というプレーンテキストの定義ファイルを使用して依存関係を管理します。このファイルにはパッケージの名前、バージョン、説明、実行する初期ファイル、プロダクション依存関係、開発依存関係、それが動作可能な Node のバージョンなど、特定の JavaScript "package" に対するすべての依存関係が一覧表示されます。package.json ファイルには、npm がアプリケーションを取得して実行するために必要なものがすべて含まれている必要があります (再利用可能なライブラリーを作成している場合は、この定義を使用してパッケージを npm リポジトリーにアップロードし、他のユーザーが利用できるようにします)。

次の手順では npm を使用してパッケージをダウンロードし、それをプロジェクトの依存関係に保存してから、それを Node アプリケーションで要求する方法を示します。

1. まず、新しいアプリケーション用のディレクトリーを作成し、そこに移動します。

   bash

   mkdir myapp
   cd myapp
   

2. アプリケーション用の package.json ファイルを作成するには、npm init コマンドを使用します。このコマンドはアプリケーションの名前とバージョン、初期エントリーポイントファイルの名前（既定では index.js）など、さまざまなことを要求します。今のところ、既定値をそのまま使用します。

   bash

   npm init
   

   package.json ファイル (cat package.json) を表示すると、受け入れた既定値が表示され、最後にライセンスが表示されます。

   json

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

3. myapp ディレクトリーに Express をインストールし、それをあなたの package.json ファイルの依存関係リストに保存してください。

   bash

    npm install express
   

   package.json の依存関係節が package.json ファイルの最後に表示され、Express が含まれます。

   json

   {
     "name": "myapp",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC",
     "dependencies": {
       "express": "^4.17.1"
     }
   }
   

4. Express ライブラリーを使用するには、 require() 関数を index.js ファイルで呼び出し、アプリケーションに含めます。 これで、このファイルを "myapp" アプリケーションディレクトリーのルートに作成し、以下の内容を与えます。

   js

   const express = require("express");
   const app = express();
   const port = 3000;
   
   app.get("/", (req, res) => {
     res.send("Hello World!");
   });
   
   app.listen(port, () => {
     console.log(`Example app listening on port ${port}!`);
   });
   

   このコードは、最小限の "HelloWorld" Express ウェブアプリケーションを示しています。 これは "express" モジュールをインポートし、それを使用して 3000 番ポートで HTTP リクエストを待機するサーバー (app) を作成し、サーバーをテストするために使用できるブラウザー URL を説明するメッセージをコンソールに出力します。 app.get() 関数は、指定された URL パス ('/') で HTTP の GET リクエストにのみ応答します。この場合、関数を呼び出して Hello World! メッセージを送信します。

   メモ: `Example app listening on port ${port}!` の逆引用符で、$port の値を文字列に埋め込みます。

5. コマンドプロンプトでスクリプトを使用して node を呼び出すことでサーバーを起動できます。

   bash

   node index.js
   

   以下のようなコンソール出力が表示されます。

   Example app listening on port 3000
   

6. URL http://localhost:3000/ に移動します。 すべてがうまくいったら、ブラウザーは単に文字列 "Hello World!" を表示するはずです。

依存関係が開発中にのみ使用される場合は、代わりに「開発依存関係」として保存する必要があります（パッケージユーザーが本番環境にインストールする必要がないようにするため）。たとえば、一般的な JavaScript Linting ツールの ESLint を使用するには、次のように npm を呼び出します。

npm install eslint --save-dev

次の項目がアプリケーションの package.json に追加されます。

  "devDependencies": {
    "eslint": "^7.10.0"
  }

依存関係の定義と取得に加えて、package.json ファイルに名前付きスクリプトを定義し、npm を呼び出してそれらを run-script コマンドで実行することもできます。このアプローチは、実行中のテストや開発の一部を自動化したり、ツールチェーン (たとえば JavaScript の縮小、画像の縮小、コードの LINT/分析などのツールの実行) を構築したりするためによく使用されます。

たとえば、前の節で指定した eslint 開発依存関係を実行するためのスクリプトを定義するには、次のスクリプトブロックを package.json ファイルに追加します (アプリケーションソースが /src/js フォルダーにあると仮定します)。

"scripts": {
  // …
  "lint": "eslint src/js"
  // …
}

もう少し詳しく説明すると、eslint src/js は、app ディレクトリー内の src/js ディレクトリーに含まれる JavaScript ファイルに対して eslint を実行するために terminal/command 行に入力できるコマンドです。アプリの package.json ファイル内に上記を含めると、このコマンドのショートカット - つまり lint が提供されます。

こうすれば、npm を使って eslint を実行することができます。

npm run-script lint
# OR (using the alias)
npm run lint

この例は元のコマンドより短く見えないかもしれませんが、複数のコマンドのチェーンを含めて、npm スクリプト内にもっと大きなコマンドを含めることができます。一度にすべてのテストを実行する単一の npm スクリプトを指定できます。

Express Application Generator ツールは Express アプリケーションの「スケルトン」を生成します。次に示すように、npm を使用してジェネレーターをインストールします。

npm install express-generator -g

既定の設定で "helloworld" という名前の Express アプリを作成するには、作成する場所に移動して、図のようにアプリを実行します。

express helloworld

npx express-generator helloworld

また、使用するテンプレートライブラリーや他にも多くの設定を指定することができます。 すべてのオプションを見るには help コマンドを使用してください。

express --help

ジェネレーターは、コンソールにビルドの進行状況を表示しながら、現在の場所のサブフォルダーに新しい Express アプリを作成します。 完全に完了すると、ツールは Node 依存関係をインストールしてアプリを始めるには入力する必要があるコマンドを表示します。

新しいアプリには、ルートディレクトリーに package.json ファイルがあります。 これを開くと、Express やテンプレートライブラリー Jade など、インストールされている依存関係を確認できます。

{
  "name": "helloworld",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  }
}

次に示すように、npm を使用して helloworld アプリのすべての依存関係をインストールします。

cd helloworld
npm install

次に、以下のようにアプリを実行します (コマンドは Windows と Linux/macOS で若干異なります)。

# Windows のコマンドプロンプトで helloworld を実行
SET DEBUG=helloworld:* & npm start

# Windows の PowerShell で helloworld を実行
SET DEBUG=helloworld:* | npm start

# Linux/macOS で helloworld を実行
DEBUG=helloworld:* npm start

DEBUG コマンドは有用なロギングを作成し、その結果、以下に示すような出力が得られます。

>SET DEBUG=helloworld:* & npm start

> helloworld@0.0.0 start D:\GitHub\expresstests\helloworld
> node ./bin/www

  helloworld:server Listening on port 3000 +0ms

ブラウザーを開いて http://localhost:3000/ に移動し、既定の Express ウェルカムページを表示します。

スケルトンアプリケーションの生成に関する記事にアクセスしたら、生成されたアプリについて詳しく説明します。

これで、Express ウェブアプリケーションを作成するために使用できる Node 開発環境がコンピューター上で稼働しています。また、npm を使用して Express をアプリケーションにインポートする方法、および Express Application Generator ツールを使用してアプリケーションを作成して実行する方法についても説明しました。

次の記事では、この環境と関連ツールを使って完全なウェブアプリケーションを構築するためのチュートリアルを始めます。

• ダウンロード ページ (nodejs.org)
• パッケージマネージャを利用した Node.js のインストール (nodejs.org)
• Express のインストール (expressjs.com)
• Express Application Generator (expressjs.com)
• Using Node.js with Windows subsystem for Linux (docs.microsoft.com)

• 前のページ
• Overview: Express ウェブフレームワーク (Node.js/JavaScript)
• 次のページ