express.jsにGETリクエストをしてJSONを返す

バックエンド

プロジェクトフォルダを作成し、Express generatorを利用してExpressをインストールします。

expressのインストール

ターミナルで下記を実行します。

npx express-generator

次に、

npm install

でインストール完了です。

あと開発用にnodemonを入れておきます。コード書き換え毎のサーバーの再起動が省けるのでとても便利です。

npm install --save-dev nodemon

次に、package.jsonの”scripts”:{}に、nodemonを追加します。

"scripts": {
    "start": "node ./bin/www",
    "dev": "nodemon ./bin/www"
  },

こんな感じになります。

そして、

npm run dev

で、サーバーが起動します。

Express generatorを使うと、既にだいたい必要なコードが書かれているので、http://localhost:3000/ にアクセスするとデフォルトのページが表示されます。

デフォルトのページが表示されます

http://localhost:3000/users にアクセスすると別のテキストが表示されます

テキストが表示されます

試しにroutes/users.jsのテキストを書き換えてみましょう。

res.send('respond with a resource');

を、

res.send('テキストを返します。');

に書き換えます。

保存してブラウザで再読込すると、

テキストが変わりました。

変更後のテキストが表示されます。

pathの追加

今回は、/json というパスにGETリクエストをすると、JSONオブジェクトが返されるようにしたいと思います。

index.jsの1つ目のrouter.get()の下に、もう一つ追加します。

router.get("/json", function (req, res) {
  res.send({ 挨拶: "こんにちは!!" });
});

保存して、http://localhost:3000/json にアクセスするとJSONオブジェクトが表示されます。

JSONオブジェクトが表示されました

ちなみに、JSON FormatterというChrome拡張機能を入れてるので見やすくなっています。

POSTMANでGETリクエストする

APIを作成する際は、POSTMANを使うと便利です。

インストールして会員登録したら使えます。

新しくWorkspaceを作ります。

名前はExpress-JSONにしました。

新しいタブを開いて、先程のURL、http://localhost:3000/json を入力します。

GETリクエストです。

そして、青い「Send」ボタンを押すと、

200 OK

はい、JSONオブジェクトが返ってきました。

POSTMANでは、他にもPOST、PUT、PATCH、DELETEなどのHTTPリクエストができます。

今回のコード

最後に、今回編集したコードを載せておきます。

package.json
{
  "name": "20221212express-json",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "dev": "nodemon ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.20"
  }
}
routes/index.js
var express = require("express");
var router = express.Router();

/* GET home page. */
router.get("/", function (req, res, next) {
  res.render("index", { title: "Express" });
});

router.get("/json", function (req, res) {
  res.send({ 挨拶: "こんにちは!!" });
});

module.exports = router;
routes/users.js
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('テキストを返します。');
});

module.exports = router;

以上です。

コメント

タイトルとURLをコピーしました