Express + Node.jsでイベント一覧を返すAPIを作る

Node.jsのフレームワークExpressで簡単にイベント一覧を返すAPIを作ります。

Expressのセットアップ
イベント一覧を返すAPIを作る

Expressのセットアップ

まず、Node.jsとyarnコマンドをインストールします。yarnは2016年にFaceBookが公開したJavaScriptのパッケージマネージャで、npmとも互換性があります。Node.jsはLTS版を利用します。
nodejs.org
次にExpressでプロジェクトを作ります。yarn addで必要なパッケージを追加することができます。

$ npm install --global yarn
$ yarn global add express-generator
# プロジェクトを作成
$ express react-backend
$ cd react-backend

expressで作られたプロジェクトで必要なモジュールを追加します。

$ yarn add http-errors
$ yarn add cookie-parser
$ yarn add express
$ yarn add morgan

作られたプロジェクトの各ファイルや関数は下記の記事がわかりやすいです。
qiita.com

イベント一覧を返すAPIを作る

今回イベント一覧を表示させたいので、routesディレクトリ配下にevents.jsファイルを作りレスポンスとして返す情報を記載します。
routes/events.js

const express = require('express');
const router = express.Router();

/* GET event listing. */
router.get('/EventsDataList', function(req, res, next) {
  res.json([
  	{id: 1, title: "event 1", body: "This is the body for event 1"},
  	{id: 2, title: "event 2", body: "This is the body for event 2"},
  	{id: 3, title: "event 3", body: "This is the body for event 3"},
  	{id: 4, title: "event 4", body: "This is the body for event 4"}
  ])
});
module.exports = router;

クライアントからリクエストが合った際に行う処理を決めるルーティング設定と3001番ポートで待ち受けするようにします。Reactだと3000番がデフォルトなので、APIは3001番ポートとします。app.jsはpackage.jsonで定義した./bin/wwwの次に呼び出されるスクリプトファイルです。portの設定は/bin/wwwファイルに記載します。
wwwでポートを変更

const port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
console.log(port);

app.jsには下記を追加

const eventsRouter = require('./routes/events');
app.use('/events', eventsRouter);

# app.js
const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');¥
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const eventsRouter = require('./routes/events');

const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/events', eventsRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

// const port = process.env.PORT || 3001;
// app.listen(port);
// console.log(port);
module.exports = app;

実行して動作確認してみます。

$ yarn run start
yarn run v1.21.0
$ node ./bin/www
3001
# curlコマンドで確認
$ curl --request GET --url \
> http://localhost:3001/events
[{"id":1,"title":"event 1","body":"This is the body for event 1"},{"id":2,"title":"event 2","body":"This is the body for event 2"},{"id":3,"title":"event 3","body":"This is the body for event 3"},{"id":4,"title":"event 4","body":"This is the body for event 4"}]DC02T7A98GYFH:client