JS webApiを叩く (JSアウトプット)

あいさつ

初めての人は初めまして！知っている人はこんにちは！
中学生バックエンドPGのAtieです！
今回はJSでwebApiを叩く最低限の方法を学んできたのでアウトプットします！
では！

webApiとは？

まずはwebApiとは何かを解説していきます
そもそもApiとはApplication Programming Interfaceの略で
プログラムをの機能や管理するデータを外部からアクセスできるようにしたものです
そしてそのApiの通信方式がhttpなどのwebだったらwebApiと呼ばれます

実際にApiを見てみましょう
今回はjsonplacefolderというサービスを利用します
ここにアクセスしてみてください
json形式のオブジェクトがありますよね？よく見てみると今回はプログラミングのデータが入っています
これがApiです
そしてこのApiは通信方式がhttpなのでwebApiと呼ばれます

ちなみに「webApiを叩く」という表現はプログラマー的表現でwebApiを外部からとってくることを意味します

webApiを叩く！

では実際にwebApiを叩いていきます
今回使うApiは先ほどのユーザが入ったApiを使っていきます

fetch

まずはwebApiを叩く関数を定義しましょう

main.js

function callApi() {
    console.log("webApi!!");
};

webApiを叩くにはfetchというメソッドを使う必要があります
fetchはメソッドなのでこのように呼び出す必要があります

main.js

fetch();

fetchの引数にはApiのurlを入れます
なので今回は

main.js

function callApi() {
    const res = fetch("http://jsonplaceholder.typicode.com/users");
    console.log(res);
};

このようにします
実行すると画面上にjson形式のデータが表示されると思います

async await

しかしこのままではプログラム上では使いにくい形式となっているので使いやすい形式に変える必要があります

まずは関数のまえにasyncといれます
そうすることでこの関数は非同期関数と呼ばれる関数になります
悲壮機関数はawaitというのが使えるようになります

main.js

async function callApi() {
    const res = await fetch("http://jsonplaceholder.typicode.com/users");
    console.log(res);
};

このプログラムを実行するとresponsというオブジェクトが返ってきます
このオブジェクトにはwebApiが叩けたかどうかなどの情報が入っていますがまだ使いにくいので使いやすくする必要があります

そのためにはresオブジェクトが持つjsonというメソッドを使います　

main.js

async function callApi() {
    const res = await fetch("http://jsonplaceholder.typicode.com/users");
    const users = await res.json();
    console.log(users);
};

こうすると個々のデータが入った配列が表示されると思います
これで使いやすいデータになりました！

ここまででwebApiを取得することができました！

さいごに

今回は非同期関数などにあまり深く触れていませんが初心者レベルだとこれだけで十分です
非同期関数などについてはまた今度詳しい記事を書こうと思います
Twitterしています→AtieのTwitter
では！また今度の記事で！

参考、学習資料

【JavaScript入門 #8】WebAPIを叩いてみよう！async await構文を使うと簡単！【ヤフー出身エンジニアの入門プログラミング講座】