【JavaScript入門】配列の使い方と操作をまとめて理解する（宣言・初期化～結合・追加・削除） │ TechMania

プログラミングをする上で、配列は必ず必要になると言っても過言ではないほど重要な機能です。
JavaScriptに限らず、どの言語でも配列や、或いはそれに類似した機能を持つデータ型が用意されています。

今回の記事では、JavaScriptで配列を扱う方法について、基礎的な内容から様々なメソッドの使い方まで詳しく解説していきたいと思います。

1. JavaScriptの配列とは？
2. 配列の使い方
3. 配列の要素を追加・削除する
4. 配列を結合・分割する
- 4.1. joinメソッドで配列を結合する
- 4.2. sliceメソッドで配列を分割する
5. 配列のループ処理
6. 【応用】二次元配列を扱う
7. まとめ
8. JavaScriptの勉強方法は？

JavaScriptの配列とは？

配列とは、複数のデータを１つのまとまりとして扱うことができるデータ型のことを言います。
通常、１つの変数に対して格納できる値は１つのみなのに対し、配列の場合は複数の値をまとめて格納することができるのが大きな特徴です。

例えば、ある特定の処理に対して、必要なデータが複数存在するケースがあるとします。
通常の変数を使用してデータを管理する場合、以下のように存在するデータの数だけ変数を宣言することになります。

【サンプルコード】

const num1 = 1; 
const num2 = 2; 
const num3 = 3;

少ない数であれば、コード管理にそこまで大きく影響することはありませんが、実際には何十、何百といった膨大な数のデータを扱うことはざらにあります。
その時、変数を１つ１つ用意するのでは到底管理しきれません。

一方、配列であれば、扱うデータが膨大な数になったとしても、以下の様に１つの変数にまとめて扱うことができます。

【サンプルコード】

const numArray = [1, 2, 3];

追加や削除によって、配列内のデータの数を後から増減することもできるため、データ数が変動するケースでも容易に対応することが可能です。

配列の使い方

それでは早速、配列の詳しい使い方について確認していきましょう。

配列を宣言する

JavaScriptで配列を宣言する方法は、以下の2種類があります。

Arrayコンストラクターを使用する方法
配列リテラル([ ]) を使用する方法

Arrayコンストラクターを使用する場合は、以下のように記述します。

【サンプルコード】

const sampleArray1 = new Array(); 

// new を付けなくても宣言可能
const sampleArray2 =  Array();

new演算子の有無による動作の違いはなく、どちらも同じ挙動をするため、開発現場のルールなどに応じて使い分けしましょう。

配列リテラルを使用する場合は、以下のように記述します。

【サンプルコード】

const sampleArray = [];

コードの簡潔さや、後ほど解説する初期化時の動作の違いなどから、一般的には配列リテラルを使用する方法が推奨されています。

配列を初期化する

配列の宣言時に、初期化を同時に行うこともできます。
以下のサンプルコードを見てみましょう。

【サンプルコード】

// Arrayコンストラクターの場合
const sampleArray1 = Array(1, 2, 3);

// 配列リテラルの場合
const sampleArray2 = ["apple", "orange", "grape"];

console.log(sampleArray1);
console.log(sampleArray2);

【実行結果】

[ 1, 2, 3 ]
[ 'apple', 'orange', 'grape' ]

Arrayコンストラクターの場合は、配列に格納したい値を括弧の中にカンマで区切って記述します。
配列リテラルの場合は、リテラル内に同様の方法で値を記述します。

上記のようなケースの場合は、どちらの方法を使用しても得られる結果は同じとなりますが、場合によっては挙動が異なることがあります。
以下の例を見てみましょう。

【サンプルコード】

// Arrayコンストラクターの場合
const sampleArray1 = Array(3);

// 配列リテラルの場合
const sampleArray2 = [3];

console.log(sampleArray1);
console.log(sampleArray2);

【実行結果】

[ <3 empty items> ]
[ 3 ]

Arrayコンストラクターでは、指定した値が1つのみ、かつ整数であった場合に、配列に格納する要素の初期値ではなく、作成する配列に格納できる要素の数を指定したものとして認識します。
この場合、作成した段階ではメモリが確保されるだけで初期値が設定されていないため、別途で各要素に値を代入しなければなりません。

一方、配列リテラルの場合はその他のケースと変わらず、記述した内容がそのまま配列の初期値となります。
指定内容によって宣言時の動作が変化してしまうと、意図しない結果を引き起こす原因にもなりかねないため、基本的には配列リテラルを使用して宣言することをおすすめします。

配列の要素を取得する

続いて、格納した値を取り出す方法について見ていきましょう。

配列から値を取り出す際は、以下のように、対象となる要素のインデックスを配列名の後ろに記述して指定します。

【基本構文】

配列名[インデックス];

インデックスは、先頭の要素から順に 0,1,2…と自動で割り振られます。
以下のサンプルコードで実際の動きを見てみましょう。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape"];

const fruit1 = sampleArray[0];
const fruit2 = sampleArray[1];
const fruit3 = sampleArray[2];

console.log(fruit1);
console.log(fruit2);
console.log(fruit3);

【実行結果】

apple
orange
grape

同様の記述方法で、要素の値を再代入することもできます。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape"];
sampleArray[0] = "peach";
console.log(sampleArray);

【実行結果】

[ 'peach', 'orange', 'grape' ]

indexOfメソッドで配列の要素を検索する

配列を操作していると、特定の値が配列内のどの位置にあるかを検索したいケースが出てくる場合があります。
その際に活用できるのが、indexOfメソッドです。

indexOfメソッドを使用すると、検索対象の値が格納されている要素のインデックスを取得することができます。

以下のサンプルコードを見てみましょう。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape"];
const index = sampleArray.indexOf("grape");
console.log(index);

【実行結果】

このように、検索値が配列内に存在する場合は対象の要素のインデックス番号が戻り値として返されます。

検索値が配列内に存在しない場合は、インデックス番号の代わりに -1 が返されます。

lengthプロパティで配列の長さを取得する

値の有無などの代わりに、配列内の要素数を知りたいケースも時には出てきます。
その場合は、lengthプロパティを活用しましょう。

以下のように、「配列名.length」と記述することで、対象の配列内の要素数を取得することができます。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape"];

const length = sampleArray.length;

console.log(length);

【実行結果】

配列の要素を追加・削除する

配列では、変数の宣言後に要素を新たに追加したり、格納済みの要素を削除することもできます。
それぞれの方法について見ていきましょう。

配列の要素を追加する

配列に要素を新たに追加する際は、pushメソッドを使用します。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape"];

// 追加後の配列の要素数を返す
const length = sampleArray.push("peach");

console.log(length);
console.log(sampleArray);

【実行結果】

4
[ 'apple', 'orange', 'grape', 'peach' ]

pushメソッドを使用すると、引数に指定した値を新たな要素として配列の末尾に追加し、追加後の配列内の要素数を戻り値として返します。

メソッドの引数には、複数の値をカンマで区切って指定することができます。
また、スプレット構文(…) と組み合わせることで、別の配列の値を結合することも可能です。

【サンプルコード】

const sampleArray = [1, 2];

// 複数の要素を追加
sampleArray.push(10, 20);

// スプレット構文と組み合わせて配列を結合
sampleArray.push(...[100, 200]);

console.log(sampleArray);

【実行結果】

[ 1, 2, 10, 20, 100, 200 ]

配列の要素を削除する

反対に、配列内の要素を削除したい場合には、delete演算子を活用しましょう。
以下のように記述することで、指定したインデックスの要素を削除することができます。

【基本構文】

delete　配列名[インデックス];

以下のサンプルコードで、実際の動きを見てみましょう。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape"];

delete sampleArray[1];

console.log(sampleArray[0]);
console.log(sampleArray[1]);
console.log(sampleArray[2]);
console.log(sampleArray.length);

【実行結果】

apple
undefined
grape
3

delete演算子による削除は、配列から完全に要素を取り除くことではなく、厳密には undefinedを代入して値を未定義状態に戻すことを言います。
そのため、上記の結果のように、要素数やインデックスは削除前と同じ内容となります。

要素そのものを配列から削除したい場合には、以下のメソッドを活用しましょう。

shiftメソッド … 先頭の要素を削除
popメソッド … 末尾の要素を削除
spliceメソッド … 指定範囲を削除

JavaScriptにおける配列の要素の削除については、以下の記事でも解説しています。こちらも併せてご覧ください。

【JavaScript】配列の要素を削除する方法一覧

spliceメソッドで配列の要素を追加・削除・置換する

メソッドを使用する削除方法の中から、特に応用の効きやすい spliceメソッドについて紹介したいと思います。

spliceメソッドは、引数に指定した範囲の要素を配列から削除することができるメソッドです。
使用する際は、以下の構文で記述します。

【基本構文】

配列名.splice(開始位置, 削除数, 追加要素);

このメソッドでは、指定範囲の要素を削除するだけでなく、第３引数以降に指定した値を新たな要素として配列に追加することもできます。
また、配列から要素を削除した場合は、その要素を含む配列を戻り値として返します。

以下のサンプルコードで、実際の動作を見てみましょう。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape"];

const deleteVal = sampleArray.splice(1, 2);

console.log(sampleArray);
console.log(deleteVal);

// 値の追加のみも可能
sampleArray.splice(0, 0, "banana", "peach");

console.log(sampleArray);

【実行結果】

[ 'apple' ]
[ 'orange', 'grape' ]
[ 'banana', 'peach', 'apple' ]

このように、spliceメソッドを使用することによって、要素の追加・削除・置換を行うことができます。

ただし、上記の結果から分かるように、spliceメソッドは元の配列の中身が変更される破壊的メソッドの1つです。
元の配列の内容は変更せずに、結果を新たな配列として取得したい場合には、toSplicedメソッドを活用しましょう。

配列を結合・分割する

続いて、配列内の各要素を結合する方法や、指定の箇所で分割する方法について紹介します。

joinメソッドで配列を結合する

まずは、要素同士を結合する方法から見ていきましょう。
配列内の要素を１つの値としてまとめたい場合は、joinメソッドを活用することができます。

joinメソッドは、配列の各要素の値を結合し、１つの文字列として返すメソッドです。
引数に指定した区切り文字によって、結合する値同士を任意の文字で区切ることができます。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape"];

const joinStr = sampleArray.join(",");

console.log(joinStr);

【実行結果】

apple,orange,grape

このように、joinメソッドを使用することによって、CSVなどのよく使用されるデータ形式に変換することも可能です。
区切り無しの文字列を取得したい場合は、引数に空文字を指定することで実行できます。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape"];

// 空文字で区切りなしも可能
const joinStr1 = sampleArray.join("");

// デフォルトはカンマ
const joinStr2 = sampleArray.join();

console.log(joinStr1);
console.log(joinStr2);

【実行結果】

appleorangegrape
apple,orange,grape

sliceメソッドで配列を分割する

配列の内容を特定の位置で分割したい場合は、sliceメソッドを活用することができます。

sliceメソッドは、引数に指定した範囲の要素を取り出し、新たな配列として取得することができるメソッドです。
非破壊的メソッドのため、元の配列の中身を変更することなく、欲しい要素のみを取り出すことができるのが特徴です。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape", "peach", "banana"];

// 終了位置の指定がない場合は末尾までを取得
const result1 = sampleArray.slice(2);

// 終了位置の要素は結果に含まれない
const result2 = sampleArray.slice(1, 3);

console.log(result1);
console.log(result2);

// 元の配列の中身は変わらない
console.log(sampleArray);

【実行結果】

[ 'grape', 'peach', 'banana' ]
[ 'orange', 'grape' ]
[ 'apple', 'orange', 'grape', 'peach', 'banana' ]

メソッドの引数は全て省略可能で、引数無しで使用した場合は配列内の要素を丸ごとコピーした新たな配列が返されます。
spliceメソッドなどの破壊的メソッドを使用する必要がある際に、元の配列の内容を変更せずに処理を実行したい場合は、この方法と組み合わせて活用しましょう。

配列のループ処理

配列内の要素に対して処理を行う際によく活用されるのが、forEach や map などの反復処理メソッドです。
ここからは、配列に対して使用可能ないくつかの反復処理メソッドについて紹介していきます。

forEachメソッドで配列の各要素に対して処理を適用する

1つめは、いわゆるループ処理の一種としてよく活用されている forEach メソッドです。

forEachメソッドでは、対象の配列内の要素を１つずつ順に取り出し、引数に指定したコールバック関数の処理を実行することができます。

以下の例を見てみましょう。

【サンプルコード】

const sampleArray = ["apple", "orange", "grape", "peach", "banana"];

sampleArray.forEach(val => {
    console.log(val);
});

【実行結果】

apple
orange
grape
peach
banana

コールバック関数の引数 val に各要素の値が入るため、関数内で valを使用して値をコンソール表示することができています。
このように、forEachメソッドを使用してループ処理を実行することができます。

filterメソッドで配列の要素を抽出する

対象の配列から、特定の条件に一致する値のみを取り出したい場合に活用できるのが、filterメソッドです。
filterメソッドを使用することで、対象の配列から任意の条件に一致する要素を取り出し、新しい配列として取得することができます。

【サンプルコード】

const sampleArray = [5, 12, 3, 7, 15];

const resultArray = sampleArray.filter(num => {
    return num > 10;
});

console.log(resultArray);

【実行結果】

[ 12, 15 ]

上記のサンプルコードでは、数値が10よりも大きい要素のみを取り出しています。
このように、return文に記述した条件と値を比較し、trueとなった要素のみが結果として返されます。

mapメソッドで一定の処理を適用した新しい配列を作成する

各要素の値に対して処理を行い、その結果を新たな配列として取得したい場合には、mapメソッドを使用するのが有効的です。

mapメソッドは、forEachメソッドに似た動作をするメソッドです。
forEachと同様に、配列内の要素を１つずつ順に取り出し、コールバック関数の処理を実行します。

両者の違いは、メソッドの実行時に戻り値を返すか否かです。
forEachメソッドが戻り値を返さないのに対し、mapメソッドは各要素に対する処理を実行した結果を新たな配列として返します。

以下のサンプルコードで、実際の動作を見てみましょう。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];

const resultArray = sampleArray.map(num => {
    return num * 10;
});

console.log(resultArray);

【実行結果】

[ 10, 20, 30, 40, 50 ]

mapメソッドは非破壊的メソッドのため、使用しても元の配列に影響は及ぼしません。そのため、mapメソッドの後ろにsortメソッドなどの破壊的なメソッドを繋げて使用した場合でも、元の配列を変更することなく安全に操作することができます。

reduceメソッドで配列の要素を単一化する

最後に、reduceメソッドを紹介します。
このメソッドは、隣り合う要素に対して関数を実行する処理を繰り返し、最後のループで実行した演算結果を単一の値として取得することができるメソッドとなります。

文章だけでは少し分かりにくいかと思うので、以下のサンプルコードをもとに動作を確認していきましょう。

【サンプルコード】

const sampleArray = [10, 20, 30];

const result = sampleArray.reduce((num1, num2) => {
    console.log("num1：" + num1);
    console.log("num2：" + num2);
    return num1 + num2;
});

console.log("合計：" + result);

【実行結果】

num1：10
num2：20
num1：30
num2：30
合計：60

reduceメソッドのコールバック関数には、以下の４つの引数を指定することができます。

第1引数 … 処理中の要素の１つ前の要素か、１つ前のループで実行された関数結果、もしくは指定の初期値のいずれか
第2引数 … 処理中の要素
第3引数 … インデックス
第4引数 … メソッドで処理している配列

１回目のループでは配列の先頭要素、もしくは reduce メソッドの第２引数に指定した初期値のどちらかが、第１引数に渡されます。
上記のサンプルは初期値の指定が無いため、配列の先頭要素が渡されています。

２回目以降のループでは、前回のループの処理結果が第１引数に渡されます。
このサンプルの場合は、第１引数と第２引数の値を合算した結果が渡されていきます。

この処理を繰り返すことにより、最終的に配列内の全ての要素を合計した数がメソッドの戻り値として返されています。
このように、配列内の要素を１つの値にまとめたい時などに活用できるのが、reduceメソッドです。

【応用】二次元配列を扱う

最後に、配列の応用形式である二次元配列についても、大まかに解説していきます。

二次元配列の使い方

二次元配列は、配列の中にさらに配列が入れ子になって格納されている状態の配列のことを言います。
例えば、以下のような例です。

【サンプルコード】

const sampleArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 各要素へのアクセス方法
console.log(sampleArray[0][0]); // 1
console.log(sampleArray[1][1]); // 5
console.log(sampleArray[2][2]); // 9

二次元配列を宣言する際は、通常の配列の宣言時と同じように、入れ子とする配列をカンマで区切って記述します。
要素にアクセスする際は、1つ目でどの配列にアクセスするか、2つ目で指定した配列のどの要素にアクセスするかを順に指定します。

二次元配列でループ処理を行う

二次元配列に対してループ処理を行うとどうなるのか、以下の例で見てみましょう。

【サンプルコード】

const sampleArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

sampleArray.forEach(array => {
    console.log(array);
});

【実行結果】

[ 1, 2, 3 ]
[ 4, 5, 6 ]
[ 7, 8, 9 ]

各配列が要素の値として格納されているので、配列単位で引数に渡されています。
各配列内の要素を処理する際は、ここからさらにループ処理で回すか、インデックスを指定して要素を取り出す形となります。

flatメソッドで二次元配列を平坦化する

二次元配列の階層を一次元に平坦化させたい場合は、flatメソッドが活用できます。
以下の例を見てみましょう。

【サンプルコード】

const sampleArray = [
    [1, 2],
    [3, 4],
    [5, 6]
];

const resultFlat = sampleArray.flat()

console.log(resultFlat);

【実行結果】

[ 1, 2, 3, 4, 5, 6 ]

メソッドを使用した後の配列が、通常の一次元配列になっているのが分かりますね。

flatメソッドは非破壊的メソッドなので、元の配列の内容を変更したくない場合でも安全に使用することができます。

まとめ

いかがでしたか？今回は、JavaScriptで配列を扱う方法について解説しました。

配列は、JavaScriptでプログラミングをする上で、使用頻度がかなり高い重要な機能の１つです。
実際の開発でも使いこなせるように、しっかりと基礎を抑えて使い方に慣れるようにしていきましょう。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。