【Node.js + Express】ExpressでREST APIを開発してみる〜概要・取得

2021.10.4(Mon)

REST APIとは？

そもそもREST APIとはなんなのか、というところから解説します。

REST APIのRESTとは「REpresentational State Transfer」の略です。

ちなみにAPIとは「Application Programming Interface」の略で、ソフトウェアやプログラム同士をつなぐインターフェースのことを指します。

Webアプリケーションの分野でいうと、ユーザーが実際に触るUI（ユーザーインターフェース）側であるクライアントと、サーバー側ということになります。

REAT APIには4原則があります。

統一インターフェース → HTTPメソッドやJSON形式でのやり取りなど、統一性のある形式でやりとりする
アドレス可能性 → API情報は全て一意なURIを持っている
接続性 → 一つのリンクから別の情報にリンクできる
ステートレス性 → やり取りが1回で完結する（前のセッションの影響を受けない）

これらを踏まえた上でREST APIの特徴を簡単に説明すると、

基本的にREST APIはHTTP通信にて、JSON形式でデータをやり取りします。そして、データベースからデータを取得するAPIだったり、データを登録するAPIだったりには、全て一意のURIが付与されており、このURIにアクセスすることでAPIを実行することができます。これらのAPI情報には接続性があり、そして、それぞれでやり取りが完結しているため、他の接続の影響は受けません。

という感じになります。

正直説明だけではイメージがわかないと思いますので、実際にREST API開発を体験してみましょう。

下記記事はREST APIについて初心者向けにわかりやすく解説されていましたので、ご参考ください。

REST APIとは？ざっくりと理解してみる【初心者向け】
https://tech.012grp.co.jp/entry/rest_api_basics

データベースの準備をする

まず、今回、REST APIにて扱うデータベースを用意しましょう。

PostgreSQLを使います。

以前の記事にてPostgreSQLのインストールについてまとめてありますので、ご参考ください。

【Node.js + PostgreSQL】Node.jsをPostgreSQLに接続して、クエリ操作を実行してみる – PostgreSQLのインストール
https://www.dailyupblog.com/backend_development/962/#chapter-1

PostgreSQLやpgAdminのインストールが完了済みでしたら、コマンドにて、データベースを作成していきましょう。

下記コマンドで、postgreSQLにアクセスしてください。

psql postgres

そして、下記コマンドで、データベースを作成、移動してください。

create databese expressdb;
¥c expressdb

そこで、テーブルを作成します。

今回は簡単な名簿テーブルを作成しましょう。

create table meibo (id varchar(10), name text, intro text);

作成したら、下記コマンドで、ちゃんと作成されているか確認しましょう。

ついでにpgAdminでもデータベースとテーブルが作成されているか確認しておきましょう。

¥dt

ついでに既存でデータも3件ほど入れておきましょう。

下記コマンドでデータをinsertします。

insert into meibo values ('r457kb68yw', 'マイケル', '趣味はランニングです。25歳の男です。'),('hg97xzp060', 'ケビン', '36歳2児のパパです。金融関係の仕事をしています。'),('6vi36q0xp5', 'ジェシカ', '19歳の女子大生です。情報工学部に所属しています。');

idには10桁の英数字をランダムに入れました。

このidがprimary keyです。

pgAdminで確認しても問題なくデータが入っていたら、準備完了です！

APIを作る

exprees-generatorの導入

今回はExpressの雛形を生成してくれるツールである「express-generator」を利用していきたいと思います。

まず、任意のディレクトリにて、下記コマンドを実行してください。

express express-test

※expressコマンドが使えない場合はpathを通す必要があります。

そうすると、「express-test」というフォルダが生成されて、中をみてみると、必要なファイルやフォルダが既に用意されています。

cdコマンドで、「express-test」フォルダに移動しましょう。

package.jsonに記載されたモジュールを全てインストールする必要があるので、下記コマンドでインストールしましょう。

//npmの場合
npm install

//yarnの場合
yarn install

「node_modules」フォルダが生成されたら成功です。

ここで一旦nodeを起動してみましょう。

起動するには下記コマンドを実行してください。

//npmの場合
npm start

//yarnの場合
yarn start

その後、「http://localhost:3000」をブラウザでアクセスしてみてください。

※デフォルトのポート番号は「3000」です。

下記のようなページがブラウザに表示されましたら、成功です。

「Hello」を返すだけのAPIを作ってみる

さて、express-generatorの導入が完了したので、試しに「Hello」という文字列を返すだけの簡単なAPIを作ってみましょう。

まず、APIは「routes」ディレクトリ内に格納されています。

現在既にデフォルトで「index.js」と「users.js」というファイルが存在しますが、これは既存で入っているAPIデータです。

今回は自分で作ってみましょう。

「routes」ディレクトリ内にhello.jsというファイルを作成しましょう。

hello.jsファイルには下記のように記述しましょう。

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

router.get("/", function (req, res, next) {
  res.send("Hello");
});

module.exports = router;

「/」にアクセスされたら、「Hello」という文字列を返すという簡単な記述をしました。

これではまだこのAPIは使えません。

使えるようにしましょう。

「express-test」直下にあるapp.jsファイルを開いてください。

下記のように2つ追記します。

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
var helloRouter = require("./routes/hello"); //追記

var 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("/hello", helloRouter); //追記

// 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");
});

module.exports = app;

app.jsで今回作成したAPIを使用できるように記述しました。

今回作成したAPIは「/hello」でアクセスできます。

実際にAPIを実行してみましょう。

今回はPostmanというソフトを使って、通信します。

PostmanはWeb APIのテストクライアントサービスの一つで、開発したREST APIなどを簡単にテストすることができます。

Postmanは下記からインストールが可能です。
https://www.postman.com/downloads/

Postmanのインストールが完了したら、「npm start」にて、APIを起動しましょう。

そして、Postmanを開いて、「GET」でURI入力欄に「http://localhost:3000/hello」を入力して、「send」ボタンを押してみましょう。

「Hello」という文字列が返ってきたら、成功です。

データベースからデータを取得するAPIを作る

さて、ExpressでのREST API開発の流れがわかったら、いよいよデータベースからデータを取得するAPIを作ってみましょう。

postgreSQLをExpressで使えるようにするために「pg」モジュールをインストールしましょう。

//npmの場合
npm install pg

//yarnの場合
yarn add pg

その後、「express-test」直下に「db」フォルダを作成しましょう。

このフォルダの中にpool.jsを作成します。

この中には、今回接続するpostgreSQLのデータベース情報を記述しておきます。

下記を記述してください。

const { Pool } = require("pg");

const pool = new Pool({
  user: "ユーザー名",
  host: "127.0.0.1",
  database: "expressdb",
  password: "パスワード",
  port: 5432,
});

module.exports = pool;

続いて、「routes」フォルダ内に新しくmeibo.jsファイルを作成しましょう。

このファイルには下記のように記述しましょう。

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

const pool = require("../db/pool");

router.get("/", function (req, res, next) {
  pool.query("SELECT * FROM meibo", function (error, result) {
    if (error) {
      throw error;
    }
    res.status(200).json({
      data: result.rows,
    });
  });
});

module.exports = router;

下記で先ほど作成したpool.jsをrequireします。

const pool = require("../db/pool");

postgreSQLのSQLコマンドはquery()メソッドの第一引数に記述します。

そして、第二引数には通信後の処理を書きます。

エラーした際の記述も忘れずに書きておきましょう。

そして、status(200)で通信に成功し、無事データを取得できたら、取得データはGETしたオブジェクトのrowsの中にあるため「result.rows」という風に記述しましょう。

  pool.query("SELECT * FROM meibo", function (error, result) {
    if (error) {
      throw error;
    }
    res.status(200).json({
      data: result.rows,
    });
  });

node.jsでのpostgreSQLでSQLコマンドを実行する方法に関しては過去の記事でもご紹介していますので、よろしければご参考ください。

【Node.js + PostgreSQL】Node.jsをPostgreSQLに接続して、クエリ操作を実行してみる
https://teech-lab.com/node-express-postgres-pool/1243/

最後にmeibo.jsを読み込ませるために、app.jsに追記しましょう。

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
var helloRouter = require("./routes/hello");
var meiboRouter = require("./routes/meibo"); //追記

var 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("/hello", helloRouter);
app.use("/meibo", meiboRouter); //追記

// 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");
});

module.exports = app;

これで完成です。

「npm start」でサーバーを起動して、Post manにて「http://localhost:3000/meibo」を実行してみてください。

下記のようにjson形式でデータベースの情報を全て取得できるはずです。

データベースからデータを絞り込みで取得するAPIを作る

さて、データを全件取得するAPIは紹介しました。

続いては、絞り込みによって、欲しいデータのみ取得するAPIを作ってみましょう。

今回は、データベースのカラムのidで取得するデータを指定しましょう。

それではみていきましょう。

meibo.jsファイルを開いて下記のように記述してください。

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

const pool = require("../db/pool");

//データ全件取得API
router.get("/", function (req, res, next) {
  pool.query("SELECT * FROM meibo", function (error, result) {
    if (error) {
      throw error;
    }
    res.status(200).json({
      data: result.rows,
    });
  });
});

//データid検索API
router.get("/:id", function (req, res, next) {
  const id = req.params.id;
  pool.query("SELECT * FROM meibo WHERE id = $1", [id], function (
    error,
    result
  ) {
    if (error) {
      throw error;
    }
    res.status(200).json({
      data: result.rows,
    });
  });
});

module.exports = router;

先ほど、作った全件データ取得APIの記述の下に追記しました。

今回は、パスパラメータを取得して、その値の数値と一致するidのデータを取得するというものにしました。

SQLコマンドでは、「where」を使って、取得データの絞り込みをしています。

これでファイルを保存して、「npm start」しましょう。

その後、Postmanで「http://localhost:3000/meibo/643231」を実行してみましょう。

そうすると、下記のように「ケビン」のデータのみ取得できているのがわかります。

まとめ

いかがだったでしょうか。

今回はExpressを使ったREST APIの開発について、概要説明と作り方の解説、実際にデータベースからデータを取得する方法について説明いたしました。

次回はデータベースのデータを絞り込みで登録・更新・削除する方法について、ご紹介したいと思います。

それでは今回はここまで！

お疲れ様でした！

Web開発

【Nuxt.js + Node.js】画像アップロード機能を……
2022.1.18
Web開発

【Vue + Nuxt.js】Nuxt.jsでのVuexの使……
2021.7.26
バックエンド開発

【Node.js + Express】リクエストからパラメー……
2021.9.28
Web開発

【Nuxt.js + Express】Expressで開発し……
2021.10.19
Web開発

【Vue + vue-cli】props、$emitについて
2021.6.21
Web開発

【Nuxt.js + Express】Expressで開発し……
2021.10.27
Web開発

【Vue + vue-cli】Vueにおけるライフサイクルに……
2021.6.16
Web開発

【Vue + vue-cli】vue-routerでパラメー……
2021.7.8
バックエンド開発

【Node.js】アクセスされたURLの取得と処理の振り分け
2021.8.3
バックエンド開発

【Express + JWT】ExpressでJWTを使った……
2021.11.24
バックエンド開発

【Node.js】Node.jsとは？概要と特徴、環境構築、……
2021.7.30
Web開発

【Vue + vue-cli】vue-routerの基本的な……
2021.6.15
バックエンド開発

【Node.js + PostgreSQL】取得したデータを……
2021.9.26
バックエンド開発

【Node.js + Express】ミドルウェアを使ってみ……
2021.9.29
Web開発

【Vue + Nuxt.js】Nuxt.jsとは？〜環境構築……
2021.7.12
バックエンド開発

【Node.js + Express】Postされたデータを……
2021.9.29
Web開発

【Vue + vue-cli】vue-cliの構造とHell……
2021.6.10
Web開発

【Vue + vue-cli】Vueのデータバインディングま……
2021.6.28
Web開発

【React.js】React.jsとは？環境構築やHell……
2023.4.12
バックエンド開発

【Node.js + PostgreSQL】Node.jsを……
2021.8.26

Web開発

【Vue + Nuxt.js】Nuxt.……

2021.7.26

Web開発

【Nuxt.js + Auth認証】Nu……

2021.12.9

Web開発

【Vue + vue-cli】vue-r……

2021.7.8

【Node.js + Express】ExpressでREST APIを開発してみる〜概要・取得

目次

REST APIとは？

データベースの準備をする

APIを作る

exprees-generatorの導入

「Hello」を返すだけのAPIを作ってみる

データベースからデータを取得するAPIを作る

データベースからデータを絞り込みで取得するAPIを作る

まとめ

【Nuxt.js + Node.js】画像アップロード機能を……

【Vue + Nuxt.js】Nuxt.jsでのVuexの使……

【Node.js + Express】リクエストからパラメー……

【Nuxt.js + Express】Expressで開発し……

【Vue + vue-cli】props、$emitについて

【Nuxt.js + Express】Expressで開発し……

【Vue + vue-cli】Vueにおけるライフサイクルに……

【Vue + vue-cli】vue-routerでパラメー……

【Node.js】アクセスされたURLの取得と処理の振り分け

【Express + JWT】ExpressでJWTを使った……

【Node.js】Node.jsとは？概要と特徴、環境構築、……

【Vue + vue-cli】vue-routerの基本的な……

【Node.js + PostgreSQL】取得したデータを……

【Node.js + Express】ミドルウェアを使ってみ……

【Vue + Nuxt.js】Nuxt.jsとは？〜環境構築……

【Node.js + Express】Postされたデータを……

【Vue + vue-cli】vue-cliの構造とHell……

【Vue + vue-cli】Vueのデータバインディングま……

【React.js】React.jsとは？環境構築やHell……

【Node.js + PostgreSQL】Node.jsを……

【Vue + Nuxt.js】Nuxt.……

【Nuxt.js + Auth認証】Nu……

【Vue + vue-cli】vue-r……