JavaScriptのunshift関数で配列に要素を追加する方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列に要素を追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• 配列とは
• 配列に要素を追加する方法
• 実際に書いてみよう
• まとめ

 

配列とは

配列とは複数の要素をまとめて扱う仕組みです。配列は以下のように定義します。

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

配列を使用することで、複数の要素をまとめて保持できる、要素に対してfor文などで繰り返し処理が行える、といったメリットがあります。配列について、詳しくは以下のサイトも参考にしてください。

MDN-Array

関連記事：JavaScriptで配列を比較する方法を現役エンジニアが解説【初心者向け】

関連記事：JavaScriptで指定した要素が配列に存在するかチェックする方法を現役エンジニアが解説【初心者向け】

 

[PR] フロントエンドで副業する学習方法を動画で公開中

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

配列に要素を追加するにはpush()関数、またはunshift()関数を使用します。

実際に書いてみよう

今回のサンプルプログラムでは、配列の作成と要素の追加方法について確認します。実行はChromeブラウザーのデベロッパーツールで行います。はじめに対象となる配列を定義して内容を確認しましょう。

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

for (i in fruits) {
  console.log(fruits[i]);
}

実行結果は以下のとおりです。

apple
orange
cherry

配列の最後に要素を追加するには push() 関数を使用します。push()関数は戻り値として新しい配列の長さを返します。

let idx = fruits.push("banana");
for (i in fruits) {
  console.log(fruits[i]);
}
console.log('idx:', idx);

実行結果は以下のとおりです。配列の最後に要素が追加されていることが分かります。またpush()関数の戻り値として新しい配列の長さである4が返されていることが確認できます。

apple
orange
cherry
banana
idx: 4

配列の先頭に要素を追加するにはunshift()関数を使用します。unshift()関数も戻り値として新しい配列の長さを返します。

idx = fruits.unshift("strawberry");
for (i in fruits) {
 console.log(fruits[i]);
}
console.log('idx:', idx);

実行結果は以下のとおりです。配列の先頭に新しい要素が追加され、全体の長さが5になっていることが確認できます。

strawberry
apple
orange
cherry
banana
idx: 5

 

まとめ

今回の記事ではJavaScriptで配列に要素を追加する方法を学習しました。

筆者プロフィール

太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。