今回の課題は、前回のPromiseを3秒後に解決するようにする課題です。
お題
課題5で作ったものを3秒後に解決されるようにしてください
準備
３秒後に解決、という方法がわからなかっので、調べてみました。JavaScriptには、タイマー処理というものがあり、タイマー処理を使うと実行を遅らせることができるそうです。
タイマー処理については、こちらの記事を参考にしました。
SetTimeoutを使うと、JavaScriptの実行を指定した秒数後に実行できることがわかりました。SetTimeoutは、指定した関数を一度だけ実行することができます。一定時間ごとに繰り返し呼び出しをしたいときは、setIntervalを使います。
今回は、一度だけ実行するので、setTimeoutを使って実装を行います。PromiseとsetTimeoutの組み合わせ方法については、下記を参考にしました。
最初のコード
それでは、実装をしていきます。前回実装した箇所に、setTimeoutを追加しました。
setTimeoutの部分は、下記のように書く例が多かったですが、ちょっと長いなぁと思いました。
const promise = new Promise(resolve => {
setTimeout(() => {
resolve(lists)},
3000);
});短くできる書き方があったので、可読性を優先して下記の書き方にしてみました。
const promise = new Promise(resolve => {
setTimeout(() => resolve(lists),3000);
});最初にプルリクエストした全体のコード
const lists = [
{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"},
{to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}
];
const promise = new Promise(resolve => {
setTimeout(() => resolve(lists),3000);
});
promise.then((value) => {
const fragment = document.createDocumentFragment();
for(const list of value){
const li = document.createElement('li');
const a = document.createElement('a');
const img = document.createElement('img');
a.textContent = list.text;
a.href = `/${list.to}`;
img.src = list.img;
img.alt = list.alt;
fragment.appendChild(li).appendChild(a).insertAdjacentElement('afterbegin',img);
}
const ul = document.getElementById('js-list');
ul.appendChild(fragment);
});
今回は、senさんと、たかさんにレビューをして頂きました。ありがとうございます！senさんから、const listの部分は、promiseの中にまとめて書くことができますよ、とアドバイスいただき、修正しました。
const promise = new Promise(resolve => {
const lists = [
{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"},
{to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}
];
setTimeout(() => resolve(lists),3000);
});たかさんから、メソッドの命名は、意味のあるものした方がいいかも、とアドバイス頂きました。毎度、命名は何が適切なのか迷っています。。
最終的なコード
const createList = new Promise(resolve => {
const lists = [
{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"},
{to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}
];
setTimeout(() => resolve(lists),3000);
});
createList.then((value) => {
const fragment = document.createDocumentFragment();
for(const list of value){
const li = document.createElement('li');
const a = document.createElement('a');
const img = document.createElement('img');
a.textContent = list.text;
a.href = `/${list.to}`;
img.src = list.img;
img.alt = list.alt;
fragment.appendChild(li).appendChild(a).insertAdjacentElement('afterbegin',img);
}
const ul = document.getElementById('js-list');
ul.appendChild(fragment);
});宣言をまとめたり、メソッドの命名を修正し、approve頂きました。メソッド名については迷いがアリアリです。。
approve頂いたあと、たかさんから命名の役に立つかも、と下記の記事を教えてもらいました。どんなメソッド名をつければいいのかについて書かれています。ちょっと今の自分には難しい内容ですが、理解できるようにしていかないといけません。。じっくり読んで勉強したいと思います。
今回学んだこと
- 指定した関数を一度だけ処理を遅らせて実行するsetTimeoutの使い方
- メソッド名の付け方
私が所属しているフロントエンドエンジニアを目指す方のための塾 「もりけん塾」の森田賢二先生のTwitterはこちら！
【募集】フロントエンド、とりわけJavaScriptを教えてもらいたい塾生を募集しています。条件はありますが、お金は頂きません。詳しくはDMください#JavaScript教えてもらいたい方#駆け出しのエンジニアと繋がりたい
— フロントエンドエンジニア (@terrace_tech) April 18, 2020
わたしについて👉https://t.co/FETVmMT5AY
先生のブログ「武骨日記」はこちら！
