「JavaScript arrayってどうやって使うの？」
「JavaScript arrayで使えるメソッドが知りたい!」
「JavaScript arrayの注意点が知りたい!」
この記事に訪れたあなたはこのような悩みを持っていませんか？
大量のデータを扱えるのに便利なarrayですが、使いこなすのが難しく時間がかかってしまいますよね。
また注意点も多く存在し、使い方を間違えると思い通りの結果にならないことが起きてしまいます。この注意点を知らないと、arrayがわからず躓いてしまいますよ。
そこで今回はJavaScript arrayの使い方や注意点について紹介！arrayでできることをすべて解説していきます。
この記事を読めば、あなたもarrayを使いこなせるようになりますよ。
JavaScript arrayとは？
JavaScript arrayは、冒頭で話した通り複数のデータを1つにまとめる配列です。
プログラミングするときにたくさんの変数を使う場合、ひとつひとつの変数を使用するのはとても大変ですよね。
一方、配列なら簡単にひとつひとつの値を利用できますよ。
では、どのように記述するのか見ていきましょう。
const list = new Array(100,300,500,700)
console.log(list)
const list2 = [200,400,600,800]
console.log(list2)// 実行結果
[ 100, 300, 500, 700 ]
[ 200, 400, 600, 800 ]1，2行目の部分ではnew Arrayで配列を作成する方法を用いています。()に配列の値となる要素を入れることで配列ができるんですね。
3，4行目では配列をそのまま変数に代入する方法を用いています。とてもわかりやすいのでこの方法がよく使われていますね。
どちらも同じように配列が作れますが、注意点があって要素が1つの配列を作るときに、Arrayを使って配列を作成すると以下のように空の配列が100個作られてしまいます。
const list = new Array(100)
console.log(list)
const list2 = [100]
console.log(list2)// 実行結果
[ <100 empty items> ]
[ 100 ]new Array(100)のように数値を一つだけ設定する場合、空の要素をその数だけ生成してしまうんですね。
要素が1つだけの配列を作りたいなら2つ目の方法を利用しましょう。
JavaScript arrayでできること
arrayはどのように使われるのかがわかりましたが、「配列はどんな時に便利なの？」と疑問に感じますよね。
実際に配列は以下のようなことができます。
- 要素の値を取得・変更できる
- 多次元配列を作成できる
- 連想配列を作成できる
それぞれメリットを合わせて解説していきますね。
要素の値を取得・変更できる
配列は要素の値を簡単に取得、変更できます。どのように使われるのか、以下のコードを見てみましょう。
const kanto = [‘東京’,’神奈川’,’埼玉’,’千葉’,’茨城’,’栃木’,’群馬’]
console.log(kanto[1])
kanto[1] = kanto[1] + ‘県’
console.log(kanto[1])// 実行結果
神奈川
神奈川県実行結果を見ると最初のconsole.logで配列の1番目の神奈川を出力しています。この1という番号はインデックス番号と言われ、配列の要素の場所を表してくれるんですね。
ここで「あれ？1番目だから東京じゃないの？」と疑問に思う方がいるかもしれません。
実は、配列は0番目から始まります。そのため東京を出力したい場合はkanto[0]としましょう。
また3行目ではkanto[1]で神奈川を取り出して神奈川県にしています。このように配列にインデックス番号を付けるだけで簡単に取得や変更ができてしまうんですね。
この方法は繰り返し処理を使うときにとても便利です。以下のコードを見てください。
const kanto = [‘東京’,’神奈川’,’埼玉’,’千葉’,’茨城’,’栃木’,’群馬’]
for(let i=0; i<kanto.length; i++){
if(i == 0) kanto[i] = kanto[i] + ‘都’
else kanto[i] = kanto[i] + ‘県’
}
console.log(kanto)// 実行結果
[ ‘東京都’ , ‘神奈川県’ , ‘埼玉県’ , ‘千葉県’ , ‘茨城県’ , ‘栃木県’ , ‘群馬県’ ]iを0から１つずつ増やしていくので、結果として配列の要素を左から順番に処理してくれるんですね。
配列の順番は０から始まるので、繰り返し処理の始まりも０にすることに注意しましょう。
多次元配列を作成できる
配列には数値や文字列だけでなく、配列を格納できます。以下のコードを見てみましょう。
const kanto = [[‘東京’,1351,2187],[‘神奈川’,912,2415],[‘埼玉’,726,3797]]
console.log(kanto[0][1])// 実行結果
1351すべての配列の要素が配列になっていますね。kanto[0][1]が指す場所は配列の0番目の要素であり、その要素の1番目の値であるため1351が表示されました。
わかりやすく図に表すと以下のようになります。
多次元配列も繰り返し処理を使うときに便利なのでこちらもコードを使ってみてみましょう。
const kanto = [[‘東京’,1351,2187],[‘神奈川’,912,2415],[‘埼玉’,726,3797]]
for(let i=0; i 0) kanto[i][j] *= 2
}
console.log(kanto)// 実行結果
[ [ '東京', 2702, 4374 ], [ '神奈川', 1824, 4830 ], [ '埼玉', 1452, 7594 ] ]上記のコードは要素内の数値をすべて2倍にしたものです。
まずは繰り返しで配列の各要素に処理できるようにして、もう一度繰り返しをすることで配列内の配列の各要素に対して処理できるようにしています。
各要素の0番目は文字列であるため、if文でjが1以上の数値だけに対して2倍をしているんですね。
連想配列を作成できる
また配列は連想配列として記述することもできます。
const kanto = {name:'東京',pop:1351,area:2187}
console.log(kanto.pop)// 実行結果
1351連想配列とは、上記のコードのようにキーと値がペアになった配列です。要素がキー:値になった配列と考えればいいでしょう。
値を取得するにはkanto.popとキーを指定することで取り出せます。また値を変更したい場合もキーを指定すれば可能なので、基本的には多次元配列と同じように扱えるんですね。
連想配列も繰り返し処理に使えるので、実際にコードを見てみましょう。
const kanto = [{name:'東京',pop:1351,area:2187},{name:'神奈川',pop:912,area:2415},{name:'埼玉',pop:726,area:3797}]
for(let i=0; i<kanto.length; i++){
kanto[i].pop *= 2;
kanto[i].area *= 2;
}
console.log(kanto)// 実行結果
[
{ name: '東京', pop: 2702, area: 4374 },
{ name: '神奈川', pop: 1824, area: 4830 },
{ name: '埼玉', pop: 1452, area: 7594 }
]上記のコードを見ると、複数の連想配列を配列でまとめているのがわかりますね。繰り返し処理で配列の各要素に対して、popキーとareaキーを取得して2倍にしています。
多次元配列と違って繰り返し処理が一回で済むので、コードが複雑にならず見やすいですね。
メソッドを使った配列の操作と注意点
次に配列に使えるメソッドを紹介していきます。配列は繰り返し処理に使える点だけでも便利なものですが、メソッドを使うことで様々な処理ができるんですね。
配列で使えるメソッドは以下のものがあります。
- pushやpopで要素を追加・削除する
- lengthで配列の要素数を調べる
- sliceやspliceで配列の一部を抽出・削除する
- filterで条件を満たす値を抽出する
- indexOfやfindで要素の値やインデックス番号を探す
- concatで配列をコピーする
- sortで並べ替える
- mapで配列を操作する
それぞれのメソッドについて、使い方や注意点を解説していきますね。
pushやpopで要素を追加・削除する
配列に末尾の要素を追加したり、削除したい時はpushやpopを使いましょう。
const kanto = [‘東京’,’神奈川’,’埼玉’,’千葉’,’茨城’,’栃木’,’群馬’]
kanto.push(‘山梨’)
console.log(kanto)
kanto.pop()
console.log(kanto)// 実行結果
[ ‘東京’, ‘神奈川’, ‘埼玉’, ‘千葉’, ‘茨城’, ‘栃木’, ‘群馬’, ‘山梨’ ]
[ ‘東京’, ‘神奈川’, ‘埼玉’, ‘千葉’, ‘茨城’, ‘栃木’, ‘群馬’ ]上記のコードを実行すると、2行目に山梨を末尾に追加して、4行目に末尾の山梨を削除していますね。
また複数の要素を追加したいときに、配列として追加しようとするとそのまま配列として追加されてしまうので注意しましょう。
const kanto = [‘東京’,’神奈川’,’埼玉’,’千葉’,’茨城’,’栃木’,’群馬’]
kanto.push([‘山梨’,’静岡’])
console.log(kanto)// 実行結果
[ ‘東京’, ‘神奈川’, ‘埼玉’, ‘千葉’, ‘茨城’, ‘栃木’, ‘群馬’, [ ‘山梨’, ‘静岡’ ] ]pushは、(‘山梨’,’静岡’)のように複数の指定ができます。配列ではなく別々の要素として追加したい時は、この方法を使いましょう。
lengthで配列の要素数を調べる
配列の要素が多くなってくると、配列の中にはいくつの要素があるのかわからなくなってしまいますよね。配列の要素の数を調べたいときはlengthを使いましょう。
const kanto = [‘東京’,’神奈川’,’埼玉’,’千葉’,’茨城’,’栃木’,’群馬’]
console.log(kanto.length)// 実行結果
7配列には7つの要素があるので、実行すると7が表示されましたね。
lengthは繰り返し処理によく使われ、最後の要素まで繰り返して欲しい場合は上記のコードのようにkanto.lengthとすればいいわけです。
「JavaScript arrayでできること」で載せたサンプルコードにも使われていましたね。
注意点として、lengthは空の要素もカウントされます。
「空の要素はカウントしないで欲しい！」と考えている人は、繰り返し処理を使ってからの要素をカウントしないようにすることで実現できますよ。
const kanto = [‘東京’,’神奈川’,’埼玉’,’千葉’,’茨城’, ,’栃木’, ,’群馬’]
let count = 0
for(let i=0; i<kanto.length; i++){
if(kanto[i] != null) count++
}
console.log(count)// 実行結果
7実行するとしっかりと文字列のある要素だけがカウントされましたね。
sliceやspliceで配列の一部を抽出・削除する
配列を扱っていると、「一部を取り出したり、切り抜きたい！」と思う場面が出てくると思います。そんなときはsliceやspliceを使いましょう。
第一引数に開始位置、第二引数に終了位置を指定します。第一引数だけを指定すればその番号から最後までを選択してくれますよ。
const kanto = ['東京','神奈川','埼玉','千葉','茨城','栃木','群馬']
let list = kanto.splice(1,4)
console.log(list)
let list2 = kanto.slice(2)
console.log(list2)// 実行結果
[ '神奈川', '埼玉', '千葉', '茨城' ]
[ '群馬' ]実行するとlistには1番目から4番目を抜き出したので、神奈川から茨城までが格納されました。
そしてsplice(1,4)でkantoの中身が[‘東京’,’栃木’,’群馬’]になるので、slice(2)は茨城だけが表示されるわけなんですね。
spliceは配列から指定した範囲を抜き出すので、一部を削除したい場合にも使えますよ。
注意点として、splice(1,4)は1番目から4番目の範囲を指定しますが、slice(1,4)では1番目から3番目までの範囲しか指定しません。
それぞれ指定範囲が異なるのを頭に入れて、混乱しないよう気を付けましょう。
filterで条件を満たす値を抽出する
大量のデータがあったときに、その中から特定の条件を満たす要素だけを取り出したい場合はfilterを使ってみるといいですよ。
記述の仕方は少し特殊なので、以下のコードでどのように使われるか見てみましょう。
const kanto = [1,2,3,4,5,6,7,8]
let list = kanto.filter( function(value){
return value < 4
})
console.log(list)// 実行結果
[ 1, 2, 3 ]上記のコードは配列の要素が4より小さい要素だけを取り出しています。
function(value)で配列の要素をvalueに格納して「return < 4」のように条件を作ることで実現できるんですね。
functionには第二引数に配列のインデックス番号、第三引数に現在処理している配列を指定できるので覚えておくといいでしょう。
indexOfやfindで要素の値やインデックス番号を探す
大量のデータになると、「Aという要素は入っているのかな？」とわからなくなってしまいますよね。要素が入っているのか知りたい人はindexOfやfindが有効です。
まずindexOfは配列のどこに要素があるのかを探索して、その要素があればインデックス番号を返します。
const kanto = [‘東京’,’神奈川’,’埼玉’,’千葉’,’茨城’,’栃木’,’群馬’]
let list = kanto.indexOf(‘埼玉’)
console.log(list)
let list2 = kanto.indexOf(‘山梨’)
console.log(list2)// 実行結果
2
-1上記のコードでは、埼玉は2番目にあるのでindexOf(‘埼玉’)は2と表示されました。
一方山梨は配列にないので-1と表示されます。配列に探索して存在しなかったら-1が返ってくるわけなんですね。
注意点として配列内に同じ値が複数あった場合は、最初に見つかった要素のインデックス番号だけが出力されてしまうので注意してください。
またfindは連想配列に有効で、returnで一致する要素を出力してくれます。
const kanto = [{name:’東京’,pop:1351,area:2187},{name:’神奈川’,pop:912,area:2415},{name:’埼玉’,pop:726,area:3797}]
const list = kanto.find(function(value){
return value.name == ‘東京’
})
console.log(list)// 実行結果
{ name: ‘東京’, pop: 1351, area: 2187 }実行結果を見ると、nameタグが東京の連想配列が出力されましたね。
このようにインデックス番号を知りたいのか、要素の値を知りたいのかでメソッドを使い分けましょう。
concatで配列をコピーする
配列を使っていると、作成した配列と同じ配列を作りたい場面ってありませんか？
配列で使えるメソッドには配列を複製してくれるものもあります。以下のコードを見てみましょう。
const kanto = ['東京','神奈川','埼玉','千葉','茨城','栃木','群馬', '山梨' ]
const list = kanto.concat('山梨')
console.log(list)// 実行結果
[ '東京', '神奈川', '埼玉', '千葉', '茨城', '栃木', '群馬' ]concatを使うことで、kantoと同じ配列を新しく作成してくれるんですね。()内に値を記述すると新しく作成した配列の後ろに付け足すこともできますよ。
ちなみに配列のコピーはkantoをそのまま代入する方法でもできますが、この方法では完全なコピーができないので注意が必要です。
const kanto = ['東京','神奈川','埼玉','千葉','茨城','栃木','群馬']
const list = kanto
list[0] = '京都'
console.log(kanto)// 実行結果
[ '京都', '神奈川', '埼玉', '千葉', '茨城', '栃木', '群馬' ]上記のコードは配列kantoをlistに代入してlistの0番目を京都に変更しています。ここで配列kantoを出力するとkantoの0番目が京都に代わっているのがわかりますか？
実はそのまま代入すると、一方で値を変更したものがもう一方にも反映されてしまうんですね。
値がぐちゃぐちゃになってしまうのを防ぐためにも、配列のコピーにはconcatを使うと覚えておきましょう。
sortで並べ替える
配列を並べ替えるsortを使うと、文字の値が小さい順に要素を並べ替えてくれます。例えば配列の中身が8,2,5なら、2,5,8に並べ替えてくれるんですね。
しかし一文字目の値から小さい順に並べ替えるため、12,10,1,2をsortすると1,10,12,2となってしまい昇順に並べ替える方法には向いていません。
昇順に並べ替えたいなら比較関数を使いましょう。
function comp(a, b) {
return a - b
}
const kazu = [10,1,2,12]
const list = kazu.sort(comp)
console.log(list)// 実行結果
[ 1, 2, 10, 12 ]関数compをsortに指定することで、aとbにそれぞれの配列の要素が入ります。そしてaからbを引いて1以上の値になれば、つまりaがbより大きければ入れ替えてくれるんですね。
文字列をソートしたい場合は比較関数を使わないで並べ替えられるので覚えておきましょう。
mapで配列を操作する
配列を作っていると、「配列Aから少しいじったものを配列Bに格納したい！」と思う場面が出てきませんか？
そんなときに、新しい配列を作ってそこから繰り返し処理をして…とするのはとても大変ですよね。
このような操作をmapならシンプルなコードで実現できますよ。
const kanto = [‘東京’,’神奈川’,’埼玉’,’千葉’,’茨城’,’栃木’,’群馬’]
const Kanto = kanto.map( n => {
if(n === ‘東京’){ return n + ‘都’ }
else{ return n + ‘県’ }
})
console.log(Kanto)// 実行結果
[ ‘東京都’, ‘神奈川県’, ‘埼玉県’, ‘千葉県’, ‘茨城県’, ‘栃木県’, ‘群馬県’ ]mapは変更した後の配列を新しく作ってくれるメソッドです。
nに配列の各要素が入るので、後ろに都や県をつけ足すことによって、変更した後の配列が出来上がるわけなんですね。
nに入る要素はreturnしないと新たな配列に格納されずundefinedとなってしまうので気を付けてくださいね。
JavaScript arrayを使った使用例
ここまで配列についてできることを紹介しましたが、「いまいち使い方がよくわからない…」と疑問に思っていませんか？
arrayは大量のデータを扱います。例えば以下のような場面でarrayが使われるんですね。
- 使用例1：文字列を逆順にする
- 使用例2：商品のサイズを大きい順に並べ替える
- 使用例3：配列の要素と一致するキーの値を取得する
それぞれ考え方とサンプルコードを載せていますので、どのようにして動いているのかを考えながら見ていってください。
使用例1：文字列を逆順にする
まずは『おはよう』という文が『うよはお』になるように、文字列を逆にしてみましょう。
考え方としては、文字列をひとつひとつ分解して配列にして、並びを逆順にすれば良さそうですね。出来上がったコードを見てみましょう。
const str = ‘東京都神奈川県埼玉県’.split(‘’)
const rts = str.map((value,n) =>{ return str[str.length-1-n]})
console.log(rts)// 実行結果
[ ‘県’, ‘玉’, ‘埼’, ‘県’, ‘川’, ‘奈’, ‘神’, ‘都’, ‘京’, ‘東’ ]配列をひとつひとつ分解するには、splitを使います。指定文字を’’にすることで1文字ずつ分解してくれるんですね。
また文字を逆順にするときには、新しい配列を作成して文字を逆から入れていけばよさそうです。
新しい配列の作成はmapでできるんでしたね。あとは配列の要素数から1を引いたものを、インデックス番号nを引けば最後の文字から格納してくれますよ。
使用例2：商品のサイズを大きい順に並べ替える
次は以下の連想配列を使って、商品のサイズが大きい順に並び替えてみましょう。
id:1,width:50,height:70
id:2,width:60,height:60
id:3,width:40,height:120並び替えはsortを使えばよく、また数値の比較なので比較関数を作成すれば良さそうですね。
今回は連想配列なので少し複雑そうに見えますが、書き方はほとんど配列と同じですよ。以下のコードを見てみましょう。
function comp(a,b){
return b.width/b.height - a.width/a.height
}
const list = [{id:1,width:50,height:70},{id:2,width:60,height:60},{id:3,width:40,height:120}]
const List = list.sort(comp)
console.log(List)// 実行結果
[
{ id: 3, width: 40, height: 120 },
{ id: 2, width: 60, height: 60 },
{ id: 1, width: 50, height: 70 }
]比較関数で受け取る値が連想配列の場合、idタグからheightタグまですべて取得します。そのためb.widthのようにキーを指定すればその値が取れるわけなんですね。
また今回は大きい順にならべるので、第二引数のbが大きいときに入れ替えるようにしないといけません。
bの値が大きいときにreturnが1以上になればいいので、上記のコードのようにb-aの形を作ればよさそうですね。
使用例3：配列の要素と一致するキーの値を取得する
使用例2で使用した配列listと、要素が1,3,5の配列list_idを使って、配列の要素と一致するキーの値を取得してみましょう。
例えばlist_idの要素がlistのキーidに存在していたら、その連想配列の幅と高さを出力するようにします。
const list_id = [1,3,5]
const list = [{id:1,width:50,height:70},{id:2,width:60,height:60},{id:3,width:40,height:120}]
for(let i=0; i<list_id.length; i++){
for(let j=0; j<list.length; j++){
if(list_id[i] == list[j].id) console.log(“idが”+list_id[i]+”の商品のサイズは”+list[j].width+”×”+list[j].height)
}
}// 実行結果
idが1の商品のサイズは50×70
idが3の商品のサイズは40×120完成したコードを見ると、やや長くて、「どうなっているのかよくわからない…」と感じてしまいますね。
しかしやっていることは、配列list_idの各要素に対して配列listの各要素のidを調べて、一致するものがあるかを探しているだけです。
図に表すとこのようになります。配列を応用すれば、キーの値と一致する要素の配列も作れてしまうんですね。
JavaScript arrayを学習する方法
配列はとても便利なものですが、「もっと配列を学習してマスターしたい！」と考えている人は以下の方法を学習することをお勧めしますよ。
- 本で学習・勉強する
- サイトで学習・勉強する
それぞれ学習するときのポイントを載せながら解説しますね。
本で学習・勉強する
JavaScriptの参考書ならJavaScriptの環境開発から実践的なプログラムまでをカバーしているので、参考書1冊でJavaScriptをマスターできるようになります。
配列についても、詳しい解説や配列を使ったサンプルコードも豊富にありますので、より配列を扱えるようになりますよ。
また図解や色分けがたくさん使われていたりと、サイトに載っているものよりもわかりやすい参考書が多いため、独学でも学習しやすいんですね。
おすすめの参考書は以下の記事で紹介していますので、どの参考書がいいのか迷っている人は参考にしてみてください。
→【2021年最新】Javascriptおすすめ学習本・参考書13選！初心者から経験者まで
サイトで学習・勉強する
サイトなら配列について細かく解説されているものが多くあります。
例えば「文字を1文字時ずつ分解して配列にしたい！」と考えた時に、サイトで調べるとたくさん出てくるんですね。
内容は参考書よりも上級者向けになりますので、配列を深く学びたい人にはおすすめですよ。
またサイトでもJavaScriptを一通り学べる学習サイトがあるんですね。特におすすめなのが以下の3つのサイト。
これらは、参考書と同じように開発環境からしっかりと解説されているので、初心者にもおすすめですよ。
まとめ
今回はJavaScript arrayについて解説しました。
冒頭でも話しましたが、配列にはたくさんの注意点がありましたね。インデックス番号は0番から始まるなど、覚えておかないとうまく扱えないものもあるので気を付けましょう。
またこの記事では多くのメソッドを取り扱いましたが、joinなど他にもたくさんのメソッドが存在しています。
これらはサイトで調べると多数ヒットするので、必要な時になったらサイトで学習してみるといいですね。
