##はじめに
####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。
##WebAPIを叩くとは
『WebAPIを叩く』とは、プログラマー的表現でプログラミング上から外部とデータのやり取りをする事を指す。
##UIとは
『UI』とは、ユーザーインターフェイス（User Interface）の略称で、一般的にユーザー（利用者）と製品やサービスとのインターフェース（接点）すべてのことを意味する。
WebサイトでいうところのUIは、サイトの見た目や、使いやすさのことを指す。よくUI＝見た目、と勘違いをしている方もいるが、レイアウトや使用されている画像はもちろん、文字のフォント、メニューやボタンの操作性などユーザーが目にするもの・操作するものすべてが含まれる。
##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で確認
function callApi() {
//実際にAPIを叩く処理
console.log("foo");
}
callApi();
#####② WebAPIを叩いて、console上に表示する
function callApi() {
//windowオブジェクトにあるfetchというメソッドを使用し、APIを叩く
const res = fetch("https://jsonplaceholder.typicode.com/users");
console.log("res");
}
callApi();
#####③ async/await を使用する
async function callApi() {
//windowオブジェクトにあるfetchというメソッドを使用し、APIを叩く
const res = await fetch("https://jsonplaceholder.typicode.com/users");
console.log("res");
}
callApi();
#####④ Jsonメソッドを使用する
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構文を使うと簡単！【ヤフー出身エンジニアの入門プログラミング講座】]
(https://www.youtube.com/watch?v=QugDLcOo_EE&t=70s)
[今さら聞けない！ UI（ユーザーインターフェース）とは？]
(https://www.m-hand.co.jp/design/7161/)