こんにちは。よしかわです。
もりけん塾のJS課題1に取り組んだので、その振り返りを記事にしました。
課題内容
1.このDOMをhtml内のulの中に差し込んでください
<li>これです</li>
マークアップエンジニアの方がフロントエンドエンジニアになる為の課題より引用
作戦
- ulを取得
- liタグを作成
- その中に入れる文字を指定
- liタグをulにぶち込む
こんな感じで攻める。
実践
const ul = document.getElementsByTagName('ul');
const li = document.createElement("li");
li.textContent = "これです"
ul.item(0).appendChild(li);一旦これでプルリクを出しました。
レビューと改善
プルリクに対して対していくつかアドバイスをいただきました。
タグではなくidで取得した方がいい
取得する要素があらかじめ決まっている場合は、それにidを付与して取得するのが理想的。
確かに言われてみればその方がわかりやすいし、納得。
また今回、ulの取得にgetElementByTagNameを使用しているが、これは指定されたタグ名を持つ要素のHTMLCollectionを返すため、後でulにliをぶち込む際にindexを指定しなければならない。
一方で、getElementByIdならindexの指定がいらない。
id名は誰がみても分かりやすいものが好ましい
JavaScriptで扱う要素に対して付与するidやclassには、js-といった接頭辞をつけることでJavaScriptが関わっていることを明示的に表すといい。
これらを踏まえて改善したコードがこちら
const ul = document.getElementById("js-ul");
const li = document.createElement("li");
li.textContent = "これです";
ul.appendChild(li);まとめ
今回は特に返り値を意識することを学んだ。
要素の取得方法について、「とりあえず欲しい要素取得できればいいや」となんとなーくでコードを書いていたけど、後で困らないようにするためにも色々考えないとなと。
あとがき
「もりけん塾」とは、もりけん先生が用意してくださった課題を通して、JavaScriptを学習するコミュニティです。
もりけん先生のTwitter: @terrace_tech
もりけん先生のブログ: 武骨日記
コメント