【コピペで完成】スプレッドシートを使ってAPIを作ってみよう!~ API活用編 ~

こんにちは!

今日もAPI使ってますか??やましょです。

この記事で分かること

  • APIを使ったデータ取得と表示

前回の振り返り

前回までの記事でスプレッドシートを使ってAPIを作成する方法をまとめました!

実際に環境を作って実装したい方はぜひこちらの記事をご覧ください。

今回作るもの

前回までで作成したユーザAPIを使って、メンバー一覧表を作成します。

See the Pen 【API】Members List by Syohei Yamaki (@syohei-yamaki) on CodePen.

実装方法

今回はVue.jsを使って、実装をしてます。

  1. APIを使ってデータを取得
  2. v-forでデータを表示
  3. v-ifを使って「読み込み中…」の表示

1. APIを使ってデータを取得

fetch(this.url).then(res => {
  return res.json();
}).then(data => {
  this.users = data;
}).catch(error => {
  console.log("error", error);
});

Fetchを使用してデータを取得します。

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

データを取得したらdataにあるusersに値を代入します。

2.v-forでデータを表示

v-forでusersの値を一覧表示します。

<tbody>
  <tr v-for="user in users" :key="user.name">
    <td>{{ user.name }}</td>
    <td>{{ user.age }}</td>
    <td>{{ user.description }}</td>
  </tr>
</tbody>

3. v-ifを使って「読み込み中…」の表示

データを取得する前は「読み込み中…」と文字を表示して、データを取得できたらテーブルを表示するようにします!

fetch内でデータ取得時にisLoadingをtrueにすることで表示の切り替えをおこないます。

// JavaScript
fetch(this.url).then(res => {
  return res.json();
}).then(data => {
  this.users = data;
  this.isLoading = false;
})

// HTML
<div v-if="isLoading">
  読み込み中...
</div>
<table v-else>
 ...
</table>

Vue.jsを使わずに実装する場合

Vue.jsを使わずに実装したので、こちらを参考にしてください!

See the Pen 【API】Member List with Vanilla JS by Syohei Yamaki (@syohei-yamaki) on CodePen.