やりたいこと
GithubのAPIを叩いて、GithubのIDを画面に出したい。
実装方法
１： HTMLの入力欄に自分のIDを入力
２： ボタンをクリック
３： APIをGETで叩いて、JSON形式で取得
４： h１要素として表示させる
用意したHTML
入力欄とボタンのみ用意
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
</head>
<body>
<input></input>
<button>Get My GitHub ID</button>
<h1></h1>
<script src="main.js"></script>
</body>
</html>
用意したjavascriptファイル
APIを叩くと色々な値が返ってくるのですが、loginというキーがGitHubのIDになっています（console.logをしてあげるとよくわかる）。Fetchは何となくノリで書いたけど、動いたからOK。
こういったAjaxの実装をする時、普通はリクエストが成功したかどうか判定して、判定ごとに違う処理をしますがここでは割愛（というかpromiseよくわかってない）。
main.js
'use strict';
{
const text = document.querySelector('input');
document.querySelector('button').addEventListener('click', () => {
let url = `https://api.github.com/users/${text.value}`;
fetch(url).then(function(response) {
response.json().then(function(json) {
document.querySelector('h1').textContent = json.login;
});
});
});
}
動画： https://i.gyazo.com/7dd2e09d16fc503b0b8a9b7aa06d0bf9.mp4