Express でクエリ文字列のパラメータを受け取る方法

クエリ文字列のパラメータ
Express でクエリ文字列のパラメータを受取る方法
Express でクエリ文字列のパラメータを受取る例

クエリ文字列のパラメータ

URLのクエリ文字列には、 ? に続いて変数名と値のペアを渡すことができます。例えば、http://example.com/?city=tokyo とするとパラメータ名は city で値は tokyo です。

複数のパラメータを渡す場合、クエリ文字列を ?param1=value1&param2=value2 のように、 & で区切って、パラメータと値のセットを設定します。

Express でクエリ文字列のパラメータを受取る方法

さて、クライアントがクエリ文字列にセットしたパラメータと値のセットは、Express でどのようにして受取るのでしょうか。

Express のラウトメソッド (route method) に渡すコールバック関数の第一引数には、リクエストオブジェクトが渡されます。

クエリ文字列に渡したパラメータは、リクエストオブジェクトの query 属性にセットされます。

Express でクエリ文字列のパラメータを受取る例

実際に試してみましょう。

Node のプロジェクトを作成して、 express をインストールします。

npm init -y
npm install express

public という名前のフォルダを作成して、その中に param1.html という名前でテスト用の HTML ファイルを作成します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Param 1</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <form method="GET" action="/foo">
      <input type="text" name="country" placeholder="country" />
      <input type="text" name="city" placeholder="city" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

フォームの内容をクエリ文字列として渡すために、 form タグの method 属性は GET としています。

次に param1.js と言う名前で次の JavaScript ファイルを作成します。

const express = require('express')
const app = express()
// static built-in middleware
app.use(express.static('public'))
// GET /foo
app.get('/foo', (req, res) => {
  console.log('--- get() called ---')
  console.log(req.query)
  res.send('Done')
})
// Start Listenings
app.listen(3000, () => console.log('Listening on http://localhost:3000/...'))

Express を起動します。

node param1.js
Listening on http://localhost:3000/...

ブラウザで http://localhost:3000/param1.html にアクセスし、適当な文字を入力して Submit ボタンを押します。

ブラウザのアドレスラインは http://localhost:3000/foo?country=United+States&city=Los+Angeles という風に変わり、確かにクエリ文字列でパラメータが渡されていることがわかります。

サーバー (Express) 側では、次のように req.query の内容が出力されるはずです。

node param1.js
Listening on http://localhost:3000/...
--- get() called ---
{ country: 'United States', city: 'Los Angeles' }

URL エンコードされていた部分、例えば United+States のように空白が + に置き換えられていた部分は、ちゃんとデコードされて req.query にセットされていることがわかります。