配列とは？
値を配列に格納すると、それぞれの値に0から順にインデックス（添字）が自動的に割り振られます。
また、配列の値には、以下の種類のデータを格納することができます。
- 文字列型 : テキストや文字列を格納できます。
- 数値型 : 整数や小数を格納できます。
- 真偽値型 :
trueやfalseを格納できます。 - オブジェクト : オブジェクト（連想配列やクラスのインスタンスなど）を格納できます。
- 関数 : 関数を格納できます。
- 他の配列 : 配列の中に別の配列を含めることができます（多次元配列として使用）。
- null :
null値を格納できます。 - undefined :
undefined値を格納できます。
この記事では、リテラル表記（[]）を使用した配列の基本的な操作（宣言・初期化・取得・追加・削除・結合）と、その他の応用の操作やループ処理・連想配列(オブジェクト)・二次元配列について初心者向けに解説します。
配列の基本操作
JavaScriptの配列の（宣言・初期化・取得・追加・削除・結合）など、よく使用される基本的な操作方法について解説します。
配列の宣言
▶︎ 配列を作成するためには、値をリテラル表記（[]）で値を囲み、配列を宣言します。
例として、３つの文字列型のデータ「りんご」「メロン」「バナナ」を配列「fruits」として宣言し、コンソールに書き出してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
console.log(fruits);
「りんご」「メロン」「バナナ」が順番に格納された配列が書き出されていますね。
配列の初期化
▶︎ 配列を初期化する場合は、既に作成済みのデータを「値」を記述せずに宣言します。
例として、３つの値が入った配列を作成して、すぐに初期化してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
fruits = [];
console.log(fruits);
配列の値の取得
▶︎ 配列の特定の値を「取得」する場合は、配列[インデックス] と記述します。
例として、３つの値の入った配列を作成し、２つ目の値を「取得」してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
console.log( fruits[1] );
２つ目の値「メロン」 を取得できていますね。
0 から始まるから、２つ目の値を指定するときいはfruits[1] と書くよ！配列の値の代入（上書き）
▶︎ 配列に値を「代入（上書き）」する場合は、配列[インデックス] = 代入する値; と記述します。
例として、３つの値の入った配列を作成し、３番目の値に「ぶどう」を「代入」してみます。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
fruits[2] = "ぶどう";
console.log( fruits );
配列の３つ目に「ぶどう」を代入され、元の値の「バナナ」は「ぶどう」に上書きされていますね。
配列の値の追加：unshiftメソッド・pushメソッド
配列の値を「追加」する基本的な方法には、先頭に追加する方法と、末尾に追加する方法の２種類があります。
- pushメソッドを使う（配列の末尾に追加）
- unshiftメソッドを使う（配列の先頭に追加）
値を末尾に追加：pushメソッド
▶︎ 配列の値を「末尾に追加」する場合は、pushメソッドを使用して、配列.push( 値1,値2,値3, ... ); と記述します。
例として、３つの値が入った配列の末尾に値を追加してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
fruits.push ( "ぶどう" );
console.log ( fruits );
配列の末尾に値（ぶどう）が追加されていますね。
値を先頭に追加：unshiftメソッド
▶︎ 配列の値を「先頭に追加」する場合は、unshiftメソッドを使用して、配列.unshift( 値1,値2,値3... ); と記述します。
例として、３つの値が入った配列の先頭に値を追加してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
fruits.unshift ( "ぶどう" );
console.log ( fruits );
配列の値の削除：shiftメソッド・popメソッド
配列の値を「削除」するメソッドには、先頭を削除するメソッドと、末尾に削除するメソッドの２種類の方法があります。
末尾の値を削除：popメソッド
▶︎ 配列の「末尾を削除」する場合は、popメソッドを使用して、配列.pop(); と記述します。
例として、３つの値が入った配列の末尾の値を削除してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
fruits.pop();
console.log ( fruits );
配列の末尾に表示されるはずのバナナが削除されていますね。
先頭の値を削除：shiftメソッド
▶︎ 配列の「先頭を削除」する場合は、shiftメソッドを使用して、配列.shift(); と記述します。
例として、３つの値が入った配列の先頭の値を削除してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
fruits.shift ();
console.log ( fruits );
先頭に表示されるはずのりんごが削除されていますね。
配列の結合：concatメソッド
▶︎ 配列を「結合」する場合は、concatメソッドを使用して、配列1.concat(配列2); と記述します。
例として、３つの値が入った配列と２つの値が入った配列を結合してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
let vegetables = [ "なすび" , "きゅうり" ];
let foods = fruits.concat(vegetables);
console.log( foods );
配列「fruits」と配列「vegetables」を結合して、新しい配列「foods」を作成しました。
配列の複製(コピー)：concatメソッド
▶︎ 配列を「複製」する場合は、concatメソッドを使用して、配列.concat(); と記述します。
例として、３つの値が入った配列を複製してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
let fruits2 = fruits.concat();
console.log( fruits2 );
配列「fruits」を複製して、配列「fruite2」を作成しました。もちろん中身は同じですね。
要素の切り取り：spliceメソッド
▶︎ 配列の要素を「切り取る」場合は、spliceメソッドを使用して、切り取られた配列 = 元の配列.splice(開始位置,長さ); と記述します。
例として、３つの値が入った配列の２番目から２つ分の要素を切り取りましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
let fruits2 = fruits.splice(1,2);
console.log( fruits );
console.log( fruits2 );
作成した配列「fruits」の２番目から２つ分の要素を切り取るために fruits.splice(1,2); を指定して、「メロン」「バナナ」が切り取られていますね。
次に紹介するsliceメソッド違い、元の配列が切り取られる点に注意して下さい。
要素の抽出：sliceメソッド
▶︎ 配列の要素を「抽出」する場合は、sliceメソッドを使用して、抽出した配列 = 元の配列.slice(開始位置,終了位置※); と記述します。
※終了位置は、指定した直前の要素を指定することになるので注意。例えば要素の３つ目まで指定したい場合は「2」ではなく、「3」と指定する必要があります。
例として、３つの値が入った配列の２番目から３番目の要素を抽出してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
let fruits2 = fruits.slice(1,3);
console.log( fruits );
console.log( fruits2 );
作成した配列「fruits」の２番目から３番目の要素を抽出するために fruits.slice(1,3); を指定して、「メロン」「バナナ」が抽出されていますね。
前に紹介するspliceメソッドと違い、元の配列が影響がない点に注意して下さい。
その他の配列の操作
配列の基本的な操作のほかに、長さの取得、配列の検索、配列の並び替えを行う場合の操作方法について解説します。
配列の長さを取得：lengthプロパティ
▶︎ 配列の長さ（要素の数）を取得する場合は、lengthプロパティを使用して、配列.length; と記述します。
例として、３つの値が入ったの配列の長さを取得してみましょう。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
console.log( fruits.length );
配列の検索：includesメソッド・indexOFメソッド
配列の中身を「検索」する際に、よく使う次の２種類のメソッドを紹介します。
- includesメソッド … 配列内に値が存在する場合に「true」を返す
- indexOFメソッド … 配列内で最初に一致したインデックスを返す
配列内の値を検索：includesメソッド
▶︎ 配列内に指定した値が存在するかを知りたい場合は、 includesメソッドを使用して、配列.includes(確認したい値); と記述します。
例として、３つの値が入った配列の中から「メロン」が存在しているか「検索」してみます。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
console.log( fruits.includes("メロン") );
配列内にメロンが存在するので「true」が返ってきていますね。
配列内の値を検索：indexOFメソッド
▶︎ 配列内の指定した要素の最初のインデックスを知りたい場合は、 indexOFメソッドを使用して、配列.indexOF(確認したい値); と記述します。
例として、３つの値が入った配列の中から「メロン」のインデックスを検索してみます。
let fruits = [ "りんご" , "メロン" , "バナナ" ];
console.log( fruits.indexOf("メロン") );
配列の２番目にあるメロンのインデックス「１」が返ってきていますね。
最初に一致したインデックスを返すので、もし配列内に複数のメロンがあっても最初のメロンのインデックス「1」が返ってきます。
注意ポイント
配列の並び替え：sortメソッド・reverseメソッド
配列の中身を並び替えをするメソッドには基本的に、以下の２種類があります。
- reverseメソッド … 要素の順番を逆向きにする
- sortメソッド … 要素の順番を並び替える（文字列として昇順 or 数値として比較関数）
配列の要素の順番を逆向きにする：reverseメソッド
▶︎ 配列の要素を、逆向きに並び替える場合は、reverseメソッドを使用して 配列.reverse()と記述します。
例として、３つの値が入った配列を逆向きに並び替えてみましょう。
let fruits = [ "リンゴ" , "メロン" , "バナナ" , "グレープ" , "ピーチ" ];
console.log( fruits.reverse() );
逆向きに並び替えられていますね。
配列の要素の順番を並び替える：sortメソッド
▶︎ 配列の要素を、sortメソッドを使用して、文字列として昇順で並び替える場合は、配列.sort(); と記述します。
例として、「リンゴ、メロン、バナナ、グレープ、ピーチ」の順に値が入った配列を並び替えてみます。
let fruits = [ "リンゴ" , "メロン" , "バナナ" , "グレープ" , "ピーチ" ];
console.log( fruits.sort() );
５つの値が文字列として、昇順に並び替えられていますね。
ただし、数値「1, 30, 100, 4, 21」の順に入った配列を、同じ方法で並び替える場合は、文字列として昇順に並び替えられ、「1, 100, 21, 30, 4」となってしまいます。
数値を昇順に並び替える場合は以下の方法で記述する必要があります。
▶︎ 配列の要素を、sortメソッドを使用して、数値として並び替える場合は、配列.sort(比較関数)と記述します。
比較関数は２つの引数をとり、次のルールに沿って並び替えを行います。
| 戻り値 | 並び順（aが１つ目、bが２つ目の値） |
| 負の値の場合 | a b |
| 正の値の場合 | b a |
| ０ | 並び順を維持 |
以上を踏まえて、配列内の数値を昇順に並び替える場合は次のように記述します。
const numbers = [1, 100, 21, 30, 4]
numbers.sort(function (a, b) {
if( a < b ){
return -1; //戻り値が負の値なので、aをbの前に配置する
}
if( a > b ){
return 1; //戻り値が正の値なので、bをaの前に配置する
}
return 0; //並び順を維持する
});
console.log(numbers);
数値が昇順に並び替えられていますね。
配列のループ処理
配列の各要素を使って繰り返し処理（ループ処理）を行う、基本的な４種類のメソッドを解説します。
- forEachメソッド … 配列の各要素に対し、順番に処理を行う
- mapメソッド … 新しい配列を作成する
- filterメソッド … 新しい配列を作成する（特定の値を除く）
- reduceメソッド … 配列の要素を1つずつ順番に処理して、単一の値に集約する
これらのメソッドは全て、元の配列を変更することなく処理を実行します。
forEachメソッド
▶︎ 配列の各要素に対して繰り返し処理を行う場合は、forEachメソッドを使用して、以下のように記述します。
配列名.forEach(function(要素) {
// 要素ごとの処理
});
例として、３つの値が入ったの配列を順番にコンソールに出力してみましょう。
let fruits = ["リンゴ", "メロン", "バナナ"];
fruits.forEach(function(fruit) {
console.log(fruit);
});
このコードでは、配列内の各要素を引数 要素 として受け取り、それぞれの要素に対して処理を行います。
要素ごとに同じ処理を行いたい場合に便利なメソッドです。
ちなみに、同じ処理をアロー関数で書き換えると以下のようになります。
let fruits = ["リンゴ", "メロン", "バナナ"];
fruits.forEach((fruit) => {
console.log(fruit);
});
mapメソッド
▶︎ mapメソッドは、配列の各要素に対してコールバック関数を実行し、新しい配列を生成します。
mapメソッドを使用して新しい配列を作成する場合は、以下のように記述します。
新しい配列 = 配列名.map(function(要素) {
// 要素ごとの変換処理を行い、新しい値を返す
return 新しい値;
});
例として、３つの値が入ったの配列を順番にコンソールに出力してみましょう。
let fruits = ["apple", "melon", "banana"];
let FRUITES = fruits.map(function(fruit) {
return fruit.toUpperCase();
});
console.log(FRUITES);
このコードでは、map() メソッドを使用して fruits 配列内の各要素を大文字に変換し、新しい配列 FRUITS に格納しています。
filterメソッド
▶︎ filterメソッドで、配列の要素をフィルタリングして新しい配列を生成する場合は、以下のように記述します。
コールバック関数の条件を満たす要素だけが新しい配列に含まれます。
新しい配列 = 配列.filter(function(要素) {
// フィルタリングの条件を記述し、条件を満たす要素を返す
return 条件;
});
例として、３つの値が入ったの配列をフィルターにかけてコンソールに出力してみましょう。
let fruits = ["apple", "melon", "banana"];
let filteredFruits = fruits.filter(function(fruit) {
return fruit.length >= 6;
});
console.log(filteredFruits);
このコードでは、filter() メソッドが fruits 配列の各要素に対して、文字数が6文字以上かどうかの条件でフィルターをかけて新しい配列を生成しています。
reduceメソッド
▶︎ reduceメソッドで、配列の要素を1つずつ順番に処理して、単一の値に集約する場合は、以下のように記述します。
let 結果 = 配列名.reduce(function(累積値, 現在の値) {
// 累積値と現在の値に対する処理を行い、更新された累積値を返す
return 更新された累積値;
}, 初期値);
reduceメソッドの主なポイントは以下の通りです。
- reduce() メソッドが配列の要素を先頭から順に処理し、累積値 を更新していきます。
- 累積値 は処理中に更新される値であり、現在の値 は現在処理している要素の値です。
- 更新された累積値 は、累積値を更新した後の値を返し、次の要素の処理に渡されます。
- 初期値 を指定することで、最初の累積値を設定することができます。
例として、５つの値が入ったの配列を加算して、一つの数値に集約してみましょう。
let numbers = [10, 20, 30, 40, 50];
let total = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(total);
[10, 20, 30, 40, 50]が加算されて、150が書き出されましたね。
このコードでは、reduce() メソッドが numbers 配列の各要素を順に加算しています。
初期値として 0 を指定し、初めの要素から順に、それまでの合計値（ここでは accumulator）に現在の要素を加えて新しい合計値を生成しています。
連想配列の基本
連想配列とは、要素のインデックス(添字)の代わりに、文字列を指定した配列です。
一つの要素が「キー : 値」になっているのが特徴です。
連想配列の作り方（宣言）
連想配列の宣言は、値を中括弧 {}値を囲み、その中にキーと値のペアを記述します。
これにより、JavaScriptのオブジェクトが作成されます。（オブジェクトとは、データや関数をまとめて管理するためのデータ構造のことです。）
例として、３つの要素が入った連想配列を作ってみましょう。
let fluits = {
'赤い' : 'りんご',
300 : 'メロン',
yellow : 'バナナ'
};
console.log( fluits );
「キー」と「値」がセットになった要素が３つ書き出されていますね。
しかし、ご覧の通り順番が保証されるわけではない点に注意しましょう。
連想配列の値の取得
連想配列の値の取得は、[]（ブラケット）を使用する方法と .（ドット）を使用する方法の２種類があります。
- []（ブラケット）を使用 … 配列名 [ キー名 ] ; と記述して取得
- .（ドット）を使用 … 配列名 . キー名 ; と記述して取得
例として、この２種類の取り出し方法を使って、連想配列からりんごとバナナを取得してみましょう。
let fruits = {
'赤い': 'りんご',
300 : 'メロン',
yellow : 'バナナ'
};
console.log ( fruits [ '赤い' ] );
console.log ( fruits . yellow );
キーに「'赤い'」と「yellow」を指定することで、りんごとバナナを取得することができました。
連想配列の値の追加
連想配列の値の追加も、[]（ブラケット）を使用する方法と .（ドット）を使用する方法の２種類があります。
- []（ブラケット）を使用 … 配列名 [ キー名 ] = 値 ; と記述
- .（ドット）を使用 … 配列名.キー名 = 値 ; と記述
例として、この２種類の方法を使って、値を追加してみましょう。
let fruits = {
' 赤い ': ' りんご ',
300 : ' メロン ',
yellow : ' バナナ '
};
fruits [ 'ピンクの' ] = ' 桃 ';
fruits . red = ' さくらんぼ '
console.log (fruits);
元の配列に、「ピンクの : 桃 」と「red : さくらんぼ」が追加されていますね。
多次元配列（二次元配列）の基本
多次元配列とは、配列の中に配列の入った配列です。
[]（ブラケット）や、{}（波括弧）で囲われた配列を、さらに[]（ブラケット）で囲うことで作成できます。
二次元配列の作り方（宣言）
配列の中に配列が入った配列が、二次元配列です。
配列どうしを「,」（カンマ）で区切って、 []（ブラケット）で囲むことで作ることができます。
それでは、「果物」が入った配列を普通の配列に入れて二次元配列を使って作ってみましょう。
let fruits = [
[ 'いちご' , 'さくらんぼ' ],
[ 'マンゴー' , 'みかん' ],
[ 'メロン' , 'スイカ' ]
];
console.log ( fruits );
各配列が一つの要素として、インデックス番号が割り振られていますね。これが二次元配列です。
二次元配列の値の取得
二次元配列の値の取得は、[]（ブラケット）を使用し、配列名[インデックス番号] と記述します。
それでは、先ほどの二次元配列から [ 'メロン' , 'スイカ' ] を取り出してみましょう。
let fruits = [
[ 'いちご' , 'さくらんぼ' ],
[ 'マンゴー' , 'みかん' ],
[ 'メロン' , 'スイカ' ],
];
console.log ( fruits [ 2 ] );
console.log ( fruits [ 2 ] ); と指定することで３番目の配列[ 'メロン' , 'スイカ' ] が取り出せていますね。
二次元配列の追加
二次元配列の配列の追加は、push()メソッドを使用して、配列.push( 追加する値 ) と記述します。
二次元配列の既に存在する配列内に値を追加するは、配列[○番目の配列の].push( 追加する値 ) と記述します。
例として、新たな配列[ 'なし' , 'ラ・フランス' ] を追加し、
既に存在する配列 [ 'メロン' , 'スイカ' ] に、新たな値「キウイ」を追加してみましょう。
let fruits = [
[ 'いちご' , 'さくらんぼ' ],
[ 'マンゴー' , 'みかん' ],
[ 'メロン' , 'スイカ' ],
];
fruits.push([ 'なし' , 'ラ・フランス' ]) ;
fruits [2].push( 'キウイ' );
console.log ( fruits );
値（キウイ）と、配列（なし、ラ・フランス）が追加されていますね。
最後に
JavaScriptの配列は、情報を組織化して効果的に扱う強力なツールです。
push や pop などのメソッドを活用してデータを追加・削除し、forEach や map でデータを操作することで、柔軟な処理が可能です。また、sort や filter、reduce を駆使すれば、データの整理や集計もスムーズに行えます。
これらの機能を上手に使いこなし、配列をマスターすれば、プログラムの可能性が広がります。ぜひ実際のプロジェクトで試してみて、その便利さを実感してみましょう。
javascriptについて、もっと詳しく学習したい方は、下の記事一覧から他の記事もご覧下さい。
-
Javascript
javascriptの基本的な使い方について解説した記事一覧ページです。
イラストを交えてやさしく解説していますので、ぜひご覧ください。続きを見る
