Node.jsとExpressの使用を開始する方法

投稿日: 2022-04-20 2022-04-20
タグ: Node.js

序章

Express は、Node.js用のWebアプリケーションフレームワークであり、堅牢なAPIとWebサーバーをはるかに簡単かつクリーンな方法で起動できます。これは、Node.jsのコア機能を覆い隠すことのない軽量パッケージです。

この記事では、Expressをインストールして使用し、Webサーバーを構築します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。

このチュートリアルは、ノードv15.14.0、npm v7.10.0、express v4.17.1、およびserve-indexv1.9.1で検証されました。

ステップ1—プロジェクトの設定

まず、ターミナルウィンドウを開き、新しいプロジェクトディレクトリを作成します。

mkdir express-example

次に、新しく作成されたディレクトリに移動します。

cd express-example

この時点で、新しいnpmプロジェクトを初期化できます。

npm init -y

次に、expressパッケージをインストールする必要があります。

npm install express@4.17.1

この時点で、Expressを使用する準備ができた新しいプロジェクトができました。

ステップ2—Expressサーバーを作成する

Expressがインストールされたので、新しいserver.jsファイルを作成し、コードエディタで開きます。次に、次のコード行を追加します。

server.js

const express = require('express');

const app = express();

ここでの最初の行は、インストールしたパッケージからメインのExpressモジュールを取得することです。このモジュールは関数であり、2行目で実行してapp変数を作成します。この方法で複数のアプリを作成でき、それぞれに独自のリクエストとレスポンスがあります。

server.js

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

これらのコード行は、サーバーへのGETリクエストを処理する方法をExpressサーバーに指示する場所です。 Expressには、POST、PUTなどの同様の機能が含まれています。 app.post(...)、app.put(...)などを使用します。

これらの関数は2つの主要なパラメーターを取ります。 1つ目は、この関数が機能するURLです。この場合、当社のWebサイトのルートである'/'をターゲットにしています。この場合、localhost:3000です。

2番目のパラメーターは、reqとresの2つの引数を持つ関数です。 reqは、サーバーに送信された要求を表します。このオブジェクトを使用して、クライアントが実行を要求していることに関するデータを読み取ることができます。 resは、クライアントに返送する応答を表します。

ここでは、resで関数を呼び出して、応答を送り返しています：'Successful response.'。

server.js

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

最後に、リクエストを設定したら、サーバーを起動する必要があります。 3000をlisten関数に渡します。この関数は、リッスンするポートをアプリに指示します。 2番目のパラメーターとして渡された関数はオプションであり、サーバーの起動時に実行されます。これにより、コンソールでフィードバックが提供され、アプリケーションが実行されていることがわかります。

ターミナルウィンドウに戻り、アプリケーションを実行します。

node server.js

次に、Webブラウザでlocalhost:3000にアクセスします。ブラウザウィンドウに'Successful response'と表示されます。ターミナルウィンドウに'Example app is listening on port 3000.'と表示されます。

これで、Webサーバーができました。ただし、1行以上のテキストをクライアントに送り返したいと考えています。ミドルウェアとは何か、このサーバーを静的ファイルサーバーとして設定する方法について簡単に説明しましょう。

ステップ3—ミドルウェアを使用する

Expressを使用すると、サーバーに送信されるすべてのHTTPリクエストにアクセスできるミドルウェア関数を記述して使用できます。これらの関数は次のことができます。

任意のコードを実行します。
リクエストオブジェクトとレスポンスオブジェクトに変更を加えます。
要求と応答のサイクルを終了します。
スタック内の次のミドルウェア関数を呼び出します。

他のパッケージと同じようにインポートすることで、独自のミドルウェア関数を作成したり、サードパーティのミドルウェアを使用したりできます。

独自のミドルウェアを作成することから始めましょう。次に、既存のミドルウェアを使用して静的ファイルを提供してみます。

ミドルウェア関数を定義するには、app.use()を呼び出して関数を渡します。すべてのリクエスト中にコンソールに現在の時刻を出力するための基本的なミドルウェア関数は次のとおりです。

server.js

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

next()呼び出しは、ミドルウェアに次のミドルウェア関数がある場合はそれを実行するように指示します。これを関数の最後に含めることが重要です。そうしないと、リクエストがこのミドルウェアでスタックします。

オプションで、ミドルウェアへのパスを渡すことができます。ミドルウェアは、そのルートへの要求のみを処理します。例えば：

server.js

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

'/request-type'をapp.use()の最初の引数として渡すことにより、この関数はlocalhost:3000/request-typeに送信されたリクエストに対してのみ実行されます。

ターミナルウィンドウに戻り、アプリケーションを実行します。

node server.js

次に、Webブラウザでlocalhost:3000/request-typeにアクセスします。ターミナルウィンドウに、リクエストのタイムスタンプと'Request type: GET'が表示されます。

それでは、既存のミドルウェアを使用して静的ファイルを提供してみましょう。 Expressには、ミドルウェア機能express.staticが組み込まれています。また、サードパーティのミドルウェア関数serve-index を使用して、ファイルのインデックスリストを表示します。

まず、エクスプレスサーバーが配置されているのと同じフォルダー内に、publicという名前のディレクトリを作成し、そこにいくつかのファイルを配置します。

次に、パッケージserve-indexをインストールします。

npm install serve-index@1.9.1

まず、サーバーファイルの先頭にあるserve-indexパッケージをインポートします。

次に、express.staticおよびserveIndexミドルウェアを含め、アクセス元のパスとディレクトリの名前を伝えます。

server.js

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

次に、サーバーを再起動して、localhost:3000/publicに移動します。すべてのファイルのリストが表示されます！

結論

この記事では、Expressをインストールして使用し、Webサーバーを構築しました。また、組み込みおよびサードパーティのミドルウェア機能を使用しました。

Express でreqオブジェクトを使用する方法、 Express でresオブジェクトを使用する方法、ExpressでルートとHTTPリクエストメソッドを定義する方法で学習を続けてください]。

getdocs

13036