前回に引き続き、課題4をやっていきます。
お題
[{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"}, {to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}]
という配列を使って以下のようなHTML出力にしてください
<ul> <li><a href="/bookmark.html"><img src="1.png" alt="画像1">ブックマーク</a></li> <li><a href="/message.html"><img src="2.png" alt="画像2">メッセージ</a></li> </ul>
なかなか難しそうで、うーんと悩みました。とりあえず、配列がいっぱいあるので、「配列」「複数」で調べて、連想配列というものだということがわかりました。
連想配列の値を取り出すときは、キーを指定します。「配列名.キー」または「配列名[‘キー’]」で値を取得できます。キーを取得したい場合は、Object.keys()を使います。
連想配列についてはこちらのサイトをを参考にしました。
私の最初の回答
ここでは、for文ではなく、for ofを使ってみました。
const ul = document.getElementById('js-list');
const listContents = [
{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"},
{to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}
]
const fragment = document.createDocumentFragment();
for(const list of listContents){
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);
}
ul.appendChild(fragment);
配列を入れるための変数 に、const listContentsとしていたので、ループで回すなら、list of lists(単数形 of 複数形）の方がいいかもと提案頂きました。変数名の付け方はいつも迷うので、なるほど！と関心しました。
const ul = document.getElementById('js-list');
const lists = [
{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"},
{to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}
]
const fragment = document.createDocumentFragment();
for(const list of lists){
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);
}
ul.appendChild(fragment);
変数名を、listContents からlistsにしました。こちらで無事にapproveをもらいました。
今回学んだこと
- for ofの使い方
- 変数名の付け方の工夫
次の課題5は、難しそうなPromiseについての課題なので、しっかり理解できるように勉強したいと思います。
私が所属しているフロントエンドエンジニアを目指す方のための塾 「もりけん塾」の森田賢二先生のTwitterはこちら！
【募集】フロントエンド、とりわけJavaScriptを教えてもらいたい塾生を募集しています。条件はありますが、お金は頂きません。詳しくはDMください#JavaScript教えてもらいたい方#駆け出しのエンジニアと繋がりたい
— フロントエンドエンジニア (@terrace_tech) April 18, 2020
わたしについて👉https://t.co/FETVmMT5AY
先生のブログ「武骨日記」はこちら！
