【もりけん塾】JavaScript課題8 -ローディング実装 ②-

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

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

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

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

●課題8で学んだこと

・Promiseのreject, catchの使い方
・JSでcss操作せずreset.cssを使用する

【もりけん塾】JavaScript課題8で学んだことまとめ
- Promiseのreject, catchの使い方
- JSでCSSを操作せずreset.cssを使用する
あとがき

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

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

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

Promiseのreject, catchの使い方

前回までは、処理が成功したときにresolve()を実行して、.then()をチェーンで使用することで続きの処理を書くところまでやりました。

今回は、rejectされた時の処理の書き方を学びました。

MDNには以下のようにあり、.then()ではなく.catch()を使用してみることにしました。

それぞれの .then() で拒否されたプロミスを扱うと、プロミスの連鎖のさらに先に影響を及ぼします。一方で、緊急の必要性がない場合は、最後の .catch() ステートメントまでエラー処理を行わない方がシンプルです。 .catch() は、実際には、単なる .then() からプロミスが解決されたときのためのコールバック関数のスロットを抜いたものです。(MDNより)

また、rejectの構文をMDNで確認↓

Promise.reject(reason);

引数にreasonを書く　＝　エラー文を書くということかな。。

function fetchListData() {
　addLoading();
　return promise = newPromise((resolve, reject) => {
　　setTimeout(() => reject("エラー：データが取得できません"), 3000);
　});
}

fetchListData()
.then(values=> {
　removeLoading();
　addList(values)
})
.catch((e) => console.error(e));

console.errorの書き方も、MDNで学習して使用してみました。

console - Web API | MDN

console オブジェクトは、ブラウザーのデバッグコンソール（例えば Firefox のウェブコンソール）へのアクセスを提供します。

ここまでで、PRしました。promiseの部分は問題なかったようです✨

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

const attributes = [
　{ to: "bookmark.html", img: "1.png", alt: "画像1", text: "ブックマーク" },
　{ to: "message.html", img: "2.png", alt: "画像2", text: "メッセージ" }
];

function addLoading() {
　const li = document.createElement("li");
　const img = document.createElement("img");
　li.id = "js-loading";
　li.style.listStyle = "none";
　img.src = "loading-circle.gif";

　ul.appendChild(li).appendChild(img);
};

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

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

　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);
};

function fetchListData() {
　addLoading();
　return promise = newPromise((resolve, reject) => {
　　setTimeout(() => reject("エラー：データが取得できません"), 3000);
　});
}

fetchListData()
.then(values=> {
　removeLoading();
　addList(values)
})
.catch((e) => console.error(e));

JSでCSSを操作せずreset.cssを使用する

今回は、もりけん先生(@terrace_tec) にレビューをいただきました！

ローディングを追加する目的のaddLoading()関数の中で、JSを使ってCSS操作をしている箇所がありました。これはreset.cssで制御すべきとのアドバイスをいただきました。ありがとうございます！

function addLoading() {
　const li = document.createElement("li");
　const img = document.createElement("img");
　li.id = "js-loading";
　li.style.listStyle = "none";
　img.src = "loading-circle.gif";

　ul.appendChild(li).appendChild(img);
};

こちらのli.style.listStyle = "none";の部分です。

reset.cssは先生にURLをいただいた、minireset.cssを使用しました。

よくよく考えてみたら、デフォルトのpaddingやmarginなどもそのままになっており、最初からliststyleだけではなくデフォルトのCSSもリセットして整えるべきだったと気づきました🙇‍♀️

ご指摘ありがとうございました！

今回は、こちらでApproveいただきました。

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