多くのプログラミング言語に共通する基本概念のひとつとして「配列」があります。データをある種のまとまりとして操作することが出来る「配列」はプログラミングにおいて欠かせない存在です。
今回はJavaScriptの配列について、その作成や操作の方法を実際のコードと共に解説していきます。
JavaScriptの配列について ( array )
配列とは端的に表現すると「データのまとまり」です。どのプログラミング言語にも存在する配列ですが、その記法や操作方法は各言語ごとに異なります。
配列を作成する ( new array( ) )
はじめに、配列の作成を解説します。
JavaScriptにおいて、配列の作成は次のように記述します。
<script>
var arr = new array()
</script>
ここで登場した new array() は コンストラクタ と呼ばれるものです。
コンストラクタは オブジェクトを新規作成する という機能を持ちます。この場合は arrayクラスのオブジェクトを新規作成しています。 arrayクラス とはJavaScriptにおける 配列 のデータ型を意味します。
また new array() を用いないシンプルな記述方法も存在します。
<script>
var arr = []
</script>
[] （中括弧） は 空の配列のオブジェクト を示します。
また、 [] 空の配列 ですが、次のように記述することで 中身の存在する配列 を最初から作り出すことが出来ます。
<script>
var arr = [“い”, “ろ”, “は”, “に”]
</script>
これで、中身が順に “い”, “ろ”, “は”, “に” である配列が作成されました。
配列の要素を取り出す ( array[...] )
次に作成した配列の要素を取り出すコードを記述します。
<script>
var arr = [“い”, “ろ”, “は”, “に”]
console.log( arr[0] ) // 出力結果：い
</script>
console.log() の括弧内に arr[0] という記述があります。
これは 配列arr の 0 番目の要素 を示します。なお配列は 先頭を０番 として数えます。１番ではない ことに気を付けてください。したがってこの場合だと、配列の０番目なので い がコンソールに出現されるます。
配列の要素数を求める ( array.length )
次に配列の持つ要素の数を求めます。
全ての配列は自身のプロパティとして 配列の要素数 を持っています。
プロパティ名 length が 配列の要素数 にあたります。配列名.length で その配列のlengthプロパティの値 を取得します。
<script>
var arr = [4, 5, 2, 3]
var len = arr.length
console.log( len ) // 出力結果：4
</script>
JavaScriptの配列を操作する
ここまでの解説で 配列の作成 要素の取り出し 要素数の取得 を紹介しました。次は配列自身に用意されている様々なメソッドについて紹介していきます。
配列の末尾に要素を追加する ( array.push() )
作成した配列に要素を追加する方法を紹介します。
末尾への要素追加メソッド push() メソッド は次のように記述します。
<script>
var arr = [4, 5, 2, 3]
arr.push(10)
console.log( arr[4] ) // (出力結果：10)
</script>
arr.push(10) は 配列arrの末尾に 10 を追加する という意味です。
コンソールには 配列arr の要素番号4番 の値、つまりpushメソッドで末尾に追加した 10 が表示されます。
※要素番号が 0番 から始まることに気を付けてください。
配列の先頭に要素を追加する ( array.unshift( ) )
次は先ほど紹介したpushメソッドとは真逆の 配列の先頭に要素を追加する メソッドを解説します。名前は unshift() メソッド です。
使用方法はpushメソッドと同様です。
異なるのは括弧内（引数）の値を配列の末尾ではなく 先頭 に追加することのみです。
<script>
var arr = [4, 5, 2, 3]
arr.unshift(10)
console.log( arr[0] ) // (出力結果：10)
</script>
配列の最後の要素を削除して返す ( array.pop( ) )
popメソッドは配列から最後の要素を削除し、その要素を返します。
これは配列をスタックとして使用する場合に特に便利です。以下のように使用します。
let fruits = ["apple", "banana", "cherry"];
console.log(fruits); // ["apple", "banana", "cherry"]
let lastFruit = fruits.pop();
console.log(lastFruit); // "cherry"
console.log(fruits); // ["apple", "banana"]
このコードではfruitsという配列があり、その最後の要素（この場合は"cherry"）をpopメソッドで取り出しています。
その結果、fruits配列から"cherry"が削除され、lastFruitには"cherry"が格納されます。
なお、空の配列に対してpopメソッドを呼び出すと、undefinedが返されます。
これは、削除する要素がないためです。例えば以下のような状況です。
let emptyArray = [];
console.log(emptyArray.pop()); // undefined
以上がJavaScriptのpopメソッドの基本的な使い方となります。
どんな配列にも適用でき、配列の最後の要素を取り出す際に便利です。ただし、元の配列が変更される点には注意が必要です。
元の配列を変更せずに最後の要素を取得したい場合は、lengthプロパティを使用すると良いでしょう。
例えば、fruits[fruits.length - 1]とすると、最後の要素を取得できます。この方法では元の配列は変更されません。
どちらの方法を選ぶかは、要件によりますので特徴を覚えておきましょう。
配列の要素をループさせる ( array.forEach( ) )
配列の要素を全て取り出すまでループさせる メソッドとして、forEachメソッドがあります。これは以下のように使います。
<script>
var arr = [4, 5, 2, 3]
arr.forEach(function(value, index) {
console.log(“要素番号：” + index)
console.log(“要素の値：” + value)
})
</script>
これが、forEachメソッドを用いたループ処理です。
順を追って説明しましょう。まず、4, 5, 2, 3を順に格納した配列を作成しました。
次に、作成した配列のforEachメソッドを使用します。forEachメソッドは、前述の通り配列の要素を全て取り出すまでのループ処理を行うものですが、具体的にどのように行われているのでしょうか。
こちらについて、forEach() の括弧内に注目してください。
forEachの括弧内（引数内）に関数（function）が渡されています。これは 取り出した配列の要素1つひとつに対して実行する関数 です。
このような メソッドや関数に渡されて実行される関数 のことを コールバック関数 と呼びます。
今回のforEachメソッドのコールバック関数には 引数がふたつ 用意されています。最初の引数は、配列の要素の値を示します。
次の引数は、配列の要素番号を示します。今回は、これら要素の値と要素番号をコンソールに出力するよう、コールバック関数を定義しています。
上記コードを書いたHTMLファイルを実際にブラウザ上で表示させてみてください。配列の最初の要素から最後の要素まで、順にコールバック関数が実行されているのがコンソール画面から確認できるはずです。
配列の要素を検索する ( array.find( ) )
最後に、配列の要素を検索するfindメソッドを紹介します。
先ほどのforEachメソッドでは コールバック関数 を引数として持ちました。findメソッドも同様に、コールバック関数を引数に持ちます。
使い方は以下の通りです。
var arr = [4, 5, 2, 3]
var result = arr.find(function(value) {
if (value < 3) {
return true
} else {
return false
}
})
console.log(result) // (出力結果：2)
findメソッドの実行結果を変数resultに格納し、コンソールに出力させました。出力された値は 2 です。どのようにして、このresultの値が2になったのでしょうか？
解説すると、まずfindメソッドは コールバック関数でtrueを返した要素の値を返却する という仕組みになっています。言い換えると コールバック関数で検索条件を指定 して 検索結果をfindメソッドの返却値として返す 処理であるということです。
そして、今回コールバック関数では value が 3 より小さい場合はtrueを返却する という条件が指定されています。なお、この場合の value は配列の要素を示します。作成した配列のうち、唯一値が3よりも小さい 2 がfindメソッドの返却値として変数resultに格納されたというわけです。
まとめ
いかがでしたでしょうか。他にもJavaScriptの配列操作系メソッドには様々なものが用意されています。特に後半で紹介したforEachメソッドやfindメソッドといった コールバック関数 を引数として持つメソッドは、少々特殊なので、自ら何度かコードを実行させてみることが大切です。
TECH PLAYでは、エンジニアの方向けに勉強会・イベント情報を提供しています。
ご興味のある方はぜひご参加ください。