JavaScriptの基本配列メソッド解説！push・pop・shift・unshift・spliceの使い方を実例付きで紹介

JavaScriptには、配列を操作するための便利な組み込みメソッドが数多く用意されています。その中でも特によく使われるのが、要素の追加や削除を行う以下の5つの基本メソッドです。

JavaScriptの主要な配列メソッド一覧

メソッド	説明
Array.push()	配列の末尾に要素を追加します。
Array.pop()	配列の末尾から要素を取り除きます。
Array.unshift()	配列の先頭に要素を追加します。
Array.shift()	配列の先頭から要素を取り除きます。
Array.splice()	配列内の任意の位置で要素の追加・削除を行います。

これらのメソッドは、配列の先頭と末尾をスタックやキューのように扱いたい場合に非常に役立ちます。それぞれ戻り値が異なる点にも注意しましょう。例えば push() や unshift() は処理後の配列の長さを返し、pop() や shift() は取り除かれた要素そのものを返します。

サンプルコード

以下は、上記の配列メソッドを実際に動作させるHTMLのコード例です。ボタンをクリックすると、各メソッドが順番に実行され、その結果が画面に表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,
.result {
    font-size: 18px;
    font-weight: 500;
    color: red;
}
.result {
    color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript 基本配列メソッド</h1>
<div class="sample">arr =</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、配列に対して各メソッドが適用されます</h3>
<script>
let resultEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let arr = ["A", "B", 1, 2, 3, 5];
sampleEle.innerHTML += arr;
document.querySelector(".Btn").addEventListener("click", () => {
    arr.pop();
    resultEle.innerHTML += "arr.pop() = " + arr + "<br>";
    arr.push(22);
    resultEle.innerHTML += "arr.push(22) = " + arr + "<br>";
    arr.shift();
    resultEle.innerHTML += "arr.shift() = " + arr + "<br>";
    arr.unshift();
    resultEle.innerHTML += "arr.unshift(55) = " + arr + "<br>";
    arr.splice(3, 0, "D", "E", "F");
    resultEle.innerHTML += 'Array.splice(3,0,"D","E","F") = ' + arr;
});
</script>
</body>
</html>

実行結果

ページを開くと、初期状態の配列「A,B,1,2,3,5」が表示されます。

JavaScriptの基本配列メソッド解説！push・pop・shift・unshift・spliceの使い方を実例付きで紹介

「CLICK HERE」ボタンをクリックすると、各メソッドが順に実行され、以下のように結果が出力されます。

JavaScriptの基本配列メソッド解説！push・pop・shift・unshift・spliceの使い方を実例付きで紹介

処理の流れを確認しよう

arr.pop() … 末尾の「5」が削除されます。
arr.push(22) … 末尾に「22」が追加されます。
arr.shift() … 先頭の「A」が削除されます。
arr.splice(3,0,"D","E","F") … インデックス3の位置に「D」「E」「F」が挿入されます（第2引数が0なので削除は行われません）。

なお、サンプルコード内の unshift(55) は引数を渡していないため、実際には要素は追加されません。先頭に要素を追加したい場合は、arr.unshift(55) のように引数を正しく指定する必要があるので注意してください。

これらの基本メソッドをしっかり理解しておくことで、日常的なデータ操作やアルゴリズムの実装がぐっと楽になります。ぜひ実際にコードを書いて、挙動を確かめてみてください。

JavaScriptのBOM（window.screen）でユーザーの画面情報を取得する方法

JavaScript の ArrayBuffer.slice() メソッドの使い方を解説

JavaScriptのArray.prototype.map()メソッドの使い方を徹底解説
Array.prototype.map()とは？ JavaScriptのArray.prototype.map()メソッドは、配列の各要素に対してコールバック関数を実行し、その戻り値から新しい配列を作成するためのメソッドです。元の配列は変更されないため、安全にデータ変換を行いたい場合に非常に便利です。構文 arr.map(function callback(currentValue[, index[, array]]) 各引数の意味は以下のとおりです。 currentValue：現在処理している要素の値 index（省略可能）：現在処理している要素のインデックス番号 array（省略可能
JavaScriptのオブジェクト配列に配列メソッドを適用する方法
JavaScriptでは、オブジェクトが格納された配列に対しても、通常の配列と同じようにpop()、push()、splice()などの標準的な配列メソッドをそのまま使用できます。オブジェクト配列はあくまで「配列」であるため、要素としてオブジェクトが入っていても配列操作のAPIは共通で動作します。コード例以下は、JavaScriptオブジェクトの配列に対して配列メソッドを使用するサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8