こんにちは！フリーランスの桃太郎です。プログラミングをしていく上で、今回の記事のテーマである配列について目にする機会は数多くあるのではないでしょうか？
jQueryにおいても配列は重要なテーマの一つです。
この記事では
- 「配列」とは？
- 「配列」の使い方
- 「配列」の活用
- 「配列」のプロパティ・メソッド
というように、基礎的な内容から実践的な内容についても解説していきます。jQueryの配列について正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！
「配列」とは？
それでは、まず最初に配列について基本的な知識から学習を進めていきましょう！
配列は、複数の値を1つのデータのように扱える便利なデータ型です。一般的な変数は「var num =10」のように、1つのデータしか格納できませんよね？
配列は、10個や100個くらい大量のデータを1つの配列へ一度に格納することが可能になります。さらに、このような配列を便利に扱うために「作成・追加・検索・取得」などを簡単に行える仕組みが用意されています。
本記事では、配列の基本から応用までを詳しく解説していきますのでぜひ参考にしてみてください。ちなみに、JavaScriptの配列に関しては次の記事で体系的にまとめているので、合わせて学習してみると効果的です！
配列の使い方
jQueryにて配列を扱う場合に、JavaScriptと共通することと異なることがあります。具体的には配列を作成したり、初期化する方法は共通していますが、配列の要素を取得する方法は異なります。
では次章より具体的なサンプルコードを交えて解説していきます。
配列を作成/初期化する方法
まず最初に、配列を作成する方法について見ていきましょう。一般的に配列を作成する構文は以下の通りです。
var 配列変数 = [要素a,要素b,要素c・・・];
varで配列変数を定義し、右辺に[ ]の中へ格納したいデータの値（数値や文字列など）を記述します。それぞれの値は「,(カンマ)」で区切ることを忘れないようにしましょう。
例えば、0~5までの数値を格納したい場合は次のようになります。
var array = [0,1,2,3,4,5];
また、値を何も設定せずに空の状態にすると配列の初期化が可能です。
var array = [];
この場合は、配列にいかなる値が格納されていてもリセットされて初期化するので注意しましょう。
配列の要素を追加する方法
次に、配列の値を途中から追加する方法について見ていきましょう！もっとも簡単な方法としては、push()メソッドを利用することです。push()は、指定した配列に任意の値を配列要素の末尾に追加することができるメソッドです。
例えば、次のような配列があるとします。
var array = ['リンゴ', 'バナナ', 'イチゴ',];
この例では、配列「array」の中に3種類の果物の文字列が格納されています。そこで、push()を使って「メロン」という文字列を追加してみましょう！
var array = ['リンゴ', 'バナナ', 'イチゴ',];
array.push('メロン');
console.log(array);
実行結果
["リンゴ", "バナナ", "イチゴ", "メロン"]
配列要素に対して「push(‘メロン’)」と記述することで、文字列「メロン」を追加することが可能です。実行結果を見ると、配列の末尾に「メロン」が追加されているのが分かりますね！
配列の要素を取得する方法
今度は、配列を取得する手法について見ていきましょう！基本的に配列はインデックス番号を添字にして、次のように記述することで取得できます。
var array = ['リンゴ', 'バナナ', 'イチゴ',]; console.log(array[2]);
実行結果
イチゴ
配列「array」に対して[ ]の中にインデックス番号を記述することで、任意の配列要素を取得しています。配列のインデックス番号は0番目から数えていくという点に注意しましょう！
上記の例だと、インデックス番号が0番目は「リンゴ」で1番目は「バナナ」2番目は「イチゴ」になります。そのため、「array[2]」と記述すると結果は「イチゴ」になるというわけです。
配列の要素を検索する方法
次に、配列要素を検索する方法について見ていきましょう！もっとも簡単な方法としては、inArray()メソッドを利用することです。inArray()は、
【 $.inArray( 検索したい値, 検索する配列 ) 】
のように記述するのが一般的です。次のサンプル例を見てください！
var array = ['リンゴ', 'メロン', 'スイカ', 'バナナ', 'イチゴ',];
var result = $.inArray('バナナ', array);
console.log(result);
実行結果
3
この例では、inArray()メソッドを使って配列要素の中にある「バナナ」という文字列を検索しています。実行結果を見ると、バナナが格納されているインデックス番号が取得できているのが分かりますね。
ちなみに、inArray()メソッドの基本から応用までを次の記事で詳しくまとめているのでぜひ参考にしてみてください！
「配列」の活用
この章では、さらに配列を活用するために便利なプログラミング手法について見ていきましょう。主に、配列要素のコピーやオブジェクトの配列変換について学んでいきます。
配列要素をコピーする方法
まずは、配列要素をコピーする方法について見ていきましょう。配列のコピーと聞いて、例えば「var array2 = array1」のように「=」でコピーする方法を考えた人は要注意です！
配列は参照型のデータなので、「=」で代入すると片方の配列に変化があった場合にもう片方も同じ変化が起きます。例えば、次のサンプル例を見てください！
var array = ['リンゴ', 'メロン', 'バナナ', 'イチゴ',];
var newArray = array;
newArray.push('スイカ');
console.log(array);
console.log(newArray);
実行結果
["リンゴ", "メロン", "バナナ", "イチゴ", "スイカ"] ["リンゴ", "メロン", "バナナ", "イチゴ", "スイカ"]
「var newArray = array」と記述することで、「=」を使ってコピーをしてますよね？その後に、push()を使って新しくコピーした配列の末尾に文字列を追加しています。普通に考えると「newArray」の配列要素だけ文字列が追加されているように思ってしまいます。
しかし、実行結果を見ると「array」も「newArray」と同じように文字列が追加されていますよね？つまり、「=」でコピーした配列はコピー元の配列要素を参照しているだけであり、完全なコピーとは言えないのです。
そのため、完全なコピーを作りたい場合は「extend()」メソッドを活用する必要があります。次のサンプル例を見てください！
var array = ['リンゴ', 'メロン', 'バナナ', 'イチゴ',];
var newArray = $.extend([],array);
newArray.push('スイカ');
console.log(array);
console.log(newArray);
実行結果
["リンゴ", "メロン", "バナナ", "イチゴ"] ["リンゴ", "メロン", "バナナ", "イチゴ", "スイカ"]
「extend()」は、配列やオブジェクトを連結するような用途に使われるメソッドです。
しかし、空の配列と連結することで結果的に新しい配列として扱われてコピーができるわけです。「$.extend([], array)」と記述して第1引数に空の配列を指定することで、コピーしたい配列と連結しています。
これにより、「newArray」と「array」は同じ配列でありながらお互いを参照していない配列になるわけです。この「extend()」メソッドについては、次の記事で基本から応用までを解説しているのでぜひ参考にしてみてください！
オブジェクトを配列に変換する方法
今度は、オブジェクト形式のデータを配列に変換する方法について見ていきましょう！
ただし、オブジェクトは「プロパティ」と「値」がペアになったデータの集合なので、配列とは構造が異なります。そこで、今回はオブジェクトの「値」だけを抽出して配列化するための手法について解説します！まずは、次のようなオブジェクトがあると考えてください。
var obj = {
name: '太郎',
age: 30,
area: 'Tokyo'
}
このオブジェクトから「値」となる「太郎、30、Tokyo」だけを抜き出して配列化してみましょう。利用するのは「Object.keys()」メソッドです！
var tmp = Object.keys(obj);
これは指定したオブジェクトの「プロパティ名」だけを抽出して配列にしてくれるメソッドです。この配列を活用して「値」を抜き出してみましょう！
var array = [];
$.each(tmp, function(key, value) {
array.push(obj[value]);
});
console.log(array);
実行結果
["太郎", 30, "Tokyo"]
この例では、「each()」を使って1つずつの配列要素に対して繰り返し処理を行っています。そして、各要素をpush()で新規の配列に追加していくという流れになります。実行結果を見ると、オブジェクトの値だけを抽出して配列化できているのが分かりますね。
もし、each()の使い方がまだよく分からないという人は、次の記事で体系的にまとめているので参考にしてみてください！
配列のプロパティやメソッド
それでは、ここから配列に関連するプロパティやメソッドをご紹介します。
要素を数えるlengthプロパティの使い方
配列の要素がいくつ存在するかを確認する方法としてlengthプロパティを使います。サンプルコードは以下の通りです。
[HTML]
<h2>見出し1</h2> <h2>見出し2</h2> <h2>見出し3</h2> <div> <p>見出しの数は</p> </div>
[jQuery]
var h2= $('h2');
$('p').after('<p>' + h2.length + '</p>')
実行結果
[HTML]
<div> <p>見出しの数は</p> <p>3</p> </div>
lengthはプロパティなので、メソッドのように後ろにカッコ()は必要ありません。上記の例の通り、h2要素の数を返してくれます。
要素を並び替えるsortメソッドの使い方
要素の並び替えにはsortメソッドを利用します。sortメソッドでは、含まれている要素を前後二つづつ比較していき、その比較結果を数値で返すことで並び替えを実現できます。
その並び替えの具体的な処理の箇所はプログラマー側にて実装する必要があります。では、サンプルコードを確認してみましょう。
[HTML]
<p>商品カテゴリー</p> <ul> <li>shoes</li> <li>bag</li> <li>hat</li> </ul>
[jQuery]
var $li = $('li').sort(function(a, b){
//この並び替えのルールを設定する箇所は自作する必要がある
if ($(a).text() == $(b).text()) return 0;
else if ($(a).text() < $(b).text()) return -1;
return 1;
});
$('ul').empty().append($li);
実行結果
<p>商品カテゴリー</p> <ul> <li>bag</li> <li>hat</li> <li>shoes</li> </ul>
商品カテゴリーの名前をアルファベット順に並び替える処理が行われています。jQuery内のsortメソッドの引数に並び替えのルールを指定する関数(function)を設定しています。
その関数内では、liタグの要素のテキストを前後で比較(bagとhatやhatとshoesなど）し、並び替えを行なっています。最後に、ul要素の中身をempty()で空にした後に、並び替え後の$li を追加(append)し、表示しています。
配列を繰り返し処理するeachメソッドの使い方
JavaScriptの場合は、配列の要素を繰り返し処理に使用する場合は、for文を利用します。JavaScriptのfor文について詳しく知りたい方は以下の記事をご確認下さい。
ですが、jQueryの場合はeachメソッドが用意されています。このeachメソッドについては以下の記事で詳しく開設しておりますので、ぜひご確認下さい。
まとめ
本記事ではjQueryの配列についてご紹介しました。配列の作成や初期化についてはJavaScriptの方法と共通しており、カッコ[]を使い、要素を指定することで配列変数に値を代入できました。
そして、JavaScriptとjQueryにて要素を取得する際の方法がそれぞれ、for文とeachメソッドであることが異なる点でした。配列はプログラミングを行う上でよく利用するテーマの一つです。
もし今後、配列に関して迷うことがあれば、ぜひこの記事を思い出して下さいね。
