ExpressでURLとPOSTパラメータを取得する方法

序章

多くの場合、 Express を使用してアプリケーションを構築する場合、ユーザーから情報を取得する必要があります。 最も一般的な方法の2つは、URLパラメーターとPOSTパラメーターです。

この記事では、Expressを使用してリクエストからURLパラメーターとPOSTパラメーターを取得する方法を学習します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

• Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
• POSTリクエストを送信するには、Postmanなどのツールをダウンロードしてインストールする必要があります。

注：以前は、このチュートリアルではreq.paramの使用を推奨していました。 これはv4.11.0で非推奨になりました。 このチュートリアルでは、body-parserのインストールも推奨しています。 v4.16.0以降、これは不要になりました。

このチュートリアルは、ノードv15.4.0、npm v7.10.0、およびexpressv4.17.1で検証されました。

ステップ1-プロジェクトの設定

まず、ターミナルウィンドウを開き、新しいプロジェクトディレクトリを作成します。

mkdir express-params-example

次に、新しく作成されたディレクトリに移動します。

cd express-params-example

この時点で、新しいnpmプロジェクトを初期化できます。

npm init -y

次に、expressパッケージをインストールする必要があります。

npm install [email protected]

この時点で、Expressを使用する準備ができた新しいプロジェクトができました。

新しいserver.jsファイルを作成し、コードエディタで開きます。

server.js

const express = require('express');

const app = express();
const port = process.env.PORT || 8080;

// routes will go here

app.listen(port);
console.log('Server started at http://localhost:' + port);

ターミナルウィンドウに戻り、アプリケーションを実行します。

node server.js

server.jsを編集するたびに、ノードサーバーを再起動する必要があります。 これが面倒な場合は、nodemonを使用してNode.jsアプリを自動的に再起動する方法を参照してください。

次に、グラブパラメータをテストするために2つのルートを作成しましょう。

ステップ2–URLパラメータでreq.queryを使用する

req.queryを使用して、URLパラメーターの値を取得できます。

次の例を考えてみましょう。

http://example.com/api/users?id=4&token=sdfa3&geo=us

このURLには、id、token、およびgeo（ジオロケーション）のパラメーターが含まれています。

id: 4
token: sdfa3
geo: us

コードエディタでserver.jsに再度アクセスし、req.query.id、req.query.token、およびreq.query.geoの次のコード行を追加します。

server.js

// ...

// routes will go here
// ...

app.get('/api/users', function(req, res) {
  const user_id = req.query.id;
  const token = req.query.token;
  const geo = req.query.geo;

  res.send({
    'user_id': user_id,
    'token': token,
    'geo': geo
  });
});

app.listen(port);
console.log('Server started at http://localhost:' + port);

サーバーが稼働している状態で、WebブラウザーまたはPostmanのいずれかでURLhttp://localhost:8080/api/users?id=4&token=sdfa3&geo=usを使用します。

サーバーは、user_id、token、およびgeoの値で応答します。

ステップ3–ルートでreq.paramsを使用する

req.paramsを使用して、ルートから値を取得できます。

次のURLを検討してください。

http://localhost:8080/api/1

このURLには、apiおよび:version（1）のルートが含まれています。

コードエディタでserver.jsに再度アクセスし、req.params.versionの次のコード行を追加します。

server.js

// ...

// routes will go here
// ...

app.get('/api/:version', function(req, res) {
  res.send(req.params.version);
});

app.listen(port);
console.log('Server started at http://localhost:' + port);

サーバーが稼働している状態で、WebブラウザーまたはPostmanのいずれかでURLhttp://localhost:8080/api/1を使用します。

サーバーはversion値で応答します。

ステップ4–ルートハンドラーで.paramを使用する

次に、Express .param関数を使用して、特定のパラメーターを取得します。 これはミドルウェアと見なされ、ルートが呼び出される前に実行されます。

これは、検証（ユーザーが存在するかどうかの確認など）またはそのユーザーまたはアイテムに関する重要な情報の取得に使用できます。

次のURLを検討してください。

http://localhost:8080/api/users/sammy

このURLには、usersおよび:name（Sammy）のルートが含まれています。

コードエディタでserver.jsに再度アクセスし、nameを変更するための次のコード行を追加します。

server.js

// ...

app.param('name', function(req, res, next, name) {
  const modified = name.toUpperCase();

  req.name = modified;
  next();
});

// routes will go here
// ...

app.get('/api/users/:name', function(req, res) {
  res.send('Hello ' + req.name + '!');
});

app.listen(port);
console.log('Server started at http://localhost:' + port);

サーバーが稼働している状態で、WebブラウザーまたはPostmanのいずれかでURLhttp://localhost:8080/api/users/sammyを使用します。

サーバーは次のように応答します。

OutputHello SAMMY!

このparamミドルウェアを検証に使用し、渡された情報が有効で正しい形式であることを確認できます。

次に、情報をリクエスト（req）に保存して、他のルートがアクセスできるようにします。

ステップ5–POSTパラメーターでreq.bodyを使用する

express.json()およびexpress.urlencoded()は、JSONエンコードおよびURLエンコードの本文をサポートする組み込みのミドルウェア関数です。

コードエディタでserver.jsを開き、次のコード行を追加します。

server.js

const express = require('express');

const app = express();
const port = process.env.PORT || 8080;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// ...

次に、app.postにreq.body.id、req.body.token、およびreq.body.geoを追加します。

server.js

// ...

// routes will go here
// ...

app.post('/api/users', function(req, res) {
  const user_id = req.body.id;
  const token = req.body.token;
  const geo = req.body.geo;

  res.send({
    'user_id': user_id,
    'token': token,
    'geo': geo
  });
});

app.listen(port);
console.log('Server started at http://localhost:' + port);

サーバーが稼働している状態で、Postmanを使用してPOSTリクエストを生成します。

注：リクエストのためにPostmanインターフェースをナビゲートするための支援が必要な場合は、公式ドキュメントを参照してください。

リクエストタイプをPOSTに設定し、リクエストURLをhttp://localhost:8080/api/usersに設定します。 次に、Bodyをx-www-form-urlencodedに設定します。

次に、次の値を指定します。

鍵	価値
id	4
トークン	sdfa3
ジオ	我ら

応答を送信すると、サーバーはuser_id、token、およびgeoの値で応答します。

結論

この記事では、Expressを使用してリクエストからURLパラメーターとPOSTパラメーターを取得する方法を学習しました。 これは、req.query、req.params、およびreq.bodyで実現されました。

Express4.0ルーターの使用方法およびExpressでHTMLファイルを配信する方法で学習を続けてください。