JavaScriptで配列に要素を追加する方法は、主に３つあります。本記事では、それぞれの方法と使用例を紹介します。
1. push() メソッド
最もメジャーな配列への追加メソッドはpush()になります。push() メソッドは、配列の末尾に一つまたは複数の要素を追加し、新しい配列の長さを返します。使用例は以下のとおりです。
let fruits = ['apple', 'banana'];
let newLength = fruits.push('orange');
console.log(fruits); // 出力: ['apple', 'banana', 'orange']
console.log(newLength); // 出力: 3
2. unshift() メソッド
unshift() メソッドは、配列の先頭に一つまたは複数の要素を追加します。追加後の配列の新しい長さを返します。push()とは異なり、要素を配列の先頭に追加するのが特徴です。
let numbers = [2, 3, 4];
let newLength = numbers.unshift(1);
console.log(numbers); // 出力: [1, 2, 3, 4]
console.log(newLength); // 出力: 4
3. スプレッド演算子を使用する
ES6から導入されたスプレッド演算子（...）を使用すると、配列内で既存の配列を展開して新しい要素を追加することができます。これにより、既存の配列を変更せずに新しい配列を作成することができます。
let initialArray = ['a', 'b'];
let newArray = [...initialArray, 'c', 'd'];
console.log(newArray); // 出力: ['a', 'b', 'c', 'd']
この方法は、元の配列を変更せずに新しい配列を作成する場合に特に便利です。
まとめ
push() と unshift() は元の配列を変更（ミューテート）しますが、スプレッド演算子を使用した方法は新しい配列を作成します。これらの方法を適切に使い分けることで、JavaScriptでの配列操作をより効率的に行うことができます。
push・unshift・スプレッド演算子の違いは、元の配列を変えるかどうかを意識して使い分けると迷わなくなります。こうした基礎を順番に積み上げていきたい方に向いたコースも用意しています。
AIプログラミングスクール「SiiD」について
AIプログラミングスクール「SiiD」は、未経験からITエンジニア転職を目指す方向けのオンラインスクールです。
SiiDの特徴
- 現役エンジニアでYouTube登録者約13万人の「セイト先生」が代表兼主任講師
- 採用側の実務知見（2,000人以上の選考・150名以上のエンジニア採用）にもとづく指導
- 生成AIを取り入れた学習設計と、実務レベルのフルスタックWeb開発スキル
- Workship CAREER（株式会社GIG）と連携した無料の転職伴走支援
- 経済産業省認定のReスキル講座で、給付金の条件を満たせば実質105,600円〜
- 学割あり（35%オフ）
こんな方におすすめ
- 未経験・文系・社会人からITエンジニア転職を本気で目指したい方
- 独学に限界を感じている方
- 費用を抑えながら実務スキルと転職サポートを両立したい方
「未経験だから」とあきらめる必要はありません。採用する側を知り尽くしたプロが、給付金で負担を抑えながら内定まで伴走します。
