JavaScriptで配列に要素を追加する5つの方法がわからない？買い物リストで完全理解

JavaScriptで配列を扱っていて、「要素を追加したいけど、どうやればいいの？」と悩んだことはありませんか？

こんにちは、とまだです。

実は私も最初、配列への要素追加でかなり混乱しました。プログラミングスクールで教えていた時も、「pushとunshiftの違いがわからない」という質問を本当によく受けたんです。

でも大丈夫です。

今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、JavaScriptの配列に要素を追加する方法について解説します。

なぜ配列への要素追加でみんなつまずくのか

配列への要素追加でつまずく理由は簡単です。

「方法が多すぎて、どれを使えばいいかわからない」からです。

私がプログラミングスクールで教えていた時、生徒さんから「pushとunshiftって結局どっちがどっちなんですか？」という質問を何度も受けました。

確かに混乱しますよね。

実際の開発では、こんな場面で配列への要素追加が必要になります。

• ToDoリストアプリ：新しいタスクを追加
• ショッピングカート：商品をカートに追加
• チャットアプリ：新しいメッセージを表示

でも、間違った方法を使うとこうなります。

// ❌ よくある間違い
let todoList = ["買い物", "洗濯"];
todoList = "掃除";  // 配列が文字列に置き換わってしまう！
console.log(todoList);  // "掃除" （配列じゃなくなった...）

これ、私も最初にやってしまった失敗です。配列自体を上書きしちゃったんですよね。

だから正しい方法を知ることが大切なんです。

配列への要素追加は買い物リストと同じ

簡単に言うと、JavaScriptの配列への要素追加は買い物リストと同じです。

買い物リストを想像してみてください。

• リストの最後に「牛乳」を追加
• リストの最初に「急ぎで買うパン」を追加
• リストの3番目に「忘れていた卵」を挿入

JavaScriptの配列も、まったく同じように操作できます。

5つの要素追加方法（使い分けが重要）

1. push() - 最後に追加（最も基本）

let fruits = ["りんご", "みかん"];
fruits.push("ぶどう");
console.log(fruits);  // ["りんご", "みかん", "ぶどう"]

// 複数も一度に追加できる
fruits.push("もも", "なし");
console.log(fruits);  // ["りんご", "みかん", "ぶどう", "もも", "なし"]

push()は配列の最後に追加します。買い物リストの最後に項目を書き足すイメージです。

2. unshift() - 最初に追加

let tasks = ["メール返信", "資料作成"];
tasks.unshift("緊急：会議準備");
console.log(tasks);  // ["緊急：会議準備", "メール返信", "資料作成"]

緊急のタスクを最初に持ってきたい時に便利です。

3. splice() - 好きな位置に追加

let colors = ["赤", "青", "黄"];
// splice(開始位置, 削除数, 追加する要素)
colors.splice(1, 0, "緑");
console.log(colors);  // ["赤", "緑", "青", "黄"]

splice()の引数は：

• 開始位置：どこから操作を始めるか（0から数える）
• 削除数：何個削除するか（追加だけなら0）
• 追加する要素：何を追加するか

4. インデックス指定 - 直接追加

let items = ["A", "B", "C"];
items[3] = "D";  // インデックス3（4番目）に追加
console.log(items);  // ["A", "B", "C", "D"]

シンプルですが、飛び番には注意。

let items = ["A", "B", "C"];
items[5] = "F";  // 飛び番で追加
console.log(items);  // ["A", "B", "C", empty × 2, "F"]

空の要素ができてバグの原因になるので、通常は避けましょう。

これも私が実際にやらかしたミスです。「なんでundefinedが混じってるの？」ってかなり悩みました。

5. concat() - 新しい配列を作成

let fruits1 = ["りんご", "みかん"];
let fruits2 = ["ぶどう", "もも"];
let allFruits = fruits1.concat(fruits2);

console.log(allFruits);  // ["りんご", "みかん", "ぶどう", "もも"]
console.log(fruits1);    // ["りんご", "みかん"]（変更されない）

元の配列を変更したくない時に使います。

実践：ToDoリストを作ってみよう

実際にToDoリストを作って、使い分けを理解しましょう。

let todoList = [];

// タスクを追加する関数
function addTask(task, isUrgent = false) {
    if (isUrgent) {
        // 緊急タスクは最初に
        todoList.unshift("【緊急】" + task);
    } else {
        // 通常タスクは最後に
        todoList.push(task);
    }
    console.log("現在のタスク数：" + todoList.length);
}

// 特定の位置にタスクを挿入
function insertTask(position, task) {
    todoList.splice(position, 0, task);
}

// 使ってみる
addTask("メール返信");
addTask("会議準備", true);  // 緊急
addTask("資料作成");
insertTask(2, "休憩");  // 3番目に挿入

console.log(todoList);
// ["【緊急】会議準備", "メール返信", "休憩", "資料作成"]

よくある間違いと対策

配列を上書きしてしまう

// ❌ 間違い
let arr = [1, 2, 3];
arr = 4;  // 配列が数値に置き換わる

// ✅ 正しい
let arr = [1, 2, 3];
arr.push(4);  // 配列に追加

メソッド名を間違える

// ❌ 間違い
arr.add(4);  // addメソッドは存在しない

// ✅ 正しい
arr.push(4);  // pushを使う

戻り値の誤解

// ❌ 間違い
let arr = [1, 2, 3];
arr = arr.push(4);  // arrが数値4になってしまう

// ✅ 正しい
let arr = [1, 2, 3];
arr.push(4);  // 戻り値は使わない

まとめ

JavaScriptの配列への要素追加は、この5つを覚えれば大丈夫です。

1. push() - 最後に追加（最も基本的）
2. unshift() - 最初に追加
3. splice() - 好きな位置に追加
4. インデックス指定 - 直接指定（注意が必要）
5. concat() - 新しい配列を作成

買い物リストに項目を追加するように考えれば、難しくないですよね。

私も最初は「メソッド多すぎ！」って思っていましたが、実際に使うのはpushが8割、残りが2割くらいです。

まずはpushから始めて、必要に応じて他のメソッドも使えるようになればOKです。

これらをマスターすれば、ToDoリストやショッピングカートなど、実践的なアプリケーションが作れるようになります。

次は配列から要素を削除する方法も覚えてみましょう。配列操作は、JavaScriptの基本中の基本ですからね。