Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@Atie

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構文を使うと簡単!【ヤフー出身エンジニアの入門プログラミング講座】

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?