ExpressでルートとHTTPリクエストメソッドを定義する方法
序章
この記事では、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
、およびDELETE
HTTPリクエストメソッドの設計
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サーバーでユーザーとデータを作成、更新、および削除するときにパフォーマンスが向上します。