プログラマー VTuber 衣亥栖ティオのちょっとした話

Youtubeに投稿したプログラミング学習動画の補足説明をするためのブログです。

プログラマーへの道 #37 の補足説明

こんにちは、プログラマーVTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。 動画内で実装したソースコードも載せています。


今回の動画で実装したソースコード

以下が今回実装したソースコードです。

forEach が使えなかった件について

動画中で forEach が使えなかった箇所があったと思います。 forEach は Array 型で利用できるメソッドですが、

Array.prototype.forEach() - JavaScript | MDN

children で取得できる値は Array 型ではなく、HTMLCollection 型になります。 HTMLCollection 型は複数のHTML要素を保持できるので Array のように見えますが、Array ではありません。 そのため、forEach を利用できません。

HTMLCollection - Web API | MDN

forEach を利用するためには HTMLCollection を Array に変換します。 変換するために利用したのが Array.from() です。

Array.from() - JavaScript | MDN