JavaScriptの配列とは？可変長のデータを格納するデータ構造

作成日: 2020-08-09
更新日: 2023-12-28
カテゴリ: JavaScript

JavaScriptの配列

JavaScriptには配列と言うよく使われるデータ型があります。
JavaScriptの配列を使うと、1つの変数（配列）に色々なデータを保存して持ち歩くことが出来るようになります。
配列にデータを保存しておけばプログラムの中で色々な応用ができるようになります。
今回はこの配列を紹介します。

具体的には↓を見ていきます。

配列とは？
配列の作り方
配列の要素を参照する
配列の長さを得る
変数が配列かどうか調べる
配列の末尾に値をプッシュする
配列の先頭に値をプッシュする
配列の末尾から値をポップする
配列の先頭から値をポップする
CSVをパースして配列にする

プログラミングの種類とできることを解説します【Python, JavaScript】
【C言語】配列を0クリアで初期化する方法
 Vueのwatchの革命的な使い方【JavaScript】
TypeScriptのArray（配列）の使い方
 Rustの配列（array）の使い方

配列とは？

JavaScriptの配列は可変長のデータ構造です。
配列にはデータをプッシュして入れたり、またはデータをポップして取り出すことができます。

それらの基本的な操作の他にも添え字で配列の要素を参照したりすることができます。
for文の添字で配列の要素を参照することで、その配列の要素を順に参照することもできます。

特徴としては配列内の要素のメモリ領域が連続した番地で確保されているという点があげられます。
配列内の要素1と要素2はメモリ上ではお隣さん同士なんですね。

🦝 < お隣さん

配列はJavaScriptに限らず様々なプログラミング言語で実装されている普遍的なデータ構造で、人気があります。
配列の他にはリストやハッシュマップ、スタックなどがありますが、配列はその中でも最も基本的なデータ構造と言っていいでしょう。

配列を使えるようになることはプログラミングのスキルを上げるのに役立ちます。
配列は色々なシーンで使うことが出来る汎用的なデータ構造だからです。
配列をうまく使うことであなたのプログラムは洗練され、品質が上がることでしょう。

JavaScriptの配列を学んだ後はJavaScriptの連想配列についても学ぶといいかもしれません。
連想配列はキーと値をついにしたデータ構造で、これも人気があるデータ構造です。

配列の作り方

配列を作るには↓のように角カッコ（[]）を変数に代入します。
変数はletでもconstでもvarでもかまいません。

let ary = []  
console.log(ary)  
// [ ]

角カッコの中に値を入れておくと、その値が入った配列が作成されます。
値は何でも入れられます。
たとえば整数、文字列、null, オブジェクトなどなど。なんでも入ります。
JavaScriptは動的型付けなのでこのような芸当が可能です。

let ary = [1, null, 'abc']  
console.log(ary)  
// [ 1, null, 'abc' ]

これらはArrayクラスをコンストラクトするのと同じです。
一般的にはArrayをnewするよりは角カッコのほうがよく使われます。

let ary = new Array(1, 2, 3)  
console.log(ary)  
// [ 1, 2, 3 ]

角カッコを使った場合もArrayクラスをコンストラクトした場合も、結果は同じになります。
角カッコのほうがタイプ数が少ないですね。
ですので角カッコの書き方を好む人が多いようです。

配列の要素を参照する

配列の要素を参照するには変数に対して角カッコ（[]）で整数の添え字でアクセスします。

let ary = [1, 2]  
console.log(ary[0])  // 添字0でアクセス  
// 1

↑の場合、変数aryは長さ2の配列です。
そしてary[0]で配列の0番目の要素にアクセスしています。
添字に使う整数は↑のように0から始めることに注意してください。
0から始まるこれを「0オリジン」と言ったりもします。

添字のアクセスで、整数が範囲外だった場合はどうなるでしょうか。
たとえば↑の配列aryは長さが2ですが、これに添え字10とかでアクセスしてみます。
10は明らかに範囲外の数値です。

let ary = [1, 2]  
console.log(ary[10])  // 範囲外の添字でアクセス  
// undefined

配列に範囲外の添字でアクセスすると、結果は↑のようにundefinedになります。
これはJavaScriptっぽい挙動です。
他の言語では添字に関するエラーが飛んできたりします。

undefinedを取得するのを防ぎたい場合は後述するlengthプロパティを使って、添字アクセスする前に配列の長さをチェックしておくといいでしょう。
たとえば↓のようにです。

let ary = [1, 2]  
const index = 10  
if (index < ary.length) {  
    console.log(ary[index])  
}

参照する添字（index）が配列の長さより↓の場合は参照し、大きい場合は参照しないようにしています。
もっとも、↑の場合も添字が負数だった場合はundefinedを参照してしまうので注意が必要です。

ですので厳密に範囲をチェックするなら

let ary = [1, 2]  
const index = 10  
if (index >= 0 && index < ary.length) {  
    console.log(ary[index])  
}

このようなif文を書く必要があります。

配列の長さを得る

配列の長さを得るにはlengthプロパティを参照します。
lengthは「長さ」という意味です。

let ary = [1, 2, 3]  
ary.length  
// 3

lengthプロパティは先述のように添字のアクセス時に使ったり、あとはfor文で使うことが多いプロパティです。
for文で使う場合を見てみましょう。
↓のようになります。

let ary = [1, 2, 3]  

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

↑のようにlengthプロパティは、添字の値と比較されることが多いプロパティです。

また、イディオムとして配列の末尾の要素を参照するときにも使われます。
たとえば↓のようにです。

let ary = [1, 2, 3]  

console.log(ary[ary.length - 1])

↑のようにary.length - 1とすることで、その配列の末尾の要素を参照できるようになります。
ただ、この参照方法では、配列の長さが0だった場合に演算結果が負数になってしまうので注意が必要です。
負数の場合は得られる値はundefinedになります。

変数が配列かどうか調べる

変数が配列かどうか調べたい場合はArrayクラスの静的メソッドisArrayを使います。
isArrayは「～は配列です」という意味です。

let ary = []  
console.log(Array.isArray(ary))  
// true

typeofでは配列かどうか判定できないので注意しましょう。
ちなみにtypeofで配列を調べると↓のような結果になります。

let ary = []  

console.log(typeof ary)  
// object

結果はobjectになります。
このようにtypeofでは配列はオブジェクトと判定されます。
厳密に配列かどうか判定したい場合はArray.isArray()を使うようにしましょう。

🦝 < 配列かどうか知りたい場合は

🐭 < isArray()を使おう

配列の末尾に値をプッシュする

配列の末尾に値を押し込みたい場合はpush()メソッドを使います。
pushは「押し込む」という意味です。

let ary = [1, 2]  
ary.push(3)  // 配列の末尾3をプッシュ  
console.log(ary)  
// [ 1, 2, 3 ]

push()はJavaScriptの配列の操作で非常によく使われるメソッドの1つです。
push()の引数には配列に追加できるオブジェクトであれば何でも渡すことができます。
たとえば整数、実数、文字列, null, 配列、オブジェクトなどです。

ary.push(1)  
ary.push(3.12)  
ary.push('string')  
ary.push(null)  
ary.push([1, 2, 3])  
ary.push(new Object())

push()を実行すると配列の長さが変化します。
この長さの変化は配列のlengthプロパティで知ることが可能です。
空の配列に値を3つ追加すれば、その配列の長さは3になるわけです。

let ary = []  
ary.push(1)  
ary.push(2)  
ary.push(3)  
console.log(ary.length)  
// 3

push()はfor文と組み合わせてもよく使われます。
for文の添字を使って値を加工して、その結果を配列に保存するなどです。

let ary = []  

for (let i = 0; i < 4; i++) {  
    ary.push(i * i)  
}  

console.log(ary)  
// [ 0, 1, 4, 9 ]

配列に値を保存したい、末尾にプッシュしたい場合はpush()を使いましょう。

配列の先頭に値をプッシュする

配列の先頭に値を押し込みたい場合はunshift()を使います。

let ary = [1, 2]  
ary.unshift(3)  // 配列の先頭に3を押し込む  
console.log(ary)  
// [ 3, 1, 2 ]

unshift()はpush()と違って、配列の先頭に値を押し込むメソッドです。
空の配列に順に大きくなる値を追加していくと、配列内のその順番は逆になっています。

let ary = []  
ary.unshift(1)  
ary.unshift(2)  
ary.unshift(3)  
console.log(ary)  
// [ 3, 2, 1 ]

↑の場合1, 2, 3と突っ込んでいますが結果は[3, 2, 1]になります。

配列の末尾から値をポップする

配列の末尾から値をポップしたい場合はpop()メソッドを使います。

let ary = [1, 2]  
let el = ary.pop()  
console.log(el)  
// 2

pop()メソッドを実行すると、配列内の末尾の要素が配列から取り除かれ、その要素がpop()の返り値として返されます。
空の配列に使った場合は、pop()メソッドはundefinedを返します。

let ary = []  
let el = ary.pop()  
console.log(el)  
// undefined

pop()メソッドはpush()メソッドと並んで、JavaScriptの配列操作ではよく使われるメソッドです。
たとえば配列の末尾の要素から順に参照していって、最終的に配列の中身を空にしたいときなどは、↓のような定型文があります。

let ary = [1, 2, 3]  

while (ary.length) {  
    console.log(ary.pop())  
}

出力結果は↓のようになります。

3  
2  
1

pop()メソッドで配列の要素をポップした場合も、配列のlengthプロパティの値は変化します。
↑のコードはその性質を利用したコードです。

配列の先頭から値をポップする

配列の先頭から値をポップしたい場合はshift()メソッドを使います。

let ary = [1, 2]  
let el = ary.shift()  
console.log(el)  
// 1

↑のように先頭の要素が配列から取り除かれます。
こちらのshift()メソッドも、空の配列に使った場合はundefinedが返ります。

let ary = []  
let el = ary.shift()  
console.log(el)  
// undefined

CSVをパースして配列にする

CSVなどの文字列をパースして配列にする場合は文字列のsplit()を使います。
split()は引数の文字列をセパレーター（区切り文字）として、文字列を分解する文字列のメソッドです。
split()の返り値は配列です。

let csv = '1,2,3'  
let ary = csv.split(',')  
console.log(ary)  
// [ '1', '2', '3' ]

逆に配列をCSVにしたい場合は配列のjoin()メソッドを使います。
join()メソッドは引数の文字列をセパレーター（区切り文字）として配列の要素を文字列として結合するメソッドです。
join()の返り値は文字列です。

let ary = [1, 2, 3]  
let csv = ary.join(',')  
console.log(csv)  
// '1,2,3'

ここで紹介したCSVのパースは簡易的なものです。
本格的なCSVを扱いたいなら専用のライブラリを使いましょう。

配列の使い道

配列の使い道は多種多様。
色々なシーンで使われます。

たとえば名簿アプリだったら名簿を表現するのに配列を使うでしょう。

const meibo = ['田中', '山田', '川田']

他には数列を表現するのにも使われます。

const suretsu = [1, 2, 3, 4, 5, 6]

map()を使えば簡単に既存の配列を利用して数列が作成できます。

const ary = [1, 2, 3].map(el => el * 2)  
console.log(ary)  
// [2, 4, 6]

配列の使い道はアイデア次第で無限？に利用可能です。
自分の開発するソフトウェアの用途に合わせて配列を使ってください。

おわりに

JavaScriptの配列を使えるようになると、プログラムの制作が一段とはかどるでしょう。
この記事でJavaScriptの配列の基本的な使い方を学習し、あなたのプログラミングに役立ててみてください。

🦝 < 配列はともだち

ユーニックス総合研究所