Zenn
🐣

ひよっこフロントエンドだけどAPIを理解したい

2024/06/17に公開
API
fetch
フロントエンド
tech

APIの概要からfetchでアニメタイトル取得するまで

概要

APIとは、Application Programming Interfaceの略で、アプリケーションを開発する際に使用されるプログラムのインターフェースのことです。

と、言われてもよくわからない。

簡単にいうと、
"あるサービスが予め用意してくれているアプリやプログラム・機能を借りる。"
といったところだろうか。

💡 APIは主に機能を使う事が多い
上記ではAPIでデータを扱う例を紹介したが、今APIを叩くというと、大体がこの”機能を使う”ものである。
具体例でいうと、AmazonPay(決済機能)や、twitterの投稿機能がある。
ショッピングやECサイトにAmazonPayのAPI機能を埋め込む事で、利用者はいちいちそのECサイトにカード情報などを入力せずに、amazonを介して支払いすることができる。

実際にAPIを使ってみる

JSONPlaceholderは、気軽に使えるapiで、JSON形式で書かれたダミーのJSONデータを提供してくれるサービス。

ここに対して、例えばuserのidが欲しいとか、年齢が欲しいなど、欲しいデータでリクエストを送り、レスポンスが返ってくる一連の流れを、APIを叩くと言う。

💡 JSONとは
javascript object notationの略で、javascript形式で書かれたデータの記述言語。
以下は、jsonplaceholderというダミーのJSONファイルを提供してくれているサービスの抜粋。

  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }

fetchAPIを使ってjspnplaceholderのデータを取得する。

APIを取得するには、fetchを使うらしい。
今回は以下のユーザーデータを取得したい。

https://jsonplaceholder.typicode.com/users

jsonplaceholder内の、ユーザー情報を配列で取得できた。

参考：

Fetch API fetch() の使い方

もう少し踏み込んでAPIを扱ってみる

上の章ではAPIを使って値を取ることはできた。
次は取得したAPIから特定の値を取得したい。最後にHTMLに表示したい。
以下は2023年放送のアニメ一覧がJSON形式でデータ化されているAPI (※現在は無くなっているっぽい　2024年6月時点)

まずfetch APIを使ってアニメの一覧を取得。
と思ったが、async/awaitに書き換えられる事を知り、そう書いた。

const animes =async()=>{
  const response =await fetch('https://api.moemoe.tokyo/anime/v1/master/2023');
  const animeData =await response.json();
console.log(animeData);
}

animes();

結果

配列の中にアニメのidやタイトルが入っているものが取れた。

では、『.(ドット)』でつないで、タイトルだけの一覧を取得しようと試みる。

しかし結果はundefindだった。

なぜ・・・と思って調べた

この場合、animeDataは配列。そして配列の中にオブジェクトが入っている。

○○.titleなどとすると、オブジェクトそのものの値を取得しようとする事になる。
やりたいのは、animeDataの中にあるアニメのタイトルを取得することなので、
animeData[0].titleとする事で、0番目のアニメタイトルが取得できる。

つまりこんなイメージ

なのでコードを修正して、

console.log(anime[0].title);

結果

取れた。

animeDataの配列を全部取得したい

X番目の値は取れるようになったが、やりたいのは全部の値を撮る事。
ここでループ処理を使えば良い事に気づく。

let anime_list =document.getElementById("anime_list");
async function animes(){
  const response =await fetch('https://api.moemoe.tokyo/anime/v1/master/2023');
  const animeData =await response.json();
console.log(animeData);
console.log(animeData[0].title)

//ループ処理
  animeData.forEach(anime=>{
    console.log(anime.title;);
  })
}
animes()

結果

今回の主題ではないので、詳細な説明は割愛するが、innerHTMLとappendChildを使う事で、
取得したアニメタイトル一覧をHTMLに出力する事ができるらしい。

参考：fetchでapi（Json情報）を取得 - Qiita

HTML側

<h1>2023年放送アニメ一覧</h1>
<ul id="anime_list"></ul>

JS

let anime_list =document.getElementById("anime_list");
async function animes(){
  const response =await fetch('https://api.moemoe.tokyo/anime/v1/master/2023');
  const animeData =await response.json();

//HTMLに出力するコード　
animeData.forEach(anime=>{
    console.log(anime.title);
    var list =document.createElement('li');
    list.innerHTML =anime.title;
    anime_list.appendChild(list);
  })
}
animes()

結果

Discussion