はじめに
学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。
WebAPIを叩くとは
『WebAPIを叩く』とは、プログラマー的表現でプログラミング上から外部とデータのやり取りをする事を指す。
UIとは
『UI』とは、ユーザーインターフェイス（User Interface）の略称で、一般的にユーザー（利用者）と製品やサービスとのインターフェース（接点）すべてのことを意味する。
WebサイトでいうところのUIは、サイトの見た目や、使いやすさのことを指す。よくUI＝見た目、と勘違いをしている方もいるが、レイアウトや使用されている画像はもちろん、文字のフォント、メニューやボタンの操作性などユーザーが目にするもの・操作するものすべてが含まれる。
index.htmlを作成
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebAPIの練習</title>
</head>
<body>
<p>Chorome DevTools で console を開いてね</p>
<script src="main.js"></script>
</body>
</html>
JavaScriptでAPIを叩くコードを書く
① 実際に呼び出しが出来ているか、consoleで確認
main.js
function callApi() {
//実際にAPIを叩く処理
console.log("foo");
}
callApi();
② WebAPIを叩いて、console上に表示する
main.js
function callApi() {
//windowオブジェクトにあるfetchというメソッドを使用し、APIを叩く
const res = fetch("https://jsonplaceholder.typicode.com/users");
console.log("res");
}
callApi();
③ async/await を使用する
main.js
async function callApi() {
//windowオブジェクトにあるfetchというメソッドを使用し、APIを叩く
const res = await fetch("https://jsonplaceholder.typicode.com/users");
console.log("res");
}
callApi();
④ Jsonメソッドを使用する
main.js
async function callApi() {
//windowオブジェクトにあるfetchというメソッドを使用し、APIを叩く
const res = await fetch("https://jsonplaceholder.typicode.com/users");
const users = await res.json();
console.log("users");
}
callApi();
参考サイト
【JavaScript入門 #8】WebAPIを叩いてみよう！async await構文を使うと簡単！【ヤフー出身エンジニアの入門プログラミング講座】
今さら聞けない！ UI（ユーザーインターフェース）とは？