Expressで外部データを取得する方法をまとめました【Express/axios/JSONPlaceholder】

JavaScript

ExpressはNode.jsでWebアプリを作成できるフレームワークです。今回、外部データを取得する方法としてaxiosの使い方についてまとめました。将来の自分がコピペできるようにメモしておきます!

外部データを取得したサンプル

今回、ダミーのJSONを返してくれるJSONPlaceholderというAPIで外部データを取得しました。
以下は、JSONPlaceholderから取得したデータを表示したサンプルです。

axiosで外部データを読み込んでみる

axios(アクシオス)は、PromiseベースのHTTPクライアントです。

GET・POSTのHTTPリクエストを送ると、サーバからデータを取得できます。Promiseベースなので非同期通信を行うことができます。

axiosをインストールする

axiosはJavaScriptのライブラリなので、使用するにはインストールする必要があります。
次のコマンドでインストールできます。

$ npm i axios

axiosの基本的な使い方

基本的な使い方は公式ページを参考にします。

axios
Promise based HTTP client for the browser and node.js. Latest version: 0.27.2, last published: 5 months ago. Start using axios in your project by running `npm i...

以下はGETリクエストでデータを取得する雛形になります。
※非同期処理をしたいのでasyncとawaitを使っています。

// データを取得するURL
const url = "https://jsonplaceholder.typicode.com/users";

// GETリクエストでデータを取得する
app.get("/", async (req, res) => {
  try {
    // getでデータを取得
    const response = await axios.get(url);
    // 取得したデータが変数usersに格納される
    const users = response.data;
  } catch (error) {
   // データ取得が失敗した場合
    console.error(error);
  }
});

今回、データを取得するURLは次のURLを設定しています。

https://jsonplaceholder.typicode.com/users

このURLにアクセスすると、次のようなページが表示されます。
以下はデータの一部をキャプチャしたものです。
※ChromeのアドオンJSON formatterでコードを整形しています。

これが今回取得したいJSONのデータになります。

axiosから取得したデータからJSONだけを取り出す

axiosで取得したデータをコンソールで確認すると、サーバーから返却されたデータが延々と続いています。この中にJSONデータが含まれています。

{
  status: 200,
  statusText: 'OK',
  headers: {
    date: 'Thu, 25 Aug 2022 10:14:05 GMT',
    'content-type': 'application/json; charset=utf-8',
    'transfer-encoding': 'chunked',
    connection: 'close',
    'x-powered-by': 'Express',
    'x-ratelimit-limit': '1000',
    'x-ratelimit-remaining': '998',
    'x-ratelimit-reset': '1636483785',
    vary: 'Origin, Accept-Encoding',
    'access-control-allow-credentials': 'true',
    'cache-control': 'max-age=43200',
    pragma: 'no-cache',
    expires: '-1',
    'x-content-type-options': 'nosniff',
    etag: 'W/"160d-1eMSsxeJRfnVLRBmYJSbCiJZ1qQ"',
    via: '1.1 vegur',
    'cf-cache-status': 'HIT',
    age: '15313',
    'expect-ct': 'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"',
    'report-to': '{"endpoints":[{"url":"https:\\/\\/a.nel.cloudflare.com\\/report\\/v3?s=eGfocvoNYiI3bNb6XnfmT51EHlTljKm4Cax4RiDc3vgB1aURQKEUdf62324PcpiijiFPUPHkpSB4goUf6ppDKJPxBS8m6owOVR1OTwHzeXc5mxFaN5JirTuP5k5HRZJUOt8TLVF31Fv2I8i%2FjxMX"}],"group":"cf-nel","max_age":604800}',
    nel: '{"success_fraction":0,"report_to":"cf-nel","max_age":604800}',
    server: 'cloudflare',
    'cf-ray': '74038f0e6fda7875-VIE',
    'alt-svc': 'h3=":443"; ma=86400, h3-29=":443"; ma=86400'
  },
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [Function: httpAdapter],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function] },
    validateStatus: [Function: validateStatus],
    headers: {
      Accept: 'application/json, text/plain, */*',
      'User-Agent': 'axios/0.27.2'
    },
    method: 'get',
    url: 'https://jsonplaceholder.typicode.com/users',
    data: undefined
  },
・
・
・
省略
// ここからJSONデータ
data: [
    {
      id: 1,
      name: 'Leanne Graham',
      username: 'Bret',
      email: 'Sincere@april.biz',
      address: [Object],
      phone: '1-770-736-8031 x56442',
      website: 'hildegard.org',
      company: [Object]
    },
    {
      id: 2,
      name: 'Ervin Howell',
      username: 'Antonette',
      email: 'Shanna@melissa.tv',
      address: [Object],
      phone: '010-692-6593 x09125',
      website: 'anastasia.net',
      company: [Object]
    },
・
・
以降JSONが続く...

下の方にdata:[]というプロパティが見つかると思います。※色付けした箇所
ここに先ほど確認したJSONを見つけることができます。

コードだと次の部分で取り出しています。※色付けした箇所

// getでデータを取得
const response = await axios.get(url);
// 取得したデータが変数usersに格納される
const users = response.data;

JSONはそのままだと文字列なので、データとして使う際はJSON.parse()でオブジェクトに変換する必要があります。axiosはこの変換も自動的に処理してくれるので、取り出したデータはそのままオブジェクトとして扱えます。

JSONをオブジェクトとして取得できたら、テンプレートに渡して表示させます。
その辺の実装は次の記事も参考になると思います。

まとめ

APIからJSONを取得して表示させるのは、アプリ制作でよくあるシチュエーションです。
実際は細かいエラー処理を追加しますが、雛形のコードをメモしておきます!