【基本】JavaScriptの配列にデータを追加する方法

（最終更新月：2023年10月）

✔このような方へ向けて書かれた記事となります

✔当記事を通じて理解できること

• JavaScript配列の追加操作の基礎
• JavaScriptで配列に要素を追加する具体的な手法とその応用
• JavaScriptの配列追加メソッドの実例

当記事では、JavaScriptで配列に要素を追加する基本的な手法から、さまざまなメソッドを用いた応用テクニックまで、具体的な例を通じて詳しくご説明します。

最後まで読んでいただければと思います。

配列とは？

こちらでは、「配列とは？」についてお伝えしていきます。

• 配列の基本的な定義と活用方法
• 配列の作成とアクセスの基本

配列の基本的な定義と活用方法

配列は、複数のデータをひとつの変数に格納できるデータ構造です。

複数の数字や文字列を順番に保存したい場合に使用します。

JavaScriptでは、[]を使って配列を作成します。

const dataArr = [1,2,3,4,5]

配列の作成とアクセスの基本

JavaScriptで配列を作成するには、以下のようにします。

let array = [1, 2, 3];

array[0]のようにインデックスを指定してアクセス可能です。

console.log(array[0]);
//1が出力

配列の操作法: インデックスを使う場合

こちらでは、「インデックスを使った配列の操作法」についてお伝えしていきます。

• インデックスの基本的な使い方
• インデックスを使った要素の追加と例

インデックスの基本的な使い方

インデックスは、配列の要素にアクセスするための番号です。

JavaScriptの配列のインデックスは0から始まります。

let fruits = ["apple", "banana", "cherry"];

インデックスでアクセスすると以下のとおり。

• fruits[0]：”apple”
• fruits[1]：”banana”
• fruits[2]：”cherry”

インデックスを使った要素の追加と例

要素を追加するには、指定したインデックスに値を代入します。

fruits[3] = "grape";

fruits配列に”grape”が追加されます。

pushメソッドによる配列操作

こちらでは、pushメソッドによる配列操作についてお伝えしていきます。

• pushメソッドの基本的な使用法
• 複数の要素を追加する際のpushメソッドの活用

pushメソッドの基本的な使用法

pushメソッドは、配列の最後にひとつ以上の要素を追加するためのメソッドです。

fruits.push("orange");

fruits配列の最後に”orange”が追加されます。

複数の要素を追加する際のpushメソッドの活用

pushメソッドは複数の要素を一度に追加も可能。

fruits.push("kiwi", "melon");

“kiwi”と”melon”が配列に追加されます。

unshiftメソッドによる配列操作

こちらでは、「unshiftメソッドによる配列操作」についてお伝えしていきます。

• unshiftメソッドの基本的な使用法
• 複数の要素を追加する際のunshiftメソッドの活用

unshiftメソッドの基本的な使用法

unshiftメソッドは、配列の先頭にひとつ以上の要素を追加するためのメソッドです。

例えば、以下のように使用します。

let animals = ["dog", "cat"];
animals.unshift("bird");
console.log(animals); // ["bird", "dog", "cat"]

複数の要素を追加する際のunshiftメソッドの活用

unshiftメソッドを使用して、複数の要素を一度に追加も可能です。

animals.unshift("fish", "hamster");
console.log(animals); // ["fish", "hamster", "bird", "dog", "cat"]

spliceメソッドによる配列操作

こちらでは、spliceメソッドによる配列操作についてお伝えしていきます。

• spliceメソッドの基本的な使用法
• 一部の要素を削除し、新たに要素を追加する方法

spliceメソッドの基本的な使用法

spliceメソッドは、配列から要素を削除したり、新しい要素を追加したりするためのメソッドです。

以下の例では、2番目の要素を削除しています。

let colors = ["red", "green", "blue"];
colors.splice(1, 1);
console.log(colors); // ["red", "blue"]

一部の要素を削除し、新たに要素を追加する方法

spliceメソッドを使用して、要素を削除しながら新しい要素を追加することもできます。

colors.splice(1, 1, "yellow", "purple");
console.log(colors); // ["red", "yellow", "purple"]

JavaScript配列操作のベストプラクティス

こちらでは、「JavaScript配列操作のベストプラクティス」についてお伝えしていきます。

• コードの可読性維持のためのヒント
• 配列操作時のパフォーマンス最適化のためのアドバイス

コードの可読性維持のためのヒント

配列操作を行う際、コードの可読性は非常に重要です。

コメントを活用して、何をしているのかを明確に示すことが推奨されます。

// 要素を配列の先頭に追加
animals.unshift("elephant");

配列操作時のパフォーマンス最適化のためのアドバイス

大きな配列を操作する際は、パフォーマンスの低下が懸念されます。

可能な限りループ処理を避け、組み込みのメソッドを活用することで、効率的な操作が可能です。

エラー対策と解決策

こちらでは、「エラー対策と解決策」についてお伝えしていきます。

• 配列操作時に頻発するエラーとその原因
• 具体的なエラー解決方法と例

配列操作時に頻発するエラーとその原因

配列操作時には、インデックスの範囲外へのアクセスや未定義のメソッドの使用など、さまざまなエラーが発生する可能性があります。

具体的なエラー解決方法と例

エラーの一例として、存在しないインデックスへのアクセスがあります。

このような場合、配列の長さを確認することでエラーを回避できます。

if (index < colors.length) {
    console.log(colors[index]);
} else {
    console.log("Index out of range");
}

まとめ

当記事では、JavaScriptの配列操作について学習してきました。

push, unshift, spliceなどのメソッドを活用して、効率的な配列操作をおこなえます。

ただし不適切な操作はエラーを引き起こす可能性があるため、注意が必要です。

常にコードの可読性を保ち、エラー対策を行うことで、安全な配列操作を実現しましょう。