format_list_bulleted
【JavaScript】配列(array)の書き方・使い方について解説
最終更新日時:2020-05-03 12:58:36



JavaScriptのarray(配列)はデータ型の一種で、配列に様々な値を格納することで、データの取り出しや管理などが便利になります。array(配列)は非常に基本的な概念で、JavaScriptだけでなくほとんど全てのプログラミング言語で使われているので、今回の解説でしっかりと理解しておきましょう。

配列(array)そもそも何か??

array(配列)は上記で説明したようにデータ型の一種です。JavaScriptのデータ型は数値や文字列といった基本型と、配列などの参照型に分かれています。配列は複数の関連する値を一つの配列にまとめることができ、それぞれの値をインデックス番号で参照することができます。Arrayオブジェクトを使って配列を作ることもできますが、バグを招く可能性があるので、今回は配列をリテラル表現を使って作成します。

let fruits =['apple', 'orange', 'banana']

配列fruitsを定義して、その中にapple、orange、bananaを格納しました。要素ごとに改行すると可読性が高まるので上記のようにしましょう。インデックス番号は0から始まる番号で、配列に最初に格納された値のインデックス番号が0となり、その後格納された順に1、2、3、、と続いていきます。実際にコンソールで参照してみましょう。


上記のように

配列名[index番号]

で参照することができます。

配列の中に配列をいれて、入れ子構造にすることもできます。

let fruits =['apple', 'orange', 'banana', ['kiwi','pineapple','strawberry']]

fruits配列の中の、配列に格納されているpineappleを参照したいときは次のようにします。

fruits[3][1]

配列の削除・追加

配列の中の要素は新たな要素を追加したり、格納されてる要素を削除することもできます。

 配列の要素の追加方法

配列への要素の追加方法には主に2種類のやり方があり、配列の先頭に要素を追加するunshiftメソッドと末尾に追加するpushメソッドがあります。

let fruits =['apple', 'orange', 'banana']
fruits.unshift('kiwi');
console.log(fruits) //結果:["kiwi", "apple", "orange", "banana"]
fruits.push('pineapple');
console.log(fruits) //結果:["kiwi", "apple", "orange", "banana", "pineapple"] 

配列の要素の削除方法

要素の削除方法にも配列の先頭の要素を取得し削除するshiftメソッド、末尾を取得し削除するpopメソッドがあります。こちらは要素を取得するのも処理のうちに含まれています。

let fruits =['apple', 'orange', 'banana']
fruits.shift();
console.log(fruits) //結果:["orange", "banana"]
fruits.pop();
console.log(fruits) //結果:["orange"]

配列の連結方法

複数の配列を結合させて一つの配列にすることもできます。結合する際にはconcatメソッドを使います。

let fruits1 =['apple',   'orange',   'banana']
let fruits2 = ['kiwi',   'pineapple',   'strawberry']
let fruits3 =['peach',   'mango',   'melon']
console.log(fruits1.concat(fruits2)); //結果:["apple", "orange", "banana", "kiwi", "pineapple", "strawberry"]
console.log(fruits1.concat(fruits2,fruits3)); //結果:["apple", "orange", "banana", "kiwi", "pineapple", "strawberry", "peach", "mango", "melon"]

concatメソッドには複数の配列も引数に渡すことができ、配列の後ろに結合させることができます。

ここで注意して欲しいのは、concatメソッドは実際に配列を結合しているのではなく、結合した配列を戻り値として返すだけで、元の配列に影響はありません。新たな配列を作成した場合はconcatメソッドで返された戻り値を変数に格納しましょう。

let fruits4 = fruits1.concat(fruits2);
console.log(fruits4) //結果:["apple", "orange", "banana", "kiwi", "pineapple", "strawberry"]

配列内の要素の結合

配列内部の要素を一つの値にまとめることも可能です。2種類方法があり、そのうちの一つのjoinメソッドは引数に要素と要素の間にいれる記号や文字列を指定することができます。

console.log(fruits1.join()) //結果:apple,orange,banana
console.log(fruits1.join(' ')) //結果:apple orange banana
console.log(fruits1.join('と')) //結果:appleとorangeとbanana

何も指定しないと「,」(カンマ)で連結します。

もう一つの方法にtoStringメソッドを使用する方法がありますが、引数には何も指定できず、全て「,」(カンマ)で連結します。

console.log(fruits1.toString()) //結果:apple,orange,banana 

配列のコピー

配列をコピーする際にはArray.fromメソッドを使って複製することができます。Array.fromメソッドは配列のようなオブジェクトを array型の配列に変換するメソッドですが、配列を渡すことで新たな配列を複製することができます。

let copy = Array.from(fruits1);
console.log(copy); //結果:['apple','orange','banana']

要素の結合で学んだ、concatメソッドを使用してコピーすることもできます。引数に何も渡さないとコピーを作成することができます。

let copy = fruits1.concat();
console.log(copy); //結果:['apple','orange','banana'] 

ループの仕方

JavaScriptで配列を使う際は、配列の中の要素に対する処理をループさせる場面が多いと思います。やり方はたくさんありますが本記事ではfor、forEach、for~inを紹介します。

forを使ったループの仕方

lengthプロパティを使って、配列の要素数を取得して、値を取り出すことができます。

for(let i=0; i<fruits1.length; i++){   
  console.log(fruits1[i]);
}

結果は次のようになります。

apple
orange
banana

forEachを使ったループの仕方

forEachメソッドを使用すると、配列から要素を順番に取り出して、自分で定義した関数に値を渡すことができます。

fruits1.forEach(function(value,index,array){
    console.log(index + ':' + value)
});

第一引数のvalueには要素の値、第二引数のindexはインデックス番号、第三引数にはarrayには元の配列を渡すことができます。

結果は次のようになります。

0:apple
1:orange
2:banana

for~inを使ったループの仕方

for~inはfor文で要素を取り出す時よりも簡潔に処理を記述することができます。inの後ろに取り出したい配列を記述し、定義したiはfruits1の要素数まで繰り返し代入されます

for(let i in fruits1){   
  console.log(fruits1[i])
}

結果は次のようになります。

apple
orange
banana

注意していただきたいのはfor~in分では、必ずしも配列のインデックス番号通りに処理が行われるわけではありません。インデックス番号の順序が重要な場合は使用しないほうがいいでしょう。

mapメソッドの使用法

mapメソッドを使用することで、配列の要素を順番に改変し、新しい配列を作成することができます。mapメソッドもforEachと同様に自分で定義した関数に配列の値を渡しますが、return文を使った返り値が必要となります。また、元の配列の値を変更することができないなどの違いがあります。

let data =fruits1.map(function(value,index,array){   
     return index + '番目の値は' + value
});
//結果:["0番目の値はapple", "1番目の値はorange", "2番目の値はbanana"]

filterメソッドの使用法

filterメソッドを使用すると配列の中から定義した条件にあう要素のみを取り出して新しい配列を作成することができます。

let fruits1 =['apple', 'orange', 'banana', 'pineapple', 'dragonfruits']

上記のような配列がある時、配列の文字数が6文字以上の要素のみを取り出したいときには次のように記述します。

let data =fruits1.filter(function(value,index,array){   
     return value.length > 6
});
console.log(data)//結果:["pineapple", "dragonfruits"]

valueだけでなく、index番号などを使っても条件を絞ることができるので色々な条件を定義して要素を取得してみましょう。

この記事のまとめ

本記事ではJavaScriptの配列の扱い方について学びました。JavaScriptの配列の操作に慣れると、Vue.jsなどのフレームワークの扱いもグッと上手くなるので、しっかりと勉強しておきましょう!!最後に今回学んだことをまとめます。

  • 配列はデータ型の一種である
  • 配列内の要素はpush、unshiftメソッドで追加、pop、shiftメソッドで削除できる
  • concatメソッドで配列を連結させることができる
  • joinメソッドで配列内の要素を結合させることができる
  • 配列をコピーする際にはArray.fromメソッドを使って複製することができる
  • 配列はfor、forEach、for~inでループさせることができる
  • map、filterメソッドで新たな配列を作ることができる

配列の操作を利用して、JavaScriptをさらに便利に使用しましょう!!