序章

この記事では、Expressプロジェクト内でルートとHTTPリクエストメソッドを処理する方法について説明します。 ルートは、アプリケーション全体のさまざまなURLへのユーザーナビゲーションを処理します。 Hyper Text Transfer Protocol の略であるHTTPは、ExpressサーバーからWebブラウザーへのデータを通信および促進します。

ルートを定義し、HTTPリクエストメソッドGET、POST、PUT、およびDELETEを使用してデータを操作する方法を学習します。

前提条件

このチュートリアルを完了するには、Node.jsを理解しておくと役立ちますが、必須ではありません。 Node.jsの詳細については、Node.jsシリーズのコーディング方法をご覧ください。

プロジェクトの設定

ExpressはNode.jsフレームワークであるため、次の手順を実行する前に、Node.jsからNode.jsがインストールされていることを確認してください。 ターミナルで次を実行します。

プロジェクト用にnode-express-routingという名前の新しいディレクトリを作成します。

  1. mkdir node-express-routing

新しいディレクトリに移動します。

  1. cd node-express-routing

デフォルトで新しいノードプロジェクトを初期化します。 これには、依存関係にアクセスするためのpackage.jsonファイルが含まれます。

  1. npm init -y

エントリファイルindex.jsを作成します。 ここで、ルートとHTTPリクエストメソッドを処理します。

  1. touch index.js

Expressとnodemonの両方を依存関係としてインストールします。 nodemon を使用して、index.jsファイルが変更されるたびにExpressプロジェクトを継続的に再起動します。

  1. npm install express --save

  2. npm install nodemon --save-dev

お好みのテキストエディタでpackage.jsonファイルを開き、startスクリプトを更新してnodemonとindex.jsファイルを追加します。

[label package.json] 
{
  "name": "node-express-routing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "Paul Halliday",
  "license": "MIT"
}

これにより、端末でnpm startコマンドを使用して、Expressサーバーを起動し、変更を更新できます。

プロジェクトをセットアップし、nodemonを構成して、index.jsファイルの変更を検出したときに更新するようにしたので、Expressサーバーを起動する準備が整いました。

ExpressServerの起動

Expressサーバーは、ルートとHTTPリクエストメソッドを統合するロジックを処理する場所です。 サーバーをセットアップして実行し、ブラウザーでプロジェクトを視覚化します。

Expressサーバーを起動するには、index.jsファイルにExpressが必要であり、インスタンスをapp変数に保存します。 次に、PORT変数を宣言し、アドレス:3000を指定します。

index.js
const express = require('express');

const app = express();
const PORT = 3000;

app.use(express.json()); 

app.listen(PORT, () => console.log(`Express server currently running on port ${PORT}`));

次に、.listen()をappに追加し、最初の引数としてPORTを挿入し、次にコールバック関数を挿入します。 Expressミドルウェア.listen()は、PORT変数のアドレスからローカルブラウザを作成して、変更を視覚化します。

app.use()の引数としてexpress.json()も含めます。 これは、HTTPリクエストを介して着信データを解析するためのものです。 以前のバージョンはbody-parserの依存関係に依存していましたが、それ以降、Expressにはデータを解析するための組み込みミドルウェアが含まれています。

ターミナルで次のコマンドを実行して、プロジェクトを開始します。

  1. npm start

プロジェクトはhttp://localhost:3000にロードされます。 ブラウザに移動して、次のことに注意してください。

An error showing that the / route cannot be reached.

これは、実行中のExpressインスタンスの始まりです。 ブラウザに入力するHTTPメソッドの定義に取り組みましょう。

HTTPGETリクエストメソッドの定義

プロジェクトを表示するために、HTTPメソッドであるGETリクエストを介してExpressサーバーから情報を送信できます。

index.jsで、.get()をapp変数に追加し、匿名ルートを指定して、requestとresponseにアクセスするコールバックを含めます。引数：

[label index.js] 
app.get('/', (request, response) => {
  response.send('Hello');
});

request引数には、GETリクエストに関する情報が含まれ、response.send()はデータをブラウザにディスパッチします。 response.send()内のデータは、文字列、オブジェクト、または配列にすることができます。

GETリクエストを実装したので、ルートとその他のHTTPメソッドを見てみましょう。

ルートを理解する

index.jsファイルに新しいGETリクエストを作成し、ルート'/accounts'と'/accounts/:id'を定義します。 accounts配列をいくつかのモックデータで宣言します。

index.js
let accounts = [
  {
    "id": 1,
    "username": "paulhal",
    "role": "admin"
  },
  {
    "id": 2,
    "username": "johndoe",
    "role": "guest"
  },
  {
    "id": 3,
    "username": "sarahjane",
    "role": "guest"
  }
];

app.get('/accounts', (request, response) => {
  response.json(accounts);
});

app.get('/accounts/:id', (request, response) => {
  const accountId = Number(request.params.id);
  const getAccount = accounts.find((account) => account.id === accountId);

  if (!getAccount) {
    response.status(500).send('Account not found.')
  } else {
    response.json(getAccount);
  }
});

http://localhost:3000/accountsに移動すると、アレイ内のすべてのアカウントを受け取ります。

Output
[
  {
    "id": 1,
    "username": "paulhal",
    "role": "admin"
  },
  {
    "id": 2,
    "username": "johndoe",
    "role": "guest"
  },
  {
    "id": 3,
    "username": "sarahjane",
    "role": "guest"
  }
]

/:idエンドポイントを使用してアカウントIDをフィルタリングすることもできます。 Expressは、エンドポイント/:idのIDをユーザーパラメーターのプレースホルダーと見なし、その値と一致させます。

http://localhost:3000/accounts/3に移動すると、/:idパラメーターに一致するアカウントが1つ取得されます。

Output
{
  "id": 3,
  "username": "sarahjane",
  "role": "guest"
}

POST、PUT、およびDELETEHTTPリクエストメソッドの設計

HTTPメソッドは、POST、PUT、およびDELETEリクエストを使用してデータに追加機能を提供します。 POSTリクエストメソッドはサーバーに新しいデータを作成し、PUTは既存の情報を更新します。 DELETEリクエストメソッドは、指定されたデータを削除します。

POST

accounts配列に新しいデータを作成するには、POSTリクエストメソッドを統合できます。

index.jsで、.post()をapp変数に追加し、最初の引数としてroute'/accounts'を含めます。

index.js
app.post('/accounts', (request, response) => {
  const incomingAccount = request.body;

  accounts.push(incomingAccount);

  response.json(accounts);
})

POSTリクエストからの受信データをaccounts配列にプッシュし、応答をJSONオブジェクトとして送信します。

これで、accountsアレイに新しいユーザーが保持されます。

Output
[
  {
    "id": 1,
    "username": "paulhal",
    "role": "admin"
  },
  {
    "id": 2,
    "username": "johndoe",
    "role": "guest"
  },
  {
    "id": 3,
    "username": "sarahjane",
    "role": "guest"
  },
  {
    "id": 4,
    "username": "davesmith",
    "role": "admin"
  }
]

PUT

PUTリクエストを使用して、特定のアカウントを編集および更新できます。

index.jsで、.put()をapp変数に追加し、最初の引数としてルート'/accounts/:id'を含めます。 入力したアカウントIDを見つけ、新しいデータで更新する条件を設定します。

index.js
app.put('/accounts/:id', (request, response) => {
  const accountId = Number(request.params.id);
  const body = request.body;
  const account = accounts.find((account) => account.id === accountId);
  const index = accounts.indexOf(account);

  if (!account) {
    response.status(500).send('Account not found.');
  } else {
    const updatedAccount = { ...account, ...body };

    accounts[index] = updatedAccount;

    response.send(updatedAccount);
  }
});

これで、accountsアレイのデータを更新できるようになりました。 ユーザーが"role"を変更した場合：

{
    "role": "guest"
}

"role"がhttp://localhost:3000/accounts/1のadminからguestに更新されることに注意してください。

Output
{
  "id": 1,
  "username": "paulhal",
  "role": "guest"
}

DELETE

DELETEリクエストメソッドを使用してユーザーとデータを削除できます。

index.js内で、.delete()をapp変数に追加し、最初の引数として'/accounts/:id'を含めます。 accounts配列をフィルタリングし、削除するアカウントを返します。

[label index.js] 
app.delete('/accounts/:id', (request, response) => {
  const accountId = Number(request.params.id);
  const newAccounts = accounts.filter((account) => account.id != accountId);

  if (!newAccounts) {
    response.status(500).send('Account not found.');
  } else {
    accounts = newAccounts;
    response.send(accounts);
  }
});

DELETEリクエストをhttp://localhost:3000/accounts/1に送信すると、/:idが1のアカウントがaccountsアレイから削除されます。

結論

ルートを指定し、HTTP要求メソッドを使用すると、Expressサーバーでユーザーとデータを作成、更新、および削除するときにパフォーマンスが向上します。