【JavaScript入門】配列の使い方と操作まとめ（初期化・追加・結合・検索・削除）

今回は、プログラミングを勉強するのに欠かせない重要な概念でもある「配列」の使い方について体系的に学習をしていきましょう！

本記事では以下のような構成で解説していきます！

この記事で、配列をしっかり学習してスキルアップを目指していきましょう！

＞＞＞ 今すぐ基本的な「配列の使い方」を知りたい方はこちら

「配列(Array)」とは？

それではまず最初に、配列について基本的な知識から学んでいきましょう。

配列を活用すると、複数の値をまるで1つのデータのように取り扱うことができるようになります。

例えば、変数は以下のように1つの値しか格納できませんよね？（オブジェクトデータは除く）

var text = 'こんにちは';

var num = 10;

上記のように、文字列や数値などの値を1つの変数に格納していきます。

しかし、10個や20個…または100個などもっと多くの値を扱いたい場合に、いちいち変数を1つずつ作るのは大変ですよね？

そのような時に、配列データを作成することで大量の値を1つのデータのように扱えるわけです。

JavaScriptではこのような配列型を扱うために「Arrayオブジェクト」が用意されています。

この「Array」を活用することで、配列の作成・追加・初期化・削除・検索…などを簡単に行えるようになります！

配列の使い方

では、配列の基本的な考え方を知ったところで、具体的な使い方についてサンプルコードと共にみていくことにしましょう。

配列を宣言する方法

まずは、JavaScriptで配列を使うために宣言（作成）する方法から学んでいきましょう！

配列の宣言には2種類の方法があります。

1つ目は配列コンストラクタ「Array」を使う方法で、2つ目は配列リテラル「[ ]」を使う方法になります。

次のサンプル例を見てください！

//①配列コンストラクタの例
var array1 = new Array('リンゴ', 'バナナ', 'イチゴ');

//②配列リテラルの例
var array2 = ['リンゴ', 'バナナ', 'イチゴ'];

console.log( array1 );
console.log( array2 );

実行結果

["リンゴ", "バナナ", "イチゴ"]

["リンゴ", "バナナ", "イチゴ"]

この例では、3つの果物名の文字列を配列に格納しています。

「①配列コンストラクタ」を使う場合は、「new」を使ってArray()の引数へ格納したい文字列を設定します

「②配列リテラル」を使う場合は、[ ]を使ってそのまま文字列を設定すればOKです！

どちらの方法でも同じ配列データが作成できているのを実行結果からも確認できますね。

この2種類の方法はいくつか相違点があるのですが、最も違うのは1つだけの数値を格納しようとした時に発生します。

次のサンプル例を見てください！

var array1 = new Array(5);
var array2 = [5];

console.log( array1 );
console.log( array2 );

実行結果

[empty × 5]

[5]

どちらの宣言方法にも「5」という数値を設定しているのが分かりますよね？

ところが、実行結果は大きく異なっています。実は、配列コンストラクタで「new Array(5)」と記述すると「5つ分の配列要素を用意する」という意味になるのです。

また、配列リテラルで「[5]」と記述すると「5という数値を配列に格納する」という意味になります。このような仕様のため、配列コンストラクタを使うと数値1つだけの配列データを作成できないわけです。

つまり、JavaScriptで配列を宣言（作成）する時は、特に理由がない限り「配列リテラル」を使うようにしましょう！

配列の初期化を行う方法

次は、すでに作成した配列データを初期化する方法について見ていきましょう！

ここで言う初期化というのは、配列データの中身を空っぽにするという意味になります。方法は簡単で、先ほどの配列を宣言する時に「値」を一切記述しなければ初期化を実現できます！

次のサンプル例を見てください！

var array = [];

console.log( array );

実行結果

[]

この例では、配列リテラルを使って「値」を設定せずに[ ]だけを記述しているのが分かりますね？

これにより、もし変数「array」に配列データが格納されていたとしても、初期化されて中身は空っぽの状態になるわけです。ちなみにですが、「new Array()」とだけ記述することで同じように初期化することもできます。

配列の初期化について、より具体的な活用事例については次の記事で体系的にまとめていますのでぜひ参考にしてみてください！

配列の要素を取得する方法

作成された配列変数の各要素を取得するためには、どうすれば良いのでしょうか？

その答えは以下のサンプルの通りです。

var _3nen5kumi = ['kato','sato','suzuki','tanaka','hayama'];

//１番目の要素
console.log('_3nen5kumi[0]:' + _3nen5kumi[0]);

//4番目の要素
console.log('_3nen5kumi[3]:' + _3nen5kumi[3]);

//6番目の要素(空っぽ)
console.log('_3nen5kumi[5]:' + _3nen5kumi[5]);

実行結果

_3nen5kumi[0]:kato
_3nen5kumi[3]:tanaka
_3nen5kumi[5]:undefined

取得したい配列変数の要素番号をカッコで指定することで、その要素の中身を取得することができました。

注意点としては繰り返しになりますが、要素番号（インデックス）は0番から始まるということです。また、上の例で6番目の要素を取ろうとしたところ、’undefined’という結果が得られました。

これは、最初に配列変数を宣言した際に、6番目の児童の名前を設定していないので、6番目の要素はありませんよということをJavaScriptがプログラマーに教えるために’undefined’(未定義）という変数が結果として得られる仕組みになっています。

配列の要素を検索する方法(indexOf)

配列内にある各要素のデータを簡単に検索できる方法が用意されているのでご紹介します！

最も手軽に検索する方法としては、「indexOf()」メソッドがあるので詳しく見ていきましょう。

「indexOf()」は、指定した「値」が配列データに存在する場合にその場所を「インデックス番号」で取得できる機能を持っています。

次のサンプル例を見てください！

var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];

var result = items.indexOf('リンゴ');

console.log( result );

実行結果

2

この例では、配列データに対して「indexOf(‘リンゴ’)」を記述することで、文字列「リンゴ」が存在するかを確認しています。

実行結果を見ると、インデックス番号が「2」なので配列の2番目の要素に「リンゴ」という文字列があることを示しています。とても直感的に使える検索手段ですよね。

次の記事では、配列データを検索できる他のメソッドも含めて基本的な使い方と活用事例をまとめているのでぜひ参考にしてみてください！

配列要素の追加と削除

配列の要素を追加する方法(push)

配列を使い始めるための宣言や初期化の方法を理解したところで、次に、配列に要素を追加したり、削除したりする方法をみていくことにしましょう。

例えば、ある小学校のクラスで転入生が入って来た場合を想定してサンプルコードを確認してみましょう。

var _3nen5kumi = ['kato','sato','suzuki','tanaka','hayama'];

console.log('夏休み前：' + _3nen5kumi);

// 夏休み中に転入生の前田くんが３年５組の仲間に加わった
_3nen5kumi[5] = 'maeda';

console.log('夏休み後：' + _3nen5kumi);


// 冬休み前に転入生の山田くんが３年５組の仲間に加わった
_3nen5kumi.push('yamada');

console.log('冬休み前：' + _3nen5kumi);

実行結果

夏休み前：kato,sato,suzuki,tanaka,hayama
夏休み後：kato,sato,suzuki,tanaka,hayama,maeda
冬休み前：kato,sato,suzuki,tanaka,hayama,maeda,yamada

上のサンプルでは要素（上の例では児童）を追加する方法を２つご紹介しています。

最初の方法は、追加したい配列の現在の一番後ろの要素番号（ここでは’hayama’君の4番)から1足した要素番号(5)を指定し、’maeda’君を代入する方法です。

そしてもう一つは、pushメソッドを使い要素を追加する方法です。

どちらが手間がかからない追加方法でしょうか？

そうです、pushメソッドを使えば、わざわざ一番後ろの要素を調べて指定する必要が無い分、とても楽に要素を追加することが可能です。

pushメソッドを更に詳しく知りたい場合は以下の記事を参考にしてください。

配列の要素を削除する方法(delete)

では、次に、ある小学校のクラスで他の学校に転校してしまう生徒がいた場合の想定で、配列の要素を削除する方法をみていくことにしましょう。

var _3nen5kumi = ['kato','sato','suzuki','tanaka','hayama'];


// ‘sato’君が転校することになった
delete _3nen5kumi[1];

console.log(_3nen5kumi);

実行結果

[ 'kato', , 'suzuki', 'tanaka', 'hayama' ]

配列の要素を削除するために、delete演算子を利用します。

削除したい要素のインデックスを指定することで、配列変数の中身の指定要素の箇所が空になっていることが確認できるかと思います。

配列の削除について更に詳しい内容を知りたい方は以下の記事が参考になります。

配列の結合と分割

配列を連結・結合する方法(join)

配列データを「連結・結合」する簡単な方法として、「join()」メソッドが用意されているのでご紹介します！

「join()」は、配列の各要素を連結・結合して「文字列（String）」として出力することができる機能を持っています。

例えば、次のサンプル例を見てください！

var items = [2018, 1, 10];

var result = items.join('/');

console.log( result );

実行結果

2018/1/10

この例では、数値が格納された配列データに対して「join(‘/’)」を実行しているのが分かりますね。join()の引数に「/」を指定していますが、これにより配列の各要素を「/」で連結することが出来るのです。

そして、最終的にすべての配列要素を結合すると実行結果のような日付の文字列を取得できるわけです！

ちなみに、join()の引数を何も指定しない場合は「カンマ区切り」の文字列を取得できます。

var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];

var result = items.join();

console.log( result );

実行結果

バナナ,イチゴ,リンゴ,メロン

join()の引数に何も指定していない点に注目してください。

実行結果を見ると、CSVなどでもよく使われるカンマ区切りの文字列が取得できているのが分かりますね！

配列データの「連結・結合」において、join()のさらに詳しい活用事例を次の記事でまとめているので参考にしてみてください！

配列を分割する方法(slice)

配列データを分割する方法として簡単なのは「slice()」メソッドを使うことです！

「slice()」は、指定した配列のインデックス番号を境目に分割して新しい配列データを取得することができる機能を持っています。

次のサンプル例を見てください！

var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];

var result = items.slice( 2 );

console.log( result );

実行結果

["リンゴ", "メロン"]

この例では、配列データに対して「slice( 2 )」と記述しているのが分かりますね。

これにより、配列の2番目のインデックス番号にある要素から末尾までを分割して新しい配列として取得できます。

ちなみに、配列のインデックス番号は0番目から数える点に注意しておきましょう。

また、slice()は「開始位置」「終了位置」の2つの値を引数に取ることもできます！

var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];

var result = items.slice( 1, 3 );

console.log( result );

実行結果

["イチゴ", "リンゴ"]

slic()の引数に注目してください！

この場合は、開始位置が「1」で終了位置が「3」になります。

そのため、インデックス番号が1番目から始まり3番目までを分割して結合することになります。（3番目は対象外なのに注意）

slice()についての更なる活用事例について、次の記事で詳しくまとめているのでぜひ参考にしてみてください！

配列のループ処理

この章では、配列の要素を効率よく操作するためのループ処理について見ていきましょう！

主に、forEach / filter / mapについてのメソッドを学んでいきます。

forEachで配列要素を繰り返し処理する

まずは、forEach文を使った配列要素の処理について見ていきましょう！

forEachは、配列データに対してのみ実行することが可能で、各要素1つずつに任意の処理を実行させることができます。

例えば、次の例では配列要素を1つずつコンソールに出力しています。

var items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ];
 
items.forEach(function( value ) {
     console.log( value );
});

実行結果

バナナ
リンゴ
メロン
ブドウ

forEach内のコールバック関数に、配列要素1つずつに実行させたい処理を記述するわけです。

このforEach文の基本から応用までの使い方について、次の記事で詳しくまとめているのでぜひ参考にしてみてください！

filterで配列要素を抽出する

次に、filterの使い方について見ていきましょう！

filterは、任意の条件に合致する配列要素だけを抽出して新しい配列データを作成することができます。

次の例では、数値データが格納された配列に対して任意の条件を設定しています。

var items = [5,2,7,8,3,1,6,8,4];
 
var result = items.filter( function( value ) {
 
    //5よりも小さい数値だけを抽出
    return value < 5;
 
})
 
console.log( result );

実行結果

[2, 3, 1, 4]

この例では、filter内のコールバック関数に「value < 5」という条件を設定していますね。

これにより、5よりも小さい数値の配列要素だけを抽出しているわけです。

filterのさまざまな活用方法については、次の記事で体系的にまとめているので参考にしてみてください！

mapで処理した要素を新しい配列で作成する

今度は、mapによる配列処理について見ていきましょう！

mapはforEachとよく似ていますが、最終的に新しい配列として生成してくれる点が大きく異なります。

例えば、次の例では数値データが格納された配列要素に対して、すべて2倍にする処理になります。

var items = [1,2,3,4,5];
 
var result = items.map(function( value ) {
 
    //配列の各要素を2倍にする
    return value * 2;
 
});
 
console.log( result );

実行結果

[2, 4, 6, 8, 10]

map内のコールバック関数にて配列要素1つずつに対して2を掛けているのが分かりますね。これにより、新しい配列へ2倍にした数値が次々と格納されていくわけです。

mapについて基本から応用までを次の記事で体系的にまとめているのでぜひ参考にしてみてください！

配列を便利に扱うメソッドやプロパティ

これまで配列について基本的な使い方を学んできました。

次には配列に関連するメソッドやプロパティを中心に紹介していきます。

配列はArrayクラスという大元となるクラスの機能を受け継いでおり、Arrayクラスには数多くの配列に関する便利なメソッドやプロパティが用意されています。

そのうち、よく使われる代表的なものをみていくことにしましょう。

配列をコピーするcopyメソッドの使い方

作成済みの配列をコピーして、そのコピーした配列を処理に使いたい場面があるかと思います。

そのような時、Arrayクラスのconcatメソッドを利用する方法があります。concatメソッドは指定した配列を対象の配列に連結するためのメソッドです。

ですが、対象の配列が空であれば、結果的に指定した配列と同一の内容の配列が得られるという仕掛けでコピーを行います。

文章ではわかりづらいかと思いますので、具体的な例をサンプルコードで確認してみましょう。

var _3nen5kumi = ['kato','sato','suzuki','tanaka','hayama'];
 
// concatメソッドの引数に何も追加しなければ、元の配列のコピーが得られる
var _4nen5kumi = _3nen5kumi.concat();
 
console.log('_3nen5kumi:' + _3nen5kumi);
console.log('_4nen5kumi:' + _4nen5kumi);

実行結果

_3nen5kumi:kato,sato,suzuki,tanaka,hayama
_4nen5kumi:kato,sato,suzuki,tanaka,hayama

上の例のように3年5組の配列と4年5組の配列の中身は同じであることが確認できます。

ポイントはconcatメソッドの引数を空にすることです。

要素の抽出を行うfilterメソッドの使い方

配列内の要素を抽出するのに便利なメソッドとしてfilterメソッドがあります。

このfilterメソッドを使いこなすことができると様々な処理を実現することができる、とても応用力のあるメソッドなので、初学者の方もぜひ根気よく以下の記事を繰り返し読んで学んでみてください。

配列の要素数を調べるlengthプロパティの使い方

次に配列の要素数を調べるメソッドについてみていきましょう。

配列の要素数を調べるにはlengthプロパティを活用します。詳しいlengthプロパティの使い方は以下の記事を参考にしてください。

配列を比較して重複・差分を求める

複数の配列があるときに、それぞれの要素を比較して重複している要素を抽出したり差分を求める方法について見ていきましょう。

まずは差分を求める方法について解説していきます。

差分を求めることで、例えばAという配列要素には存在しているけどBという配列要素には存在しない…という複雑な条件をもとにした配列要素を抽出することができます。

考え方としては、対象となる配列要素をすべて連結したあとに比較したい配列要素を1つずつ調べていく方法が簡単です。

次のサンプル例では、2つの配列要素を比較することでどちらかの配列要素に存在しない要素を抽出しています。

var arr1 = [1,5,9,7,8];
var arr2 = [4,7,8,2,5];

var result = arr1.concat(arr2).filter(function(item, index, self) {

  return arr1.indexOf(item) < 0;

})

console.log(result);

実行結果

[4, 2]

まず最初に「concat()」を使って2つの配列を連結している点に注目してください。

その後、filter()を利用して「arr1.indexOf(item) < 0」という条件を作ることで、配列「arr1」に存在しない要素を抽出しています。

実行結果を見ると「[4,2]」となり、arr2の要素にはあるけどarr1の要素にはないものがピックアップされていますね。今度は、配列要素のなかで重複している要素を抽出してみましょう！

次のサンプル例を見てください。

var arr = [2,9,5,1,5,2,3,7];

var result = arr.filter(function (item, index, self) {
  return self.indexOf(item) !== self.lastIndexOf(item);
});

console.log(result);

実行結果

[2, 5, 5, 2]

配列に対してfilter()を使い、indexOf()とlastIndexOf()で要素の先頭と末尾から配列要素を1つずつ調べて検索位置が異なる要素だけを抽出しています

先頭と末尾からで検索位置が異なるということは、同じ要素が複数あるという意味になるので重複していると判断できるわけです。

配列をソートする方法

配列要素はsort()メソッドを利用することで、効率よくソート（並び替え）を行うことができます。

例えば、配列要素内の文字列をアルファベット順に並び替えるには次のようにします。

var str = ['sa', 'mu', 'ra', 'i'];
str.sort();
 
console.log(str);

実行結果

["i", "mu", "ra", "sa"]

対象の配列要素に対してsort()を実行するだけですね。

文字列ではなく数値をソートする場合は、比較関数を使う必要があります。

function compareFunc(a, b) {
  return a - b;
}
 
var num = [5, 3, 10, 6, 55];
num.sort(compareFunc);
 
console.log(num);

実行結果

[3, 5, 6, 10, 55]

この比較関数を使っていない場合は文字列としてソートされてしまうので注意が必要です。

この比較関数の作り方やさらに複雑な配列のソート方法などについては、次の記事で詳しくまとめているので参考にしてみてください。

連想配列の使い方

配列の応用的な内容として連想配列についても紹介します。

連想配列は数字の要素番号（インデックス）の代わりに文字列をキーとして指定できる配列のことです。

詳しい内容は以下の記事を参考にしてください。

配列の基本的な使い方まとめ

最後に、配列の基本的な操作についてまとめておきます！

まず、配列の作成には「コンストラクタ」「リテラル」による書き方が使われます。

var array1 = new Array('リンゴ', 'バナナ', 'イチゴ');

var array2 = ['リンゴ', 'バナナ', 'イチゴ'];

var array3 = [];

「array1」がコンストラクタによる作成で「array2」がリテラルです。

また、「array3」のように空の配列を作成したり、既存の配列を初期化することもできます。

配列の要素を取得する場合は「インデックス番号」を指定します。

var array = ['kato','sato','suzuki','tanaka','hayama'];
 
//１番目の要素
console.log(array[0]);

配列の要素は1番目からではなく、0番目から数えるので注意しましょう。

配列要素に新しい要素を追加するときは「push」メソッドを使います。

var array = ['kato','sato','suzuki','tanaka'];

array.push = 'maeda';

配列要素に追加したい値をpushすることで、配列の一番末尾に追加されます。

特定の配列要素があるかどうかを検索したい場合は、文字列と同様に「indexOf」を利用します。

var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];
 
var result = items.indexOf('リンゴ');

検索したい値をindexOfの引数に指定すれば、配列要素1つずつに対して合致するかどうかをチェックできます。

配列の要素同士を連結・結合したい場合は「join」を使います。

var items = [2018, 1, 10];
 
var result = items.join('/');

この場合は、配列の要素同士を「/」で連結することで「2018/1/10」という文字列になります。

逆に、配列要素を分割したい場合は「slice」を使います。

var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];
 
var result = items.slice( 2 );

sliceの引数にどこから分割したいかのインデックス数を設定します。

この場合は2番目から分割するので「リンゴ,メロン」になるわけです。

まとめ

本記事では配列について基本的な内容から実践的なメソッドの使い方までをご紹介しました。

様々なプログラミングにおいて、利用機会がとても多い配列についてしっかり理解することができましたでしょうか？

配列の基本的な宣言や初期化、要素の追加・削除方法はpushメソッドなど便利なメソッドがたくさん用意されていました。これらのメソッドの使い方を必要な場面で適切に使いこなすことで、実践力のあるプログラマーへの第一歩を踏むことができます。

もし今後、配列に関して迷うことがあれば、ぜひこの記事を思い出して下さいね。