【もりけん塾】JavaScript課題12 – 擬似的にAPIを扱う ② –

今日は、もりけん塾のJavaScript課題12 を終えて学んだことをアウトプットしていきます。

こんにちは。Webコーダーのはるです。

現在、所属している「もりけん塾」でハンズオン課題に取り組み、レビューをいただいています。

今日は、課題12 についてアウトプットをしていきます。
（前回までのアウトプットは、こちらです。）

●課題12で学んだこと

・クリックしたらリクエストする
・要素を削除する
・fetch()とjson()を一緒に書く

【もりけん塾】JavaScript課題12で学んだことまとめ
あとがき

【もりけん塾】JavaScript課題12で学んだことまとめ

今回、取り組んだ課題はこちらです。

「APIにリクエストをする→配列データを取得して、リストを表示する」というところまでは課題11でやりました。⏬

（もりけん先生のJavaScriptハンズオン課題より）

クリックしたらリクエストする

この仕様を実装するために、addEventListnerを学習しました。

target.addEventListener(イベントの種類,関数,[options])

今回使用したイベントの種類は、’click’ です。

targetがクリックされた時に、指定した関数(イベントハンドラーとよばれる)が発動します。

下記のように関数名を指定して、外側で関数を別に定義することもできるし、

target.addEventListener('click',modalOpen,[options])

function modalOpen {
  // 処理
}

第二引数に直接、無名関数を書くこともできる。以下はアロー関数の例。

target.addEventListener('click',() => {
  //処理
},[options])

EventTarget: addEventListener() メソッド - Web API | MDN

addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

要素を削除する

今回は、htmlにボタン要素を作成して、それをクリックしたらイベントが発動する実装をしました。

イベントが発動した後は、ボタン要素を削除する仕様にしたかったので、remove()メソッドを使用しました。

MDN

Element.remove() は所属するツリーから要素を削除します。

PRコード

<!DOCTYPE html>
<html lang="ja">
<head>
　<meta charset="UTF-8">
　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　<link rel="stylesheet" href="reset.css" type="text/css">
　<link rel="stylesheet" href="style.css" type="text/css">
　<script src="index.js" defer></script>
　<title>TerraceTechフロントエンドエンジニア養成所</title>
</head>
<body>
　<div id="js-contents">
　　<ul id="js-lists"></ul>
　</div>
　<button id="js-button">Click!</button>
</body>
</html>

const button = document.getElementById("js-button");
const div = document.getElementById("js-contents");
const ul = document.getElementById("js-lists");

function addLoading() {
　const img = document.createElement("img");
　img.src = "loading-circle.gif";
　img.id = "js-loading"
　div.appendChild(img);
};

function removeLoading() {
　const img = document.getElementById("js-loading");
　div.removeChild(img);
};

async function fetchData() {
　try {
　　const responseApi = await fetch("https://myjson.dit.upm.es/api/bins/7ctn");
　　const json = await responseApi.json();
　　return json.data;
　} catch (e) {
　　throw new Error(e);
　}
}

async function fetchListData() {
　addLoading();
　try {
　　const data = await fetchData();
　　if (data.length === 0) {
　　　throw new Error("データが空です");
　　}
　　return data;
　} catch (e) {
　　createErrorMessage(e);
　} finally {
　　removeLoading();
　}
};

function createErrorMessage(e) {
　const li = document.createElement("li");
　li.textContent = `エラー内容:${e.message}`;
　ul.appendChild(li);
　console.error(e.message);
};

async function addList() {
　const fragment = document.createDocumentFragment();
　const values = await fetchListData();

　if (values) {
　　values.forEach((value) => {
　　　const li = document.createElement("li");
　　　const anchor = document.createElement("a");
　　　const img = document.createElement("img");

　　　anchor.textContent = value.text;
　　　anchor.href = `/${value.to}`;
　　　img.src = value.img;
　　　img.alt = value.alt;

　　　li.appendChild(anchor).insertAdjacentElement("afterbegin", img);
　　　fragment.appendChild(li);
　　});
　　ul.appendChild(fragment);
　}
};


button.addEventListener('click', () => {
　addList();
　button.remove();
});

レビュー：fetch()とjson()をまとめて書く

やすさん(yasu_front)にレビューいただきました！ありがとうございます！

async function fetchData() {
　try {
　　const responseApi = await fetch("https://myjson.dit.upm.es/api/bins/7ctn");
　　const json = await responseApi.json();
　　return json.data;
　} catch (e) {
　　throw new Error(e);
　}
}

このコードのfetch()とjson()を一緒にまとめて書けると教えていただきました。

async function fetchData() {
　try {
　　const json = await (await fetch("https://myjson.dit.upm.es/api/bins/7ctn")).json();
　　return json.data;
　} catch (e) {
　　throw new Error(e);
　}
}

1行でシンプルに書くことができました！

学習に使用している本は、もりけん先生推奨の”JavaScript本格入門”です。