jQuery｢makeArray｣でオブジェクトを配列に変換する方法

2020年5月20日

jQueryのメソッド「$.makeArray()」は、jQueryオブジェクトを「配列に変換」するメソッド

今回は、jQueryで「jQueryオブジェクトを配列に変換する」メソッド「$.makeArray()」について、その使い方をサンプルを交えて解説しよう。

$.makeArray()の機能とは？

$.makeArray()の機能

$.makeArray()は、「ｊQueryオブジェクトを配列に変換」できるメソッド。
$()が生成する「jQueryオブジェクト」は、配列のような役割を持つが厳密には配列ではない。本来の配列で使える.shift()や.pop().reverse()などのメソッドがそのままだと機能しないので、$.makeArray()などのメソッドで一旦「配列に変換」する必要がある。

例えばHTMLで次のようなリスト形式のjQueryオブジェクトを<li>apple</li><li>orange</li><li>peach</li>を配列に変換して["peach", "orange", "apple"]のようなデータに変える事ができる。

HTML

<button>ボタン</button>
<ol class="fruits">
 <li>apple</li>
 <li>orange</li>
 <li>peach</li>
</ol>

jQuery

$(function(){
  var myArray = $.makeArray($(".fruits li"));
  console.log(myArray);
});

console

["apple","orange","peach"]

$.makeArray()の構文

$.makeArray()メソッドで「ｊQueryオブジェクトを配列に変換する」構文

$.makeArray(オブジェクト)

$.makeArray()の応用「リストを先頭から順番に削除」する例

今回は.shift()という「配列の先頭を削除するメソッド」を利用して、リストタグを先頭から順番に削除する。

.shift()を使う為に「jQueryオブジェクト」を一旦$.makeArray()で「配列」に変更し、その配列に対して.shift()を実行し、またjQueryオブジェクトに戻して、元のHTMLを上書きするという流れだ。

HTML

<button>ボタン</button>
<ol class="fruits">
 <li>りんご</li>
 <li>みかん</li>
 <li>もも</li>
</ol>

jQuery

$(function(){
  $("button").on("click",function(){
     var myArray= $.makeArray($(".fruits li"));
     myArray.shift();
     $(".fruits").html($(myArray));
  });
});

$.makeArrayメソッドは$.makeArray(jQueryオブジェクト)で「配列」に変換できるので

var myArray= $.makeArray($(".fruits li"));

としてmyArrayに配列を格納する。

次に配列を格納したmyArrayに対してshiftメソッドを適用して配列の先頭を削除する。

myArray.shift();

最後に.html()メソッドを使って、$(".fruits")のHTMLの中身を書き換える。

$(".fruits").html($(myArray));

この時myArrayは配列のままなので、$(myArray)としてjQueryオブジェクトに戻してから使わないといけない点に注意しておこう。

これで、ボタンをクリックする度に「リストを先頭から順番に削除する」事ができる！

HTML （jQuery反映前）

<button>ボタン</button>
<ol class="fruits">
 <li>りんご</li>
 <li>みかん</li>
 <li>もも</li>
</ol>

HTML （１回クリック）

<button>ボタン</button>
<ol class="fruits">
 <li>みかん</li>
 <li>もも</li>
</ol>

HTML （２回クリック）

<button>ボタン</button>
<ol class="fruits">
 <li>もも</li>
</ol>

HTML （３回クリック）

<button>ボタン</button>
<ol class="fruits">
</ol>

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント