今回は、プログラミングを勉強するのに欠かせない重要な概念でもある「配列」の使い方について体系的に学習をしていきましょう!
目次
- 「配列(Array)」とは?
- 配列の使い方
- 配列要素の追加と削除
- 配列の結合と分割
- 配列のループ処理
- 配列を便利に扱うメソッドやプロパティ
- 配列を比較して重複・差分を求める
- 配列をソートする方法
- 配列の基本的な使い方まとめ
「配列(Array)」とは?
それではまず最初に、配列について基本的な知識から学んでいきましょう。
配列を活用すると、複数の値をまるで1つのデータのように取り扱うことができるようになります。
例えば、変数は以下のように1つの値しか格納できませんよね?(オブジェクトデータは除く)
var text = 'こんにちは';
var num = 10;
JavaScript上記のように、文字列や数値などの値を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 );
JavaScript実行結果
["リンゴ", "バナナ", "イチゴ"]
["リンゴ", "バナナ", "イチゴ"]
JavaScriptこの例では、3つの果物名の文字列を配列に格納しています。
「①配列コンストラクタ」を使う場合は、「new」を使ってArray()の引数へ格納したい文字列を設定します
「②配列リテラル」を使う場合は、[ ]を使ってそのまま文字列を設定すればOKです!
どちらの方法でも同じ配列データが作成できているのを実行結果からも確認できますね。
この2種類の方法はいくつか相違点があるのですが、最も違うのは1つだけの数値を格納しようとした時に発生します。
次のサンプル例を見てください!
var array1 = new Array(5);
var array2 = [5];
console.log( array1 );
console.log( array2 );
JavaScript実行結果
[empty × 5]
[5]
JavaScriptどちらの宣言方法にも「5」という数値を設定しているのが分かりますよね?
ところが、実行結果は大きく異なっています。実は、配列コンストラクタで「new Array(5)」と記述すると「5つ分の配列要素を用意する」という意味になるのです。
また、配列リテラルで「[5]」と記述すると「5という数値を配列に格納する」という意味になります。このような仕様のため、配列コンストラクタを使うと数値1つだけの配列データを作成できないわけです。
つまり、JavaScriptで配列を宣言(作成)する時は、特に理由がない限り「配列リテラル」を使うようにしましょう!
配列の初期化を行う方法
次は、すでに作成した配列データを初期化する方法について見ていきましょう!
ここで言う初期化というのは、配列データの中身を空っぽにするという意味になります。方法は簡単で、先ほどの配列を宣言する時に「値」を一切記述しなければ初期化を実現できます!
次のサンプル例を見てください!
var array = [];
console.log( array );
JavaScript実行結果
[]
JavaScriptこの例では、配列リテラルを使って「値」を設定せずに[ ]だけを記述しているのが分かりますね?
これにより、もし変数「array」に配列データが格納されていたとしても、初期化されて中身は空っぽの状態になるわけです。ちなみにですが、「new Array()」とだけ記述することで同じように初期化することもできます。
配列の要素を取得する方法
作成された配列変数の各要素を取得するためには、どうすれば良いのでしょうか?
その答えは以下のサンプルの通りです。
var _3nen5kumi = ['kato','sato','suzuki','tanaka','hayama'];
//1番目の要素
console.log('_3nen5kumi[0]:' + _3nen5kumi[0]);
//4番目の要素
console.log('_3nen5kumi[3]:' + _3nen5kumi[3]);
//6番目の要素(空っぽ)
console.log('_3nen5kumi[5]:' + _3nen5kumi[5]);
JavaScript実行結果
_3nen5kumi[0]:kato
_3nen5kumi[3]:tanaka
_3nen5kumi[5]:undefined
JavaScript取得したい配列変数の要素番号をカッコで指定することで、その要素の中身を取得することができました。
注意点としては繰り返しになりますが、要素番号(インデックス)は0番から始まるということです。また、上の例で6番目の要素を取ろうとしたところ、’undefined’という結果が得られました。
これは、最初に配列変数を宣言した際に、6番目の児童の名前を設定していないので、6番目の要素はありませんよということをJavaScriptがプログラマーに教えるために’undefined’(未定義)という変数が結果として得られる仕組みになっています。
配列の要素を検索する方法(indexOf)
配列内にある各要素のデータを簡単に検索できる方法が用意されているのでご紹介します!
最も手軽に検索する方法としては、「indexOf()」メソッドがあるので詳しく見ていきましょう。
「indexOf()」は、指定した「値」が配列データに存在する場合にその場所を「インデックス番号」で取得できる機能を持っています。
次のサンプル例を見てください!
var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];
var result = items.indexOf('リンゴ');
console.log( result );
JavaScript実行結果
2
JavaScriptこの例では、配列データに対して「indexOf(‘リンゴ’)」を記述することで、文字列「リンゴ」が存在するかを確認しています。
実行結果を見ると、インデックス番号が「2」なので配列の2番目の要素に「リンゴ」という文字列があることを示しています。とても直感的に使える検索手段ですよね。
配列要素の追加と削除
配列の要素を追加する方法(push)
配列を使い始めるための宣言や初期化の方法を理解したところで、次に、配列に要素を追加したり、削除したりする方法をみていくことにしましょう。
例えば、ある小学校のクラスで転入生が入って来た場合を想定してサンプルコードを確認してみましょう。
var _3nen5kumi = ['kato','sato','suzuki','tanaka','hayama'];
console.log('夏休み前:' + _3nen5kumi);
// 夏休み中に転入生の前田くんが3年5組の仲間に加わった
_3nen5kumi[5] = 'maeda';
console.log('夏休み後:' + _3nen5kumi);
// 冬休み前に転入生の山田くんが3年5組の仲間に加わった
_3nen5kumi.push('yamada');
console.log('冬休み前:' + _3nen5kumi);
JavaScript実行結果
夏休み前:kato,sato,suzuki,tanaka,hayama
夏休み後:kato,sato,suzuki,tanaka,hayama,maeda
冬休み前:kato,sato,suzuki,tanaka,hayama,maeda,yamada
JavaScript上のサンプルでは要素(上の例では児童)を追加する方法を2つご紹介しています。
最初の方法は、追加したい配列の現在の一番後ろの要素番号(ここでは’hayama’君の4番)から1足した要素番号(5)を指定し、’maeda’君を代入する方法です。
そしてもう一つは、pushメソッドを使い要素を追加する方法です。
どちらが手間がかからない追加方法でしょうか?
そうです、pushメソッドを使えば、わざわざ一番後ろの要素を調べて指定する必要が無い分、とても楽に要素を追加することが可能です。
pushメソッドを更に詳しく知りたい場合は以下の記事を参考にしてください。
配列の要素を削除する方法(delete)
では、次に、ある小学校のクラスで他の学校に転校してしまう生徒がいた場合の想定で、配列の要素を削除する方法をみていくことにしましょう。
var _3nen5kumi = ['kato','sato','suzuki','tanaka','hayama'];
// ‘sato’君が転校することになった
delete _3nen5kumi[1];
console.log(_3nen5kumi);
JavaScript実行結果
[ 'kato', , 'suzuki', 'tanaka', 'hayama' ]
JavaScript配列の要素を削除するために、delete演算子を利用します。
削除したい要素のインデックスを指定することで、配列変数の中身の指定要素の箇所が空になっていることが確認できるかと思います。
配列の結合と分割
配列を連結・結合する方法(join)
配列データを「連結・結合」する簡単な方法として、「join()」メソッドが用意されているのでご紹介します!
「join()」は、配列の各要素を連結・結合して「文字列(String)」として出力することができる機能を持っています。
例えば、次のサンプル例を見てください!
var items = [2018, 1, 10];
var result = items.join('/');
console.log( result );
JavaScript実行結果
2018/1/10
JavaScriptこの例では、数値が格納された配列データに対して「join(‘/’)」を実行しているのが分かりますね。join()の引数に「/」を指定していますが、これにより配列の各要素を「/」で連結することが出来るのです。
そして、最終的にすべての配列要素を結合すると実行結果のような日付の文字列を取得できるわけです!
ちなみに、join()の引数を何も指定しない場合は「カンマ区切り」の文字列を取得できます。
var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];
var result = items.join();
console.log( result );
JavaScript実行結果
バナナ,イチゴ,リンゴ,メロン
JavaScriptjoin()の引数に何も指定していない点に注目してください。
実行結果を見ると、CSVなどでもよく使われるカンマ区切りの文字列が取得できているのが分かりますね!
配列を分割する方法(slice)
配列データを分割する方法として簡単なのは「slice()」メソッドを使うことです!
「slice()」は、指定した配列のインデックス番号を境目に分割して新しい配列データを取得することができる機能を持っています。
次のサンプル例を見てください!
var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];
var result = items.slice( 2 );
console.log( result );
JavaScript実行結果
["リンゴ", "メロン"]
JavaScriptこの例では、配列データに対して「slice( 2 )」と記述しているのが分かりますね。
これにより、配列の2番目のインデックス番号にある要素から末尾までを分割して新しい配列として取得できます。
ちなみに、配列のインデックス番号は0番目から数える点に注意しておきましょう。
また、slice()は「開始位置」「終了位置」の2つの値を引数に取ることもできます!
var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];
var result = items.slice( 1, 3 );
console.log( result );
JavaScript実行結果
["イチゴ", "リンゴ"]
JavaScriptslic()の引数に注目してください!
この場合は、開始位置が「1」で終了位置が「3」になります。
そのため、インデックス番号が1番目から始まり3番目までを分割して結合することになります。(3番目は対象外なのに注意)
配列のループ処理
この章では、配列の要素を効率よく操作するためのループ処理について見ていきましょう!
主に、forEach / filter / mapについてのメソッドを学んでいきます。
forEachで配列要素を繰り返し処理する
まずは、forEach文を使った配列要素の処理について見ていきましょう!
forEachは、配列データに対してのみ実行することが可能で、各要素1つずつに任意の処理を実行させることができます。
例えば、次の例では配列要素を1つずつコンソールに出力しています。
var items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ];
items.forEach(function( value ) {
console.log( value );
});
JavaScript実行結果
バナナ
リンゴ
メロン
ブドウ
JavaScriptforEach内のコールバック関数に、配列要素1つずつに実行させたい処理を記述するわけです。
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 );
JavaScript実行結果
[2, 3, 1, 4]
JavaScriptこの例では、filter内のコールバック関数に「value < 5」という条件を設定していますね。
これにより、5よりも小さい数値の配列要素だけを抽出しているわけです。
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 );
JavaScript実行結果
[2, 4, 6, 8, 10]
JavaScriptmap内のコールバック関数にて配列要素1つずつに対して2を掛けているのが分かりますね。これにより、新しい配列へ2倍にした数値が次々と格納されていくわけです。
配列を便利に扱うメソッドやプロパティ
これまで配列について基本的な使い方を学んできました。
次には配列に関連するメソッドやプロパティを中心に紹介していきます。
配列は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);
JavaScript実行結果
_3nen5kumi:kato,sato,suzuki,tanaka,hayama
_4nen5kumi:kato,sato,suzuki,tanaka,hayama
JavaScript上の例のように3年5組の配列と4年5組の配列の中身は同じであることが確認できます。
ポイントはconcatメソッドの引数を空にすることです。
配列を比較して重複・差分を求める
複数の配列があるときに、それぞれの要素を比較して重複している要素を抽出したり差分を求める方法について見ていきましょう。
まずは差分を求める方法について解説していきます。
差分を求めることで、例えば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);
JavaScript実行結果
[4, 2]
JavaScriptまず最初に「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);
JavaScript実行結果
[2, 5, 5, 2]
JavaScript配列に対してfilter()を使い、indexOf()とlastIndexOf()で要素の先頭と末尾から配列要素を1つずつ調べて検索位置が異なる要素だけを抽出しています
先頭と末尾からで検索位置が異なるということは、同じ要素が複数あるという意味になるので重複していると判断できるわけです。
配列をソートする方法
配列要素はsort()メソッドを利用することで、効率よくソート(並び替え)を行うことができます。
例えば、配列要素内の文字列をアルファベット順に並び替えるには次のようにします。
var str = ['sa', 'mu', 'ra', 'i'];
str.sort();
console.log(str);
JavaScript実行結果
["i", "mu", "ra", "sa"]
JavaScript対象の配列要素に対してsort()を実行するだけですね。
文字列ではなく数値をソートする場合は、比較関数を使う必要があります。
function compareFunc(a, b) {
return a - b;
}
var num = [5, 3, 10, 6, 55];
num.sort(compareFunc);
console.log(num);
JavaScript実行結果
[3, 5, 6, 10, 55]
JavaScriptこの比較関数を使っていない場合は文字列としてソートされてしまうので注意が必要です。
配列の基本的な使い方まとめ
最後に、配列の基本的な操作についてまとめておきます!
まず、配列の作成には「コンストラクタ」「リテラル」による書き方が使われます。
var array1 = new Array('リンゴ', 'バナナ', 'イチゴ');
var array2 = ['リンゴ', 'バナナ', 'イチゴ'];
var array3 = [];
JavaScript「array1」がコンストラクタによる作成で「array2」がリテラルです。
また、「array3」のように空の配列を作成したり、既存の配列を初期化することもできます。
配列の要素を取得する場合は「インデックス番号」を指定します。
var array = ['kato','sato','suzuki','tanaka','hayama'];
//1番目の要素
console.log(array[0]);
JavaScript配列の要素は1番目からではなく、0番目から数えるので注意しましょう。
配列要素に新しい要素を追加するときは「push」メソッドを使います。
var array = ['kato','sato','suzuki','tanaka'];
array.push = 'maeda';
JavaScript配列要素に追加したい値をpushすることで、配列の一番末尾に追加されます。
特定の配列要素があるかどうかを検索したい場合は、文字列と同様に「indexOf」を利用します。
var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];
var result = items.indexOf('リンゴ');
JavaScript検索したい値をindexOfの引数に指定すれば、配列要素1つずつに対して合致するかどうかをチェックできます。
配列の要素同士を連結・結合したい場合は「join」を使います。
var items = [2018, 1, 10];
var result = items.join('/');
JavaScriptこの場合は、配列の要素同士を「/」で連結することで「2018/1/10」という文字列になります。
逆に、配列要素を分割したい場合は「slice」を使います。
var items = ['バナナ', 'イチゴ', 'リンゴ', 'メロン'];
var result = items.slice( 2 );
JavaScriptsliceの引数にどこから分割したいかのインデックス数を設定します。
この場合は2番目から分割するので「リンゴ,メロン」になるわけです。
チェックテスト
チェックテストを確認する
下記、配列に対して下記2つの動作を行うコードをdiscordで共有ください。
①文字列”PHP”を要素を取得するコード
②「console.log(programmings.indexOf(‘html’))」にて出力される値
配列
let programmings = ['html', 'css', 'JavaScript', 'PHP', 'Ruby'];
JavaScript