[...document.querySelectorAll('.lazy-load')]の...はどういうことでしょう？

Question

前提・実現したいこと

ホームページのseo対策で色々調べていたのですが、
I『ntersectionObserverベースな、遅延読み込みライブラリのLozad.jsを紹介する』のサイトで
const targetImages = [...document.querySelectorAll('.lazy-load')]
という文がありました。この...はどういう意味なのでしょう。
大変初歩的な質問と思いますが、最近始めたばかりで、質問できる人がいません。
申し訳ないのですが、ご教授ください。
又、参考になるマニュアル等ご存じでしたら教えていただけませんでしょうか。
何卒宜しくお願い致します。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[papinianus]

https://qiita.com/yukagil/items/369a9972fd45223677fd

Answer 1

スプレッド構文です。

【スプレッド構文 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Comments

[papinianus]

こちに失礼して補足させていただきたく。

querySelectorAllはNodeListを返す。これはiterableObjectだけどArrayではなく、そのままだとforEachできないので、配列にしている
この辺りもご参考になれば
https://blog.sushi.money/entry/2017/04/19/114028

[aoi99]

大変ありがとうございました。
勉強してみます。

[miyabi-sun]

https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach
これなーんだ？
NodeListのforEachメソッドです。
実はこいつネイティブで実装されているのでforEachで回す目的では配列化する必要がありません。

普段我々が頑張ってNodeListを配列している一番の目的は
IEだけNodeListが何故かforEachを所持していないという不具合があるためで、
その方面で養護出来るかと思いましたが、スプレッド構文はIE非対応のES2015なのでダメです。

なのでmapかreduceじゃね？と思って、
papinianusさんの紹介したサイトを覗いたら、やはり目的はmapですね。
NodeListは用途的にmapとして使う事を想定していないかと思いますので、mapとして使いたければ記事のように配列に変換して使うのが自然に見えます。

https://qiita.com/yukagil/items/369a9972fd45223677fd
質問文の記事を確認した所、目的がforEachなのでforEachメソッド持ってるにもかかわらずforEachの為に配列に変換していますが、タイプ数を増やしただけの無駄なコードとなっています。
まぁ、今後の文脈的に`const targetImages = []`として色々と使う用事があるかもしれませんね。
ですが記事の説明で話が終わるなら多分このスプレッド構文を使ったのは失敗でかっこいいだけです。