【初心者向け】そろそろしっかり理解したい！ JavaScriptの要素取得(後編)

みなさんこんにちは、ひょっとこエンジニアの橋本です。
今回は前回に続いて、JavaScriptにおける【要素の取得】のおはなし。
前回では基本的な要素取得について学んでいきましたが、今回は実践編です。
具体的に取得速度について学んでみたり、ループ処理と戦ってみたり、コツをつかんだりしていただきます。
さっそく、まずは要素取得に関する速度について見ていきましょう。

速度から見る、実際に使うべき要素取得方法

前編で要素を取得する方法とその戻り値について、ご理解いただけたかなと思います。
では、取得速度について改めてまとめてみましょう。
ここから、実際に使用を推奨する取得方法を見ていきます。
初心者の方が意識しやすいように、よく使うと考えられるパターンを加味します。

最速で推奨

document.getElementById("idName")

この取得の仕方が最も速いです。基本的に単一の要素に対して処理を行う場合は、こちらを利用することを推奨します。
スクロールイベントなど頻発させる処理に要素取得を仕込みたい場合は、できればこちらを使っていきましょう！
ただし、querySelector()でとてつもなく速度が下がるとか聞かれればNoなので、cssセレクタを使えるdocument.querySelector("#idName")の使用もおすすめです。
※本当に微々たる0.ミリ秒の差です。
jQueryの恩恵を受けたい要素についても同様に、$("#idName")で指定しましょう。最速ではありませんが、クラス指定よりは速いです！

体験上かなりの頻度で使う

document.querySelectorAll(".className")

からの

document.querySelectorAll(".className").forEach(function(elm) {
  elm.classList.add("hoge")
});

こちらの取得方法はかなり使います。
jQueryからスタートした方にとってはあまりピンと来ないかもしれませんが、$(".className")のような取得方法はかなり便利なんですね。
クラス名を指定しておけば、ソースの要素を非常に直感的に操作してくれるためです。
それに近いのは、こちらのquerySelectorAllです。
単純な指定であればgetElementsByClassNameの方が処理速度としては早いですが、cssセレクタで取得できるのは初心者の方には特に魅力的です。
おそらくJavaScriptに注力しようと考えている時点で、cssの習得は済んでいるはずです。
ですので、cssの知見が活かせるのはメリットですね。
ループ処理が入るので、for文見て少し頭痛がする方がいらっしゃるかもですが、後述です。

例えば、下記のソースがあったとします。
上がVanilla js(素のjs)で、下がjQueryです。

document.querySelectorAll(".className").forEach(function(elm) {
  elm.classList.add("hoge")
});

$(".className").addClass("hoge");

これらは、WEB制作の現場でも比較的よく見るソースかなと思います。どちらも対象となるすべてのクラスに、hogeというクラスを付与するスクリプトです。
しかし速度を計測するとですね、classNameが1000個あったとすると平均4ms程度の差がありました。
これだけ見ると誤差の範囲ですが、これだけで1サイトのjavascriptが完結することはないですよね。
色々な処理を前後で行い、他のさまざまなscriptが走っているはずです。
であれば、4msは40msの差に、気づけば400msの差になっていたりします。
このくらいになってくると、違和感を覚えてきます。ですが、その状態に至った際には、原因となるソースが多重化していることがほとんどです。
ですので、きちんと要素の取得に対する基本を抑えておくことで、多少雑になってしまった部分があったとしても大きな差が生じることはないはず。

どっちつかってもええやん！　ってシーンでは、document.querySelectorAllを使っていく！
ぜひぜひ抑えておきましょう！

難所：ループで処理する

最後に、この難所であるループ処理についてしっかりめに解説します。
前編にも記載した通り、初心者にとって難所になりがちなのが、getElementsByClassNameやquerySelectorAllで生じるループ処理です。
なぜループ処理が必要なのかは、クラス指定なので複数の戻り値が発生する可能性があるためですね。
まずはパターンで覚えましょう。現在はquerySelectorAllのほうがメジャーになってきました。
ですのでこちらを利用した形をマスターしましょう。下記をご覧ください。

document.querySelectorAll(".className").forEach(function(elm) {
  elm.classList.add("hoge")
});

【document.querySelectorAll(".className").forEach】この部分が、中身をループさせる記述になります。classNameというクラスがdocumentに50個あるとすれば、要素分50回ループします。
次いで【.forEach(function(elm)】のelmが展開されるHTMLElementなので、あとは対象の要素にいろいろするだけです。(例では、クラスを付与しています)
jQueryを使っている方も、$(".className")はとっても便利なのですが、要素取得の中で最も遅いので、単純なクラス付与などであればquerySelectorAllを使ったほうが軽量化につながりますね。

要素を取得する際のコツ2つ

一つ目は、要素を変数化することです。処理の度に要素を取得することは負荷が生じます。

let idName = document.querySelector("#idName");
idName.classList.add("hoge")idName.addEventListener('click', () => {
  idName.classList.remove("hoge")
});

このように、要素を変数化することで取得を一度に抑え、全体の速度軽減につながるかと思います！
もう一つは複雑なcssセレクタは、極力使わないこと。
というのも、使わなければいけないシーンでは使っても問題ありませんが、意図的には使わないほうが良いです。
$("#idName > div:last-child")のような指定方法は、一見一発で取得できそうですが取得速度は遅いです。
このあたりを理解した上で、ループ処理の中で入れないように気をつけたり、サイト全体では2~3回の使用にとどめればよいバランスを保てると思います！

まとめ

javascriptの要素取得について、後編でした。
初心者から中級者に向けて走っている期間は、ついつい新しい技術やできることに目が向きがちですが、基本も大切ですね。
特に複雑な処理をするようになってくると、これらの理解が速度などの技術的観点で、ユーザビリティに直結することになります！
私自身忘れずにコーディングライフを送っていきますね。
それではまた！