【JavaScript】配列の扱い方

ここでは、JavaScriptの配列に関する基礎的な操作を解説する。

この記事でわかること
配列とは
配列の作成方法
配列の参照方法
配列の追加、削除
1. 配列の追加
2. 配列の削除
ループ（配列のよくある使い方）
配列の注意点
1. どうすれば良いのか？
まとめ

この記事でわかること

配列とは
配列の作成方法
配列の参照方法
配列の追加、削除
ループ
配列の注意点

配列とは

配列とは、同じ要素のデータを順序付きで格納しておくもの。

配列の作成方法

JavaScriptにおける配列の作成方法はシンプル。

[]を利用することで作成できる。

// 果物（文字列）一覧の配列を作成する
const fruitsList = ["apple", "banana", "orange"];
console.log(fruitsList);

// 出力結果
[ 'apple', 'banana', 'orange' ]

// 数字の一覧を作成する
const numberList = [1, 2, 3, 4, 5];
console.log(numberList);

// 出力結果
[ 1, 2, 3, 4, 5 ]

配列の参照方法

配列の中にある、特定の要素を取り出したい場合はインデックスを指定すれば取り出すことができる。

// 0番目の「apple」を取り出したい場合
const fruitsList = ["apple", "banana", "orange"];
console.log(fruitsList[0]);

// 実行結果
apple

ここで注意すべきことは

インデックスは「０」始まりであること
存在しないインデックスを指定してはいけないこと

// 0番目→apple
// 1番目→banana
// 2番目→orange
// 3番目→存在しない
const fruitsList = ["apple", "banana", "orange"];
console.log(fruitsList[3]);

// 実行結果
undefined

存在しないインデックスを指定してしまうと、結果が「undefined」になり、
バグに繋がる可能性があるため注意。

配列の追加、削除

配列の追加

配列の追加を行う場合はpushを利用する。

// ３つのデータを定義
const fruitsList = ["apple", "banana", "orange"];
// 「grape」を配列に追加
fruitsList.push("grape");
// 配列の中身を表示
console.log(fruitsList);

// 実行結果
[ 'apple', 'banana', 'orange', 'grape' ]

配列の削除

配列の削除を行う場合は、popもしくはshiftを利用する。

const fruitsList = ["apple", "banana", "orange"];
fruitsList.shift();  // 先頭の要素を削除する場合は「shift」
console.log(fruitsList);

// 実行結果
[ 'banana', 'orange' ]

const fruitsList = ["apple", "banana", "orange"];
fruitsList.pop();  // 最後の要素を削除する場合は「pop」
console.log(fruitsList);

// 実行結果
[ 'apple', 'banana' ]

popやshiftは削除した要素を返り値として返却しているので、「配列から取り出す」というイメージで使ってもOK。

const fruitsList = ["apple", "banana", "orange"];
const temp = fruitsList.pop();  // 取り出したデータを「temp」に一時的に入れておく
console.log(`取り出したデータ: ${temp}`);
console.log(`操作後の配列: ${fruitsList}`);

// 実行結果（最後のデータが取り出されている）
取り出したデータ: orange
操作後の配列: apple,banana

ループ（配列のよくある使い方）

配列が必要な場合、必ずと言っていいほどループ処理もセットで必要になる。

なぜなら、配列に格納したデータを次々に同じように処理していくのがループだからだ。

ここでは基本的なループの方法について２通り説明する。

①インデックスの番号を必要としない場合

これはシンプルに配列のデータを次々と処理していきたい場合に有効。　

for (一つのデータを入れておく変数名 of 配列の変数名)という形式で記述する。

const fruitsList = ["apple", "banana", "orange"];

for (fruits of fruitsList) {
  // 1ループ目はfruitsにfruitsList[0]が入っている
  // 2ループ目はfruitsにfruitsList[1]が入っている
  // 3ループ目はfruitsにfruitsList[2]が入っている
  console.log(fruits);
}

// 実行結果
apple
banana
orange

②インデックスの番号が必要な場合

インデックスが必要な場合は、一番基本的なfor文を利用するのがシンプル。

for (初回のみ実行する処理; ループを継続させる条件; ループごとに実行する処理)という構文で記述する。

const fruitsList = ["apple", "banana", "orange"];

// 最初にi=0を設定しておく
// fruitsList.lengthは配列の長さ。今回は「3」
// ループごとにi++でiのデータをインクリメントする
for (let i = 0; i < fruitsList.length; i++) {
  console.log(`${i}番目のデータ: ${fruitsList[i]}`);
}

// 実行結果
0番目のデータ: apple
1番目のデータ: banana
2番目のデータ: orange

// 各ループでは、実際には次のようになっている
// 1ループ目
console.log(`0番目のデータ: ${fruitsList[0]}`);
// 2ループ目
console.log(`1番目のデータ: ${fruitsList[1]}`);
// 3ループ目
console.log(`2番目のデータ: ${fruitsList[2]}`);
// 4ループ目→「i < fruitsList.length」=「3 < 3」となり、条件を達成しないためループされない

③その他（発展的な書き方）

ここで紹介する書き方はすぐには覚えなくても良い。

他人のコードを読む際に、「これもfor文と同じだ」と思えるようになっておけばOK。

// forEachを使った書き方
fruitsList.forEach((fruits) => {
  console.log(fruits);
});

// 上の省略形
fruitsList.forEach((fruits) => console.log(fruits));

配列の注意点

配列やオブジェクトは他の変数に代入する場合、注意していないと予期せぬ動きをするので注意が必要である。

// 配列Aを定義
const arrayA = ["apple", "banana", "orange"];

// 配列Aを、配列Bにコピー
const arrayB = arrayA;

// 配列Aに対してデータを削除
arrayA.shift();

// 配列Bには影響ないはずかと思いきや、、、
console.log(arrayB);

// 実行結果（配列Bから「apple」が削除されてしまっている）
[ 'banana', 'orange' ]

変数に入れた場合はまだ見やすいかもしれないが、
関数の引数に渡す場合も同様の問題が発生する。

こちらは特に見落としやすいので注意。

// 配列Aを定義
const fruitsList = ["apple", "banana", "orange"];

output(fruitsList);

console.log(`元の配列を再び使おうと思った時: ${fruitsList}`);

// 配列の最後の要素以外をconsole出力する関数
function output(array) {
  // 一旦最後のデータを消して出力すれば良いと考えて実装
  array.pop();
  console.log("関数実行");
  console.log(array);
}

// 実行結果（元の配列の中身を書き換えてしまっている）
関数実行
[ 'apple', 'banana' ]
元の配列を再び使おうと思った時: apple,banana

どうすれば良いのか？

では、このようなバグを引き起こさないためにはどうしたら良いのか？

何通りか方法があるが、一番シンプルなのはスプレッド構文を使うやり方だ。

// 配列Aを定義
const fruitsList = ["apple", "banana", "orange"];

output(fruitsList);

console.log(`元の配列を再び使おうと思った時: ${fruitsList}`);

// 配列の最後の要素以外をconsole出力する関数
function output(array) {
  // スプレッド構文により新しい配列を作成し、tempArrayに代入する
  const tempArray = [...array];
  tempArray.pop();
  console.log("関数実行");
  console.log(tempArray);
}

// 実行結果（元の配列には影響がなく、orangeが消えてない）
関数実行
[ 'apple', 'banana' ]
元の配列を再び使おうと思った時: apple,banana,orange