【JavaScript】pushメソッドで配列に要素を追加｜実例付

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

✔この記事はこんな方のために書かれています

✔当記事で学べること

• pushメソッドの基本的な概要
• 正しいpushメソッドの記述方法と利用方法
• 実際のpushメソッドの具体例

当記事では、Javascriptのpushメソッドの基本事項から、その具体的な使用法まで、実例を交えて説明します。

記事を最後まで読んで、pushメソッドの用途を最大限に活用する手法を学んでください。

JavaScriptと配列についての基本

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

基本を理解のうえ、本題のpushメソッドに進んでいきましょう。

• JavaScriptと配列について
• Pushメソッドの役割

JavaScriptと配列について

JavaScriptは、ウェブページの動的な動作を制御するための言語。

配列は、複数のデータをひとつの変数で管理するためのデータ構造です。

例えば、以下のように複数のフルーツの名前をひとつの変数で管理しています。

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

初心者でも簡単に扱えるので、多くのウェブアプリケーションで使用されています。

Pushメソッドの役割

Pushメソッドは、JavaScriptの配列に新しい要素を追加するためのメソッドです。

fruits.push("grape");

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

このメソッドを使うことで、動的にデータを配列へ追加できるのです。

JavaScript配列操作の基本

こちらでは、「JavaScript配列操作の基本」についてお伝えしていきます。

配列操作の基本を理解することで、データの管理や操作が効率的になるでしょう。

• 要素の追加について
• Pushメソッドの基本形

要素の追加について

配列に新しい要素を追加する方法はいくつかありますが、最も一般的なのがpushメソッドを使用する方法です。

let numbers = [1, 2, 3]; 
numbers.push(4);

このコードを実行すると、numbers配列に4が追加されます。

Pushメソッドの基本形

Pushメソッドの形式は以下のとおり。

配列名.push(追加する要素);

例はこちらです。

let animals = ["dog", "cat"]; 
animals.push("bird");

簡単に配列に新しい要素を追加できます。

Pushメソッドの詳細な構文と使用法

こちらでは、「Pushメソッドの詳細な構文と使用法」についてお伝えしていきます。

こちらを理解することで、配列操作の幅が広がるでしょう。

• 引数の役割
• 返値について

引数の役割

Pushメソッドは、複数の引数を受け取れます。

それにより、一度に複数の要素を配列に追加することが可能です。

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

この例では、”green” と “yellow” の2つの要素を一度に配列に追加しています。

返値について

Pushメソッドは、要素を追加した後の配列の長さを返します。

新しい要素が正しく追加されたかを確認するのに使える方法です。

let numbers = [1, 2, 3];
let newLength = numbers.push(4);
console.log(newLength); // 4

この例では、新しい要素を追加した後の配列の長さが4であることを確認しています。

Pushメソッドの実例と活用方法

こちらでは、「Pushメソッドの実例と活用方法」についてお伝えしていきます。

具体的な使用例を通じて、Pushメソッドの実用性を深めましょう。

• 配列への要素の追加例
• 二つの配列を結合する例
• オブジェクトを配列に逆変換する例

配列への要素の追加例

Pushメソッドを使用して、既存の配列に新しい要素を追加する基本的な例を見てみましょう。

let fruits = ["apple", "banana"];
fruits.push("cherry");
console.log(fruits); // ["apple", "banana", "cherry"]

このように、新しい要素 “cherry” が配列に追加されています。

二つの配列を結合する例

Pushメソッドとspread演算子を組み合わせることで、二つの配列を簡単に結合できます。

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
array1.push(...array2);
console.log(array1); // [1, 2, 3, 4, 5, 6]

この方法を使用すると、array2の全ての要素がarray1に追加されます。

オブジェクトを配列に逆変換する例

オブジェクトのキーと値を配列に変換する際にも、Pushメソッドが役立ちます。

let obj = {a: 1, b: 2, c: 3};
let keys = [];
let values = [];

for (let key in obj) {
    keys.push(key);
    values.push(obj[key]);
}
console.log(keys); // ["a", "b", "c"]
console.log(values); // [1, 2, 3]

この例では、オブジェクトのキーと値をそれぞれの配列に変換しています。

Pushメソッドを使った配列操作の拡張

こちらでは、「Pushメソッドを使った配列操作の拡張」についてお伝えしていきます。

配列操作のバリエーションを増やす方法を学ぶでしょう。

• Unshiftメソッドとの違い
• 要素の位置指定による要素の追加

Unshiftメソッドとの違い

Pushメソッドは配列の末尾に要素を追加しますが、Unshiftメソッドは配列の先頭に要素を追加します。

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

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

この例から、PushメソッドとUnshiftメソッドの動作の違いを確認できます。

要素の位置指定による要素の追加

PushやUnshift以外にも、spliceメソッドを使用して特定の位置に要素を追加できます。

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

この例では、”yellow”を”green”の前に追加しています。

まとめ

当記事では、Javascriptのpushメソッドについて学習してきました。

Pushメソッドは、JavaScriptでの配列操作の中心的なメソッドのひとつです。

データの動的な追加や変更を簡単におこなえて、多くのアプリケーションやウェブサイトで頻繁に使用されています。

今回学んだ基本的な操作をベースに、さらに高度な配列操作やアルゴリズムの実装に挑戦することで、JavaScriptのスキルをさらに向上させられるでしょう。