作成日:2025/4/14,最終更新日:2025/4/15

JavaScript / TypeScriptの配列について

配列に関する解説

この記事では、配列とは何かについて詳しく解説します。


1. 配列とは?

解説: 配列は、複数のデータを1つの変数としてまとめて扱えるデータ構造です。
変数との大きな違いは、1つの配列の中に複数のデータを格納することができる点です。
以下に例を示します。

// 配列は、複数の値を保存できる
const array = [1, 2, 3];
console.log(array[0]);       // 結果 : 1
console.log(array[1]);       // 結果 : 2

// 変数は、1つの値を保存できる
const text = 'おはよう!';
const num = 100;
console.log(text);        // 結果 : おはよう!
以上の例のように配列は、インデックスを指定するだけで複数の値を取り出せることが分かります。
使い方次第で様々なことができるようになるため、とても便利です!

2. 配列の宣言のやり方

解説: 変数と同様に、配列を使用する際にも宣言をする必要があります。
宣言の方法は、「配列コンストラクタ方式」と「配列リテラル方式」の2種類があります。

// 配列コンストラクタ
const array1 = new Array('春', '夏', '秋', '冬');

// 配列リテラル
const array2 = ['春', '夏', '秋', '冬'];

console.log(array1);        // 結果 : ['春', '夏', '秋', '冬']
console.log(array2);        // 結果 : ['春', '夏', '秋', '冬']
以上の例のように2方式ありますが、結果は同じになります。
そのため、個人的には、1つ目のコンストラクタ方式ではなく、2つ目のリテラル方式しか使っていません。
実際の業界においても、構文が簡潔な点や、もう一方に比べて若干高速な点などの利点があり、リテラル方式が標準となっています。

補足:2つの方式の1つの大きな違いについて
数値を1つ引数とした場合に挙動が変わります。覚えておくと便利です。
// 挙動の違いの例
const array1 = new Array(10);
const array2 = [10];

console.log( array1 );    // 結果 : [empty x 10]
console.log( array2 );    // 結果 : [10]
以上の例のように、同じ数値を使って配列を作成していますが、結果が全く異なることが分かります。
コンストラクタ方式では、数値を1つ渡すとその数を要素数とする空の配列が作成されるため、
「数値1つの要素を持つ配列は作れない」と覚えておいてください。

3. 配列の初期化方法

解説: 配列の作成時や繰返し利用するときに初期化する方法について
そもそも初期化ですが、入っている「データをリセットする」または、「空っぽにする」という意味になります。
やり方は、非常にシンプルで空の配列を代入するだけです。

// 初期化の例
let array = [1, 2, 3, 4];
console.log(array);         // 結果 : [1, 2, 3, 4]

array = [];
console.log(array);         // 結果 : []
以上の例のように、リテラル方式を使って値を設定せずに「[]」だけを使うことで初期化することができます。
ちなみに、コンストラクタ方式を使用したい場合は、「new Array()」と記載したらOKです。

4. 配列の要素の取得方法

解説: 配列の要素は、インデックス(要素番号)を指定することで取得できます。
その前に“要素”とは何かですが、これは配列に格納されている個々の“データ”のことを指します。
以下の例を示します。

// 配列の要素の取得の例
const class4 = ['saramu', 'kanna', 'arisa', 'kaito'];

// 1番目の要素
console.log('class4[0]:' + class4[0]);         // 結果 : class4[0]:saramu

// 4番目の要素
console.log('class4[3]:' + class4[3]);         // 結果 : class4[3]:kaito

// 5番目の要素
console.log('class4[4]:' + class4[4]);         // 結果 : class4[4]:undefined
以上の例のように、取得したい配列変数の要素番号をカッコ([])で指定することで、その要素の中身を取得できます。
ちなみに、例からも分かるように、インデックス(要素番号)は、0から始まる点に注意が必要です。
また、存在しないインデックスを指定すると、結果は「 undefined 」になりますので、こちらも注意してください。

5. 配列の要素の検索方法

解説: 配列の要素を検索する方法はいくつかありますが、ここでは手軽に使える「indexOf()」メソッドを紹介します。
こちらは配列内のデータを検索して、最初に見つかった要素番号(インデックス)を取得することができます。

// indexOf()を使用した、配列要素の検索
const items = ['scarf', 'globes', 'cap', 'socks'];

const result1 = items.indexOf('cap');
const result2 = items.indexOf('sweater');
const result3 = items.indexOf('Scarf');

console.log(result1);     // 結果 : 2
console.log(result2);     // 結果 : -1(検索結果無し)
console.log(result3);     // 結果 : -1(検索結果無し)
以上の例のように、「indexOf('cap')」を指定することで、その要素の番号を取得できることが分かります。
ちなみに、存在しない要素を指定すると、結果は「-1」になります。
検索は 完全一致 で行われるため、result3 のように大文字と小文字が異なると見つからない点に注意しましょう。