JavaScriptで配列に要素を追加する方法を、プログラミング初心者向けにわかりやすく、具体例を交えて解説します。配列は「複数のデータをまとめて管理できる箱」のようなものです。ここではその箱に新しいデータを入れる方法を学びます。
1. インデックスを使って追加する方法
配列には「順番」があります。0番目、1番目、2番目…と数えます。新しい要素を追加する場合、この順番を意識して追加できます。
let fruits = ['apple', 'banana'];
fruits[fruits.length] = 'orange'; // 配列の最後に 'orange' を追加
console.log(fruits); // ["apple", "banana", "orange"]
ここで fruits.length は配列の長さを返します。現在 fruits には2つの要素があるので fruits.length は 2 になります。
そのため fruits[2] = 'orange' と同じ意味になり、新しい要素が末尾に追加されます。
ポイント:
- 配列の末尾に追加するには便利ですが、インデックスを間違えると意図しない場所に入ってしまうことがあります。
- 例えば
fruits[5] = 'grape'とすると、途中の空白の要素ができてしまいます。
2. push メソッドで末尾に追加する方法
インデックスをいちいち考えなくても、push メソッドを使えば簡単に追加できます。
let fruits = ['apple', 'banana'];
fruits.push('orange'); // 末尾に1つ追加
console.log(fruits); // ["apple", "banana", "orange"]
fruits.push('grape', 'melon'); // 複数追加も可能
console.log(fruits); // ["apple", "banana", "orange", "grape", "melon"]
ポイント:
- 配列の末尾に安全に追加できる
- 複数の要素をまとめて追加できる
- 初心者でも扱いやすい方法
3. unshift メソッドで先頭に追加する方法
配列の先頭に要素を入れたい場合は、unshift メソッドを使います。
let fruits = ['apple', 'banana'];
fruits.unshift('orange'); // 先頭に追加
console.log(fruits); // ["orange", "apple", "banana"]
fruits.unshift('grape', 'melon'); // 複数追加も可能
console.log(fruits); // ["grape", "melon", "orange", "apple", "banana"]
ポイント:
- 先頭に追加したいときに便利
- 追加した順番がそのまま配列の先頭に並ぶ
4. 実際の例題で練習
例題1：好きな果物を配列に追加しよう
let myFruits = ['apple', 'banana'];
// pushを使って末尾に追加
myFruits.push('cherry');
console.log(myFruits); // ["apple", "banana", "cherry"]
例題2：新しい果物を先頭に追加してみよう
let myFruits = ['apple', 'banana'];
// unshiftを使って先頭に追加
myFruits.unshift('grape');
console.log(myFruits); // ["grape", "apple", "banana"]
例題3：インデックスで追加してみよう
let myFruits = ['apple', 'banana'];
// 配列の末尾にインデックス指定で追加
myFruits[myFruits.length] = 'orange';
console.log(myFruits); // ["apple", "banana", "orange"]
まとめ
- 末尾に追加したいとき →
pushが簡単で安全 - 先頭に追加したいとき →
unshiftを使う - 特定の位置に追加したいとき → インデックスを指定して追加できるが注意が必要
この3つを覚えると、配列への要素追加は自由自在になります。最初は push と unshift を中心に練習すると良いでしょう。
配列操作は他のデータ操作の基礎にもなるので、まずは簡単な例をいろいろ試して「どこに追加されるか」を確認するのがおすすめです。
まとめ（初心者向け）
| 方法 | どこに追加 | 書き方の例 |
|---|---|---|
| インデックス指定 | 配列の好きな位置 | fruits[fruits.length] = 'orange'; |
push | 配列の末尾 | fruits.push('orange'); |
unshift | 配列の先頭 | fruits.unshift('orange'); |
💡 ヒント
- 末尾に追加するなら
pushが簡単で便利 - 先頭に追加するなら
unshift - 自分で番号を管理したいときだけインデックスを指定する