expressとNode.jsでAPIを作ってみる

後輩に「APIとは何ですか？」と質問されたのですが、あまり明確に答えることができませんでした。
「Webサーバが外部とデータのやり取りをするための出入り口だよ」とか「受け取ったリクエストをもとにDBにアクセスして結果をレスポンスで返すことができるよ」とかあいまいな回答をしてしまいました。
実際にAPIを作ってみるのがわかりやすいと思うので今回はローカル環境で簡単なAPIを作り、Postmanで呼び出して使てみるところまでをやってみようと思います。

今回実施すること

Node.jsとExpressを使ってAPIを作成し、ローカル環境で起動、Postmanを使用してAPIをテストする方法を紹介します。

フロントエンドとバックエンド

Webアプリは、大きくフロントエンドとバックエンドの2つに分けられます。
今回作るAPIは主にバックエンド側で提供し、フロントエンド側がそのAPIを使用してDBの情報にアクセスして画面の内容を動的に変えてくれるようなイメージです。
それぞれの簡単な役割と説明を記載します。

フロントエンドの役割

フロントエンドは、Webアプリケーションのユーザーインターフェース（UI）を担当します。
ユーザーが直接操作する部分やウェブブラウザ上の見た目の部分です。
ユーザーが情報を入力し、結果を表示するためのフォーム・ボタン・テキストなどの要素を提供します。
デザイン（見た目）やユーザーエクスペリエンス（UX）を管理し、ユーザーにとって使いやすいアプリケーションを作成するのがフロントエンド側の責務です。

バックエンドの役割

フロントエンドからのリクエストを受け取りその情報をもとに何かしらの処理を行い、場合によってはDBに接続してデータを取得・更新などを行ったうえで結果をフロントエンド（ブラウザ側）に返します。
※例えば、フロントエンドが検索ワードをリクエストとして送り、バックエンドが検索結果一覧をレスポンスとして返すなど。
バックエンドがデータを返す窓口をAPI（Application Programming Interface）と呼びます。

Node.js

Node.jsはJavaScriptのランタイム環境であり、本来はクライアントサイドで使用されるJavaScriptをサーバーサイドで実行可能にします。
サーバーサイドのアプリケーションやAPIの開発に使われます。

express

expressはNode.jsのWebアプリケーションフレームワークであり、サーバーサイドのルーティングやミドルウェア（request→responseの間や前後に実行される処理）の作成ができます。
また、expressを使用することでAPIの作成が簡単に行えます。

expressの機能

ルーティング：特定のURLに対してどのコードを実行するかを簡単に設定できます。
たとえばユーザーが "/home" にアクセスしたときホーム画面を表示させる、などが指定できます。

ミドルウェア：リクエストとレスポンスを処理するためのミドルウェアをサポートしており、リクエストを処理する前や後に任意のコードを実行できます。
認証やセキュリティのチェックをミドルウェアとして追加できます。

APIの作成：簡単にRESTful API（Webサービス）を作成できるため、ウェブアプリケーションのバックエンドとしても広く使用されます。
DBの取得や保存、更新、削除などの操作をAPIとして提供できます。

Postman

Postmanは、API（Application Programming Interface）のテストと開発を支援するためのツールです。
ブラウザでAPIのテストをするのは少し難しいですが、PostmanはAPIに対してbodyやヘッダーなどを自由に設定して任意のrequestを送信することができるため、特にウェブ開発者やAPI開発者によく使われます。
この記事では、Postmanを使用してAPIを実際に使用してみるところまで行います。

APIを作ってみる

1.Node.jsのインストール
Node.jsの公式ウェブサイトにアクセスします。
Node.js公式サイト：https://nodejs.org/ja

ダウンロードページから自分のPCに合ったインストーラーをダウンロードします。
推奨版と最新版がありますが、特に理由が無ければ自分は推奨版で問題ないと思います。
推奨版＝安定稼働版ともとらえられますし、バージョン特有の情報もＷｅｂ上に多くあるからです。

インストーラーを実行し、指示に従ってNode.jsをインストールします。
インストールが完了したら、ターミナルまたはコマンドプロンプトで node -v と入力してみましょう。
Node.jsのバージョンが表示されればOKです。

node -v

2.APIを作るためのディレクトリを用意
任意のフォルダにAPIを作るためのフォルダを用意しましょう。
エクスプローラー使用して作成してもよいですし、以下のコマンドを使用してターミナルなどから作成していただいてもOKです。

mkdir my-api-name

3.Expressのインストール
ここからはVScodeを使用します。
まずはVScodeで先ほど作成したディレクトリを開きます。

ターミナルを開き、以下のコマンドを実行しましょう。
こちらはNode.jsでアプリを作るための初期化を行っています。
対話形式でプロジェクトの情報の入力を求められますのでdiscriptionなど必要に応じて入力しましょう。
必要なければすべて改行でスキップしていただいて問題ありません。

npm init

package.jsonというファイルができていたらアプリの準備が整いましたので最後にexpressをインストールしましょう。
ひとつ前の手順でも使用したnpmですが、node.jsと同時にインストールされており、パッケージやフレームワークの管理をしてくれるものです。
今回はexpressをインストールしたいので以下のコマンドを入力しましょう。

npm install express

package.jsonにexpressが追加されていればOKです。

4.APIの作成
expressを使用してAPIを作っていきます。
フォルダにapp.jsというファイルを作成し、以下のコードを記述してみましょう。
この例では、/api/hello パスにGETリクエストが送信されたときに "Hello, World!" というメッセージを返すシンプルなAPIエンドポイントを作成しています。

//expressを使用するための宣言
const express = require('express');
const app = express();
//ポート番号の指定
const port = 3000;

//任意のHTTPメソッドとパスにアクセスがあった時に実行される処理を記述
app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello, World!' });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

5.アプリの起動
コードの準備ができましたので、アプリを起動してみましょう。
以下のコマンドで起動ができますが、今回はあくまでローカル環境での起動です。
自分のPC以外からはアクセスできませんので注意しましょう。

node app.js

1. APIのテスト

Postmanの公式ウェブサイトからPostmanをダウンロードし、自分のPCにあったアプリをインストールします。
Postman:https://www.postman.com/
Postmanを起動し、新しいリクエストを作成します。
リクエストのURLフィールドに API エンドポイントのURL（例: http://localhost:3000/api/hello）を入力します。
HTTPメソッドを選択し（例: GET）、[Send] ボタンをクリックしてリクエストを送信します。
正しくAPIが作成できていればJSON形式のレスポンス（{"message":"Hello, World!"}）が表示されます。

6.ブラウザでAPIテスト
今回はPostmanを使用してAPIを使ってみましたが、本来APIはWebブラウザなどがデータを取得するために使用されます。
つまりブラウザでもAPIを呼び出すことは可能です。
先ほどのAPIをブラウザで使いたい場合はURLとして「http://localhost:3000/api/hello」を入力するだけで画面上でAPIのレスポンスを確認することができます。

ただし、GETやPOST以外の通信を行いたい場合やヘッダーやBodyを指定したい場合などブラウザでは実施が難したかったり操作性が悪かったりするため、Postmanなどのツールを使用しています。

まとめ

これで、Node.jsとExpressを使用してAPIを作成し、Postmanでテストを行うことができました。
今回は単純なメッセージを返すAPIでしたが、本来は何かしらの処理結果を返したり、DBの情報を返したりすることでバックエンド側の情報をフロントエンド側に渡し、ユーザーのブラウザ画面に反映させます。