URL とルートを理解する

7 分

アプリケーションには、製品や注文など、管理するさまざまなデータがあります。 Tailwind Traders の開発者として、データの種類に応じたセクションに API を整理します。セクションを利用することで、アプリの管理と拡張を行うことができます。

Web アプリを簡単に拡張する方法は、専用の URL を通じてデータにアクセスできるようにすることです。 2 つの異なる URL によって、Web アプリの 2 つの異なるコード部分がトリガーされます。

https://tailwindtraders.com/products
https://tailwindtraders.com/orders

このユニットでは、API を作成するための URL の構造について説明します。

URL パス

URL は、ユーザーが特定のサーバーや特定の機能を指定するためにブラウザーなどのクライアントに入力するアドレスです。 URL がどのように機能するかを理解すると、アプリを整理するのに役立ちます。

一般的な URL は次のようなものです: http://localhost:8000/products/1?page=1&pageSize=20

URL は、次のような構文に準拠しています。

scheme:[//authority]path[?query][#fragment]

URL の例 (https://tailwindtraders.com/products/1?page=1&pageSize=20#sort=asc) の構成要素について説明します。

URL コンポーネント	例	説明
Scheme	`https`	`http`、`https`、`ftp`、`irc`、`file` などの使用されるプロトコル。
所轄官庁	`tailwindtraders.com`	オプションのユーザー情報とホスト (通常はドメイン名) で構成されます。
Path	`/products/1`	スラッシュ (`/`) で区切られた 0 個から多数個のセグメントであり、関心があるリソースを指定します。
クエリ	`page=1&pageSize=20`	`?` 文字の後に定義される省略可能な部分であり、データをさらにフィルター処理するためのパラメーター/値のペアで構成されます。
Fragment	`sort=asc`	特定の順序でデータを並べ替えるなど、より具体的な指示を行うのに役立ちます。

各ルートには、作成、読み取り、更新、削除 (CRUD と呼ばれます) などのアクションを含めることができます。このアクションはルートメソッドによって指定され、HTTP ヘッダーと本文内で送信される追加情報と組み合わされます。

HTTP ハンドラー

Express は、HTTP API の作成に役立つ Web フレームワークです。これを使用して、HTTP 要求を処理するルートを作成します。

URL /products/114 に対する HTTP 要求を処理するコードの例を次に示します。

app.get('/products/:id', (req, res) => {
  // handle this request `req.params.id`
})

ハンドラーの形式は app.<method>(<route>, <callback>) です。 GET メソッドを使用したルート /products/114 に対する要求は、受信要求 (req) にアクセスできる関数内のコードを実行し、応答 (res) を返します。

このコードは、読みやすくするために以下のように書き換えることができます。

const routeHandler = (incomingRequest, outgoingResponse) => {
  // handle this request
}

app.get('/products/:id', routeHandler)

Tailwind Traders での作業では、Express アプリにおいてどちらかのスタイルのコードで作業する必要があるかもしれません。

受信データ

データを API に送信する方法は以下のようにいくつか存在します。

データ	場所	説明
ルートパラメーター	`/products/:id`。この場合 `:id` がパラメーターです	ルートパラメーターは URL の一部です。これらは、特定のリソースを指定するために使用されます。データの長さは URL の許可された長さに限定されるため、通常は ID や名前などのように短くなります。ルートには複数のパラメーターを持たせることができます。
Query parameter (クエリパラメーター)	`/products?page=1&pageSize=20`。この場合 `?page=1&pageSize=20` がパラメーターです	クエリパラメーターは URL の一部です。これらは、データをフィルター処理するために使用されます。データの長さは URL の許可された長さに限定されるため、通常は ID や名前などのように短くなります。ルートには複数のクエリパラメーターを持たせることができます。
要求本文	`POST /products`	要求本文は HTTP 要求の一部です。これは API にデータを送信するために使用されます。データの長さは URL の許可された長さに限定されないため、長くすることができます。 HTTP ヘッダーは、テキスト、JSON、バイナリなどのデータの種類を API に示します。

通常、受信データはアクションの目的に応じて以下のメソッドに一致します。

アクション	メソッド	データ
作成	投稿	要求本文
読み込み	GET	ルートパラメーターとクエリパラメーター
更新する	PUT	要求本文
削除	DELETE	ルートパラメーターとクエリパラメーター

ヒント

各メソッドの最初の文字を取ると CRUD となります。この業界において、この用語はデータに対して実行できる 4 種類の基本的な操作を表すために使用されています。

req.params を使用したルートパラメーターの例

要求 URL が /products/20 であることを想定します。この要求を処理する Express ルートは次のとおりです。

app.get('/products/:id', (req, res) => {
    const id = req.params.id

    // get product that matches id from database
})

req.query を使用したクエリ文字列の例

要求 URL が /products?page=1&pageSize=20 であることを想定します。この要求を処理する Express ルートは次のとおりです。

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

    // get next page of products from database
})

req.body を使用した要求本文の例

要求 URL が /products で、要求本文が { "name": "Product 1" } であることを想定します。この要求を処理する Express ルートは次のとおりです。

app.post('/products', (req, res) => {
    const name = req.body.name

    // add new product to database
})