序章
この記事では、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という名前の新しいディレクトリを作成します。
mkdir node-express-routing
新しいディレクトリに移動します。
cd node-express-routing
デフォルトで新しいノードプロジェクトを初期化します。 これには、依存関係にアクセスするためのpackage.jsonファイルが含まれます。
npm init -y
エントリファイルindex.jsを作成します。 ここで、ルートとHTTPリクエストメソッドを処理します。
touch index.js
Expressとnodemonの両方を依存関係としてインストールします。 nodemon を使用して、index.jsファイルが変更されるたびにExpressプロジェクトを継続的に再起動します。
npm install express --save 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にはデータを解析するための組み込みミドルウェアが含まれています。
ターミナルで次のコマンドを実行して、プロジェクトを開始します。
npm start
プロジェクトはhttp://localhost:3000にロードされます。 ブラウザに移動して、次のことに注意してください。
これは、実行中の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サーバーでユーザーとデータを作成、更新、および削除するときにパフォーマンスが向上します。
