JavaScriptの「push」で配列の追加を極める4つのコツ!

javascript-push-tutorial
マサト
書いた人 マサト

こんにちは、ライターのマサトです!

今回は、配列の要素を追加するのによく使われる「push」メソッドを学習していきましょう!

この記事では、

・「push」とは?
・配列に要素を追加する方法
・「push」の返り値について

という基本的な内容から、

・連想配列にデータを追加しよう
・配列にオブジェクトを追加しよう
・「push」「pop」の違いについて

などの応用的な使い方に関しても解説していきます。

この記事で、「push」メソッドをしっかり学習して自分のスキルアップを目指しましょう!

「push」とは?

それでは、まず最初に「push」の基本的な使い方から学習を始めましょう!

「push」はArray(配列)オブジェクトの組み込みメソッドとして用意されており、主に配列データの末尾に任意の要素を追加するために利用されます。

一般的な構文は次のようになります!

配列データに「 .(ドット) 」で繋げるように「push」を記述し、新しく追加する要素を指定するだけで使えるようになります。

追加する要素は、1つでも複数あっても構いません。

データの種類も、数値・文字列・配列・オブジェクト…など、さまざまなデータを追加することが可能です。

配列に要素を追加する方法

今度は、実際に「push」を使って配列へデータを追加してみましょう!

次のコード例を見てください。

実行結果

このサンプルでは、配列「items」に新しく数値データ「5,6,7,8」が追加されているのが分かります。

「push」メソッドで追加されたデータは、既存の配列末尾へ順番に追加されていくので、元のデータに変更が加えられるという点に注意をしましょう!

「push」の返り値について

実は、「push」メソッドには「返り値」として、配列の「要素数」を返してくれる機能があります。

次のサンプル例を見てみましょう!

実行結果

このサンプルのように、「push」の引数を空にして返り値を変数へ代入すると、その配列の「要素数」を取得することが出来るわけです。

つまり、「items.length」と同じ結果になるということですね。

連想配列では「push」を使えない?

JavaScriptには、通常の「配列」とは別に複雑な構造をした「連想配列(オブジェクト)」が存在します。

そして、ポイントは「push」メソッドが配列には使えるけど、連想配列には利用できないという点です!

例えば、次のコード例を見てください!

実行結果

このサンプルでは、配列「items」の中にもう1つ別の配列を追加した多次元配列を作成しています。

「push」を使って、配列の中に別の配列を追加するのは特に問題ありませんね。

今度は、連想配列の中に別の配列を追加してみましょう。

実行結果

この例では、連想配列「obj」を作成してその中に別の配列を追加しようとしているのですが、実行結果を見るとエラーになっているのが分かります。

このことから分かるように、「push」はあくまで配列の組み込みメソッドなので、連想配列(オブジェクト)には「push」というメソッドが用意されていないために利用できないわけです。

ちなみに連想配列に要素を追加するには、まだ連想配列にないキー文字列を指定して値を代入します。

疑似コードは以下のようになります。

連想配列への追加方法について詳しく知りたい方は以下の記事を参考にしてください。

配列にオブジェクトを追加しよう

JavaScriptのオブジェクトは、構造的には連想配列と同じです。

先ほども解説した通り、このオブジェクトの中にデータや配列などを「push」で追加することはできません。

しかし、配列の中にオブジェクトを追加することは可能なので、ちょっと実践してみましょう!

実行結果

このサンプルでは、配列「items」の中にオブジェクトデータを「push」メソッドで追加しているのが分かります。

つまり、「push」メソッドは配列データの中に文字や数値、配列やオブジェクトのような複雑なデータを追加することができるというわけですね。

また、多次元配列の中にある任意の配列にデータを追加する場合には次のようになります!

実行結果

元の配列データ「items」の中には2種類の「配列」と1つの「オブジェクト」が格納されています。

「items[1].push()」と記述することで、「items」の1番目の配列(「あ〜え」までの文字データ)に新しいデータを追加することが出来るわけです。

このサンプルでは、新しく文字データ「お」を挿入しているのが分かりますね!

当然ですが、「items[2].push( {four:4} );」のように記述してオブジェクトの中に別のデータを追加しようとするとエラーになります。(あくまで「push」は配列に利用できるメソッドなのです…)

「push」「pop」の違いについて

ここまで、「push」の使い方について学習してきましたが、JavaScriptにはよく似たメソッドとして「pop」が存在します。

どちらも配列の要素を操作するメソッドなのですが、「push」は配列の末尾にデータを追加するのに対して、「pop」は配列の末尾のデータを削除するために利用されます。

次のコード例を見てください。

実行結果

このサンプルでは、配列「array」に「pop」メソッドを使っており、実行結果から分かるように末尾の数値「5」が削除されているのが分かりますね。

「push」メソッドがデータの追加で、「pop」メソッドがデータの削除であるという点は勘違いしやすいので忘れいないようにしましょう!

まとめ

今回は、配列の「push」メソッドについて学習しました!

最後に、ポイントをもう一度まとめてみましょう!

・「push」は、配列の末尾に新しいデータを挿入する
・「push」を使うと、元の配列データに変更が加えられる
・返り値として配列の要素数を取得することができる
・連想配列(オブジェクト)には「push」が利用できない
・「push」はデータの追加で「pop」はデータの削除

となります!

上記内容が理解できるまで、繰り返しコードを書いてみてどのように実行されるかを確認するようにしておきましょう!

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

学習者インタビュー

23歳、早稲田中退生が3ヶ月でフリーランスエンジニアになるまで
32歳ベンチャー企業元役員が起業してプログラミングを学んだ話
元ディスクユニオン店員が33歳からプログラミングを学びエンジニアになるまで
ヨガスタジオのマネージャーだった私が3ヶ月でWeb制作をマスターするためにした”たった1つ”のこと
Uターン女子がRubyを学んで理想のライフスタイルを手に入れた話
新卒、文系出身エンジニアが語る、経験0からプログラミングができるようになった理由

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題!最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
Python学習カリキュラム無料公開中
 1記事最大10,000円!テック系ライターさん大大大募集!!!
LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。

JavaScript以外の趣味は、旅をしながらの登山やアジア巡りなど。