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

Web制作

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

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

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

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

●課題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で学習して使用してみました。

ここまでで、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本格入門"です。

あとがき

お忙しい時間を割いて課題を確認してくださったもりけん先生(@terrace_tec)ありがとうございました!!

私の課題のリポジトリはこちらから確認できます↓

 

今日は以上です。

//

【もりけん塾で勉強しています】

もりけん先生(@terrace_tec)のHPはこちら

タイトルとURLをコピーしました