演習 - ルートとクエリパラメーター

4 分

Tailwind Traders 社のエンジニアとして、API から送信または返されるデータの量を制限することで、サーバーとクライアントの両方にとって効率的な API を作成します。

通常、データはデータベースまたはその他のストレージ内に存在します。データのサイズは膨大な量になる可能性があります。ユーザーが製品のすべてのデータを要求すると、応答は数千や数百万個のレコードになる可能性があります。このような要求を行うと、データベースで大量の負荷が発生する可能性があります。また、クライアントで応答を処理してレンダリングするのにも長い時間がかかります。

このシナリオを回避するために、応答のサイズを "制限する" ことをお勧めします。

特定のレコードを要求するためにルートパラメーターを使用する
レコードのサブセットを指定するには、クエリパラメーターを使用します。

この演習では、両方の手法について説明します。

MicrosoftDocs/node-essentials GitHub リポジトリの main ブランチに新しい GitHub Codespace を作成するプロセスを開始します。

GitHub Codespaces でこのプロジェクトを開く
[codespace の作成] ページで、codespace の構成設定を確認した後に、[新しい codespace の作成] を選択します
Codespace が起動するまで待ちます。この起動プロセスには数分かかることがあります。
codespace で新しいターミナルを開きます。

ヒント

メインメニューを使用して [ターミナル] メニューオプションに移動し、[新しいターミナル] オプションを選択できます。
Node.js が環境にインストールされていることを確認します。
```
node --version
```
ターミナルを閉じます。
このプロジェクトの残りの演習は、この開発コンテナーのコンテキストで行われます。

空のディレクトリのコンテキストで Visual Studio Code を開きます。
Visual Studio Code に Dev Containers 拡張機能がインストールされていることを確認します。
エディターで新しいターミナルを開きます。

ヒント

メインメニューを使用して [ターミナル] メニューオプションに移動し、[新しいターミナル] オプションを選択できます。
MicrosoftDocs/node-essentials GitHub リポジトリを現在のディレクトリにクローンします。
```
git clone https://github.com/MicrosoftDocs/node-essentials.git .
```
GitHub リポジトリを複製したフォルダーを開きます。
[コマンドパレット] を開き、Dev Containers コマンドを検索し、[Dev Containers: コンテナーで再度開く (Reopen in Container)] を選択します。

ヒント

Visual Studio Code では自動的に、開発コンテナー内の既存のフォルダーを再度開くよう求められる場合があります。これは、コマンドパレットを使用してコンテナー内で現在のワークスペースを再度開くのと機能的には同じです。
Node.js が環境にインストールされていることを確認します。
```
node --version
```
ターミナルを閉じます。
このプロジェクトの残りの演習は、この開発コンテナーのコンテキストで行われます。

プロジェクトのファイルを設定する

このモジュールのプロジェクトを検査するために、コードエディターで ./nodejs-http/exercise-express-routing/parameters フォルダーを開きます。

parameters ディレクトリには、次のファイルが含まれている必要があります。

ファイル	目的
`app.js`	このファイルには Express アプリケーションが含まれています。
`package.json`	このファイルには、プロジェクトの依存関係が含まれています。
`package-lock.json`	このファイルには、依存関係の正確なバージョンが含まれています。

ファイルエクスプローラーでフォルダー名を右クリックして、/nodejs-http/exercise-express-routing/parameters[統合ターミナルで開く] を選択します。
ターミナルで、次のコマンドを実行してプロジェクトの依存関係をインストールします。
```
npm install
```
app.js を開いて調べます。ファイルは、次のようになります。
```
const express = require('express')
const app = express()
const port = 3000

const products = [
{
  id: 1,
  name: "Ivanhoe",
  author: "Sir Walter Scott",
},
{
  id: 2,
  name: "Colour Magic",
  author: "Terry Pratchett",
},
{
  id: 3,
  name: "The Bluest eye",
  author: "Toni Morrison",
},
];

app.get('/', (req, res) => res.send('Hello API!'));

app.get("/products/:id", (req, res) => {});

app.get('/products', (req, res) => {});

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));
```
この JavaScript コードは、基本的な Express.js サーバーを作成します。これは products の配列を定義して、ルート (/)、/products/:id、/products という 3 つのルートを設定します。サーバーは、ポート 3000 でリッスンします。ルート /products/:id および /products は、まだ機能がないプレースホルダーです。

演習を簡略化するためにデータはハードコーディングされています。実際のシナリオでは、データはデータベースまたはその他のストレージから取得されます。

1 つの製品を返す製品ルートを実装する

このコードには、Express アプリケーションが含まれています。次のステップでは、2 つのルートを実装します。

/products/:id: このルートでは、1 つの製品が返されます。
/products: このルートでは、すべての製品、またはクエリパラメーターで要求された数の製品が返されます。

ルート /products/:id を実装するには、parameters ディレクトリの app.js ファイルで次のコードを見つけます。
```
app.get("/products/:id", (req, res) => {});
```
次のコードに置き換えます。
```
app.get("/products/:id", (req, res) => {
  res.json(products.find(p => p.id === +req.params.id));
});
```
ターミナルで、次のコマンドを実行してアプリを実行します。
```
node app.js
```
Visual Studio Code が "ブラウザーを開く" の通知をポップアップ表示したら、[ブラウザーで開く] を選択します。
URL の末尾に次を追加します
```
/products/1
```
出力は次のようになります。
```
{
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
}
```
おめでとうございます。ルートが正しく実装されました。アプリでは、特定の製品を検索するために、ルートパラメーター id が使用されています。
ターミナルで、Ctrl+C キーを押してアプリケーションを停止します。

製品の一覧を返す製品ルートを実装する

ルート /products を実装するには、次のコードを見つけます。

app.get("/products", (req, res) => {});

次のコードに置き換えます。

app.get("/products", (req, res) => {
  const page = +req.query.page;
  const pageSize = +req.query.pageSize;

  if (page && pageSize) {
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    res.json(products.slice(start, end));
  } else {
    res.json(products);
  }
});

ターミナルで次のコマンドを実行してアプリを開始し、コードをテストします。
```
node app.js
```
Visual Studio Code が "ブラウザーを開く" の通知をポップアップ表示したら、[ブラウザーで開く] を選択します。
URL の末尾に次を追加します
```
/products?page=1&pageSize=2
```
出力は次のようになります。
```
[{
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
},
{
  "id": 2,
  "name": "Colour Magic",
  "author": "Terry Pratchett"
}]
```
応答では、3 つのレコードのうち最初の 2 つが示されます。この応答は、クエリパラメーター page と pageSize のフィルター処理によって、完全なリストから 2 項目へと応答サイズが減少したことを意味しています。
次のルートを使用するために URL を変更し、ページの数を 1 から 2 に変更するために products?page=2&pageSize=2 を使用します。応答は次のとおりです。
```
[{
  "id": 3,
  "name": "The Bluest eye",
  "author": "Toni Morrison"
}]
```

コードには 3 つのレコードしか含まれていないため、2 ページ目には 1 つのレコードしか含まれていないはずです。

ターミナルで、Ctrl+C キーを押してアプリケーションを停止します。

これで、クエリパラメーターを正常に適用し、応答が制限されました。

演習 - ルートとクエリ パラメーター

開発コンテナーでプロジェクトを開く

プロジェクトのファイルを設定する

1 つの製品を返す製品ルートを実装する

製品の一覧を返す製品ルートを実装する

フィードバック

演習 - ルートとクエリパラメーター