JavaScriptマスターへの道！HTMLCollectionを配列に変換してスキルアップ

2024-04-07

HTMLCollectionを効率的に配列に変換する方法

そこで、この問題を解決するために、HTMLCollectionを効率的に配列に変換する方法をいくつか紹介します。

Array.from()は、配列に変換したいオブジェクトを受け取り、新しい配列を生成します。これは、HTMLCollectionを変換する最も簡単で効率的な方法です。

const htmlCollection = document.getElementsByClassName("my-class");
const array = Array.from(htmlCollection);

// array は HTMLCollection の要素を含む新しい配列になります

スプレッド構文を使用する

スプレッド構文は、イテラブルオブジェクトを展開して、個々の要素を新しい配列に追加します。

const htmlCollection = document.getElementsByClassName("my-class");
const array = [...htmlCollection];

// array は HTMLCollection の要素を含む新しい配列になります

forループを使用して、HTMLCollectionの各要素を新しい配列に追加することができます。

const htmlCollection = document.getElementsByClassName("my-class");
const array = [];

for (let i = 0; i < htmlCollection.length; i++) {
  array.push(htmlCollection[i]);
}

// array は HTMLCollection の要素を含む新しい配列になります

map()を使用する

map()は、配列の各要素に対して関数を適用し、新しい配列を生成します。

const htmlCollection = document.getElementsByClassName("my-class");
const array = htmlCollection.map(element => element);

// array は HTMLCollection の要素を含む新しい配列になります

パフォーマンス

上記の4つの方法の中で、Array.from()とスプレッド構文は最も効率的な方法です。forループとmap()は、少しパフォーマンスが劣ります。

HTMLCollectionを配列に変換するには、いくつかの方法があります。パフォーマンスを重視する場合は、Array.from()またはスプレッド構文を使用することをお勧めします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLCollectionを配列に変換するサンプル</title>
</head>
<body>
  <div class="my-class">要素1</div>
  <div class="my-class">要素2</div>
  <div class="my-class">要素3</div>

  <script>
    // Array.from()を使用する
    const htmlCollection = document.getElementsByClassName("my-class");
    const arrayFrom = Array.from(htmlCollection);
    console.log("Array.from():", arrayFrom);

    // スプレッド構文を使用する
    const arraySpread = [...htmlCollection];
    console.log("スプレッド構文:", arraySpread);

    // forループを使用する
    const arrayFor = [];
    for (let i = 0; i < htmlCollection.length; i++) {
      arrayFor.push(htmlCollection[i]);
    }
    console.log("forループ:", arrayFor);

    // map()を使用する
    const arrayMap = htmlCollection.map(element => element);
    console.log("map():", arrayMap);
  </script>
</body>
</html>

上記のコードを実行すると、コンソールに以下の出力が表示されます。

Array.from(): [ <div class="my-class">要素1</div>, <div class="my-class">要素2</div>, <div class="my-class">要素3</div> ]
スプレッド構文: [ <div class="my-class">要素1</div>, <div class="my-class">要素2</div>, <div class="my-class">要素3</div> ]
forループ: [ <div class="my-class">要素1</div>, <div class="my-class">要素2</div>, <div class="my-class">要素3</div> ]
map(): [ <div class="my-class">要素1</div>, <div class="my-class">要素2</div>, <div class="my-class">要素3</div> ]

このように、4つの方法すべてで同じ結果を得ることができます。

HTMLCollectionを配列に変換するその他の方法

[].slice.call()は、配列のようなオブジェクトから新しい配列を作成します。

const htmlCollection = document.getElementsByClassName("my-class");
const array = [].slice.call(htmlCollection);

// array は HTMLCollection の要素を含む新しい配列になります

reduce()は、配列の要素を1つの値に累積していく関数です。

const htmlCollection = document.getElementsByClassName("my-class");
const array = htmlCollection.reduce((acc, element) => {
  acc.push(element);
  return acc;
}, []);

// array は HTMLCollection の要素を含む新しい配列になります

jQueryを使用する

jQueryは、JavaScriptライブラリの1つで、HTML要素の操作を簡単にできます。

const $htmlCollection = $(".my-class");
const array = $htmlCollection.toArray();

// array は HTMLCollection の要素を含む新しい配列になります

Lodashを使用する

Lodashは、JavaScriptライブラリの1つで、さまざまなユーティリティ関数を提供しています。

const htmlCollection = document.getElementsByClassName("my-class");
const array = _.toArray(htmlCollection);

// array は HTMLCollection の要素を含む新しい配列になります

注意点

上記の方法は、すべてIE9以降でサポートされています。IE8以前の場合は、別の方法を使用する必要があります。

HTMLCollectionを配列に変換するには、さまざまな方法があります。どの方法を使用するかは、状況や好みによって異なります。

javascript arrays object