こんにちは、ライターのマサトです！今回は、配列の要素を追加するのによく使われる「push」メソッドを学習していきましょう！
この記事では、
- 「push」とは？
- 配列に要素を追加する方法
- 「push」の返り値について
という基本的な内容から、連想配列へのデータの追加方法、配列へのオブジェクトの追加方法、「push」「pop」の違いについて、concatメソッドで配列を結合する方法などの応用的な使い方に関しても解説していきます。
この記事で、「push」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「push」とは？
それでは、まず最初に「push」の基本的な使い方から学習を始めましょう！
「push」はArray（配列）オブジェクトの組み込みメソッドとして用意されており、主に配列データの末尾に任意の要素を追加するために利用されます。一般的な構文は次のようになります！
var items = 配列データ; items.push( 追加する要素, 要素, 要素・・・ );
配列データに「 .（ドット） 」で繋げるように「push」を記述し、新しく追加する要素を指定するだけで使えるようになります。追加する要素は、1つでも複数あっても構いません。
データの種類も、数値・文字列・配列・オブジェクト…など、さまざまなデータを追加することが可能です。
配列に要素を追加する方法
今度は、実際に「push」を使って配列へデータを追加してみましょう！次のコード例を見てください。
var items = [1,2,3,4]; //配列「items」に数値データを追加する items.push( 5,6,7,8 ); console.log( items );
実行結果
[1, 2, 3, 4, 5, 6, 7, 8]
このサンプルでは、配列「items」に新しく数値データ「5,6,7,8」が追加されているのが分かります。「push」メソッドで追加されたデータは、既存の配列末尾へ順番に追加されていくので、元のデータに変更が加えられるという点に注意をしましょう！
「push」の返り値について
実は、「push」メソッドには「返り値」として、配列の「要素数」を返してくれる機能があります。次のサンプル例を見てみましょう！
var items = [1,2,3,4]; //要素数を取得する var result = items.push(); console.log( result );
実行結果
4
このサンプルのように、「push」の引数を空にして返り値を変数へ代入すると、その配列の「要素数」を取得することが出来るわけです。つまり、「items.length」と同じ結果になるということですね。
連想配列では「push」を使えない？
JavaScriptには、通常の「配列」とは別に複雑な構造をした「連想配列（オブジェクト）」が存在します。
そして、ポイントは「push」メソッドが配列には使えるけど、連想配列には利用できないという点です！例えば、次のコード例を見てください。
var items = [1,2,3,4]; items.push( [5,6,7,8] ); console.log( items );
実行結果
[ 1,2,3,4, [5,6,7,8] ]
このサンプルでは、配列「items」の中にもう1つ別の配列を追加した多次元配列を作成しています。「push」を使って、配列の中に別の配列を追加するのは特に問題ありませんね。
今度は、連想配列の中に別の配列を追加してみましょう。
var obj = { name:'太郎', age:30 };
obj.push( ['花子', 28] );
console.log( obj );
実行結果
Uncaught TypeError: obj.push is not a function
この例では、連想配列「obj」を作成してその中に別の配列を追加しようとしているのですが、実行結果を見るとエラーになっているのが分かります。
このことから分かるように、「push」はあくまで配列の組み込みメソッドなので、連想配列（オブジェクト）には「push」というメソッドが用意されていないために利用できないわけです。
ちなみに連想配列に要素を追加するには、まだ連想配列にないキー文字列を指定して値を代入します。疑似コードは以下のようになります。
arr[キー文字列] = 値 //新規キーと値をセット
連想配列への追加方法について詳しく知りたい方は以下の記事を参考にしてください。
配列にオブジェクトを追加しよう
JavaScriptのオブジェクトは、構造的には連想配列と同じです。先ほども解説した通り、このオブジェクトの中にデータや配列などを「push」で追加することはできません。
しかし、配列の中にオブジェクトを追加することは可能なので、ちょっと実践してみましょう！
var items = [1,2,3,4];
//オブジェクトを配列の中に追加する
items.push( {one: 1, two: 2, three: 3} );
console.log( items );
実行結果
[ 1,2,3,4, {one:1, two:2, three:3} ]
このサンプルでは、配列「items」の中にオブジェクトデータを「push」メソッドで追加しているのが分かります。つまり、「push」メソッドは配列データの中に文字や数値、配列やオブジェクトのような複雑なデータを追加することができるというわけですね。
また、多次元配列の中にある任意の配列にデータを追加する場合には次のようになります！
var items = [ [1 ,2 ,3 ], ['あ','い','う','え'], {one:1, two:2, three:3}];
//「items」の1番目の配列内に新しいデータを追加
items[1].push( 'お' );
console.log( items );
実行結果
[ [1 ,2 ,3 ], ['あ','い','う','え','お',], {one:1, two:2, three:3} ]
元の配列データ「items」の中には2種類の「配列」と1つの「オブジェクト」が格納されています。
「items[1].push()」と記述することで、「items」の1番目の配列（「あ〜え」までの文字データ）に新しいデータを追加することが出来るわけです。このサンプルでは、新しく文字データ「お」を挿入しているのが分かりますね。
当然ですが、「items[2].push( {four:4} );」のように記述してオブジェクトの中に別のデータを追加しようとするとエラーになります。（あくまで「push」は配列に利用できるメソッドなのです…）
「push」「pop」の違いについて
ここまで、「push」の使い方について学習してきましたが、JavaScriptにはよく似たメソッドとして「pop」が存在します。
どちらも配列の要素を操作するメソッドなのですが、「push」は配列の末尾にデータを追加するのに対して、「pop」は配列の末尾のデータを削除するために利用されます。次のコード例を見てください。
var array = [1,2,3,4,5]; array.pop(); console.log(array);
実行結果
[1,2,3,4]
このサンプルでは、配列「array」に「pop」メソッドを使っており、実行結果から分かるように末尾の数値「5」が削除されているのが分かりますね。
「push」メソッドがデータの追加で、「pop」メソッドがデータの削除であるという点は勘違いしやすいので忘れいないようにしましょう！
concatメソッドで配列を結合する方法
ここでは、concatメソッドで配列を結合する方法を解説します。concatメソッドは呼び出し元の配列の後ろに、引数に指定した配列を追加します。次のプログラムで確認してみましょう。
var array1 = ['sa', 'mu']; var array2 = ['ra', 'i']; var result = array1.concat(array2); console.log(result);
実行結果：
sa,mu,ra,i
このようにして、2つの配列を結合することができました。concatメソッドの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。
配列の使い方総まとめ
この記事では紹介しきれなかった配列の様々な使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。
まとめ
今回は、配列の「push」メソッドについて学習しました！
最後に、ポイントをもう一度まとめてみましょう！
・「push」は、配列の末尾に新しいデータを挿入する
・「push」を使うと、元の配列データに変更が加えられる
・返り値として配列の要素数を取得することができる
・連想配列（オブジェクト）には「push」が利用できない
・「push」はデータの追加で「pop」はデータの削除
となります！
上記内容が理解できるまで、繰り返しコードを書いてみてどのように実行されるかを確認するようにしておきましょう！
