序章
この記事では、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
を指定します。
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
配列をいくつかのモックデータで宣言します。
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
、およびDELETE
HTTPリクエストメソッドの設計
HTTPメソッドは、POST
、PUT
、およびDELETE
リクエストを使用してデータに追加機能を提供します。 POST
リクエストメソッドはサーバーに新しいデータを作成し、PUT
は既存の情報を更新します。 DELETE
リクエストメソッドは、指定されたデータを削除します。
POST
accounts
配列に新しいデータを作成するには、POST
リクエストメソッドを統合できます。
index.js
で、.post()
をapp
変数に追加し、最初の引数としてroute'/accounts'
を含めます。
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を見つけ、新しいデータで更新する条件を設定します。
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サーバーでユーザーとデータを作成、更新、および削除するときにパフォーマンスが向上します。