【Node基礎】RESTful API を理解する

VueとNodeのRESTful API

Vue.js と Node.js を使用した RESTful API の実装は、Vue.js(フロントエンド)とNode.js(バックエンド)間でデータをやり取りするために使われることが一般的です。ここでは JavaScript ランタイムで活用されるExpress.jsにて簡単なRESTful APIを作成、サーバーからデータを取得する例を紹介させていただきます。※本記事の実行環境はローカルとします。

Node.js インストール

Node.js を公式サイトからインストール、コマンドでバージョン確認ができればインストール完了ですね。

node -v

プロジェクト作成

ここでは例としてrestful-apiディレクトリを作成し、コマンドでディレクトリへ移動。プロジェクトを初期化します。

mkdir restful-api
cd restful-api
npm init -y

Expressインストール

Expressは、Node.jsのWebフレームワークでAPIを簡単に作成できます。

npm install express

Expressを使いAPIサーバー作成

Express を使って以下のようなファイル構成で簡単な API サーバーを作成します。

restful-api/
├─ server.js
└─ package.json

server.jsファイル用意

Expressを使ってGETエンドポイントを作成し、サーバーを立ち上げます。

// server.js
// Express フレームワークを使用するための基本的なセットアップ
const express = require('express'); //Expressモジュールを読み込む
const app = express();
const port = 3000;

// リクエストとレスポンスの間で実行されるミドルウェアとして JSON を解析
// req.body 格納
app.use(express.json());

// サンプルデータを提供するAPI
app.get('/api/user', (req, res) => {
  const user = {
    id: 1,
    name: 'なんだっけ 太郎',
    email: 'nandakke@example.com'
  };

  res.json(user);  // JSON形式でユーザー情報を返す
});

// サーバー起動
app.listen(port, () => {
  console.log(`SERVER RUN  http://localhost:${port}`);
});

Nodeは中間にいるAPIサーバーで、今回はサンプルデータとしてAPIを仮に用意していますが、サーバーからデータを取得する場合もコードの基本は同じです。もしmySqlからデータを取得する場合は、MySQLに接続し、GETエンドポイントにquery文にてSELECT * FROM usersなどsqlにて取得、res.jsonでJSON形式で情報を返すという流れですね。（XMLとかも理論上はできるかもしれませんがJSONが標準かと。）

■ サーバーの起動

以下のコマンドでサーバーを起動

node server.js

コマンドでサーバーが立ち上がり、以下のようなメッセージが表示されれば起動成功です。

  SERVER RUN  http://localhost:3000

http://localhost:3000/api/userにアクセスしてみてください。ブラウザに以下のような JSON レスポンスが表示されているかと。

{
  "id": 1,
  "name": "なんだっけ 太郎",
  "email": "nandakke@example.com"
}

これで、サーバーサイドからデータを提供する API が完成です。

フロントエンドにてAPIデータ取得

フロントエンドから、この API を使ってデータを取得します。

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const user = ref(null);
const loading = ref(true);

onMounted(() => {
  axios.get('http://localhost:3000/api/user')
    .then((response) => {
      user.value = response.data;  // user の値を更新
      loading.value = false;  // loading を false に変更
    })
    .catch((error) => {
      console.error('There was an error!', error);
      loading.value = false;  // エラー時も loading を false に変更
    });
});
</script>
<template>
  <div>
    <h1>User Profile</h1>
    <div v-if="loading">LOADING...</div>
    <div v-else>
      <p> {{ user.name }}</p>
      <p> {{ user.email }}</p>
    </div>
  </div>
</template>

■ axios

APIとの通信を行う際に使用されます。Axiosは、非同期通信を簡単に処理します。axios.getで非同期にデータを取得し、成功した場合はuser.valueにデータを格納、失敗した場合はエラーメッセージをコンソールに出力。

■ ref

リアクティブ変数を使って、user.valueやloading.valueと値を操作。

■ onMounted()

onMounted フックを使い、コンポーネントがマウントされた後に API を呼び出し。

まとめ

今回は、Webシステムを外部から利用する簡単なRESTful APIについて紹介をさせていただきました。Expressを使って簡単に RESTful API を作成でき、Expressにて異なる HTTP メソッドに対応するエンドポイントを作成できます。また上記基本にフロントエンドから、API を利用してデータを取得また送信したりできます。

以上となります。できる限りわかりやすく伝えようとしても書くのは難しいです。
コードや記事の書き方について気になるところがあれば、アドバイスいただけると嬉しいです。