JavaScriptで配列の任意の位置に要素を追加する方法 — splice()メソッド徹底解説

JavaScriptで配列の特定の位置（インデックス）に要素を追加する方法を、実例を交えてわかりやすく解説します。

配列に要素を追加したいけれど、末尾への追加（append）や先頭への追加（prepend）ではなく、配列の中間など「特定の位置」に挿入したい——そんなケースはよくあります。

補足：特定の位置にあるデータを操作することを、一般的にインデックスと呼びます。JavaScriptの配列のインデックスは0から数え始めるため、以下のような対応関係になります。

• 0番目 ＝ 1つ目の要素
• 1番目 ＝ 2つ目の要素
• 以降も同様

たとえば5つの要素を持つ配列の3番目の要素にアクセスしたい場合は、インデックス2を指定します。

それでは、本題に入りましょう。

splice()メソッドを使う

配列の特定のインデックス位置に要素を追加するには、JavaScriptの強力なarray.splice()メソッドを使用します。splice()メソッドは、配列への要素の追加・削除の両方に対応できる便利なメソッドです。

splice()の構文は次のとおりです。

array.splice(startIndex)
array.splice(startIndex, deleteCount)
array.splice(startIndex, deleteCount, value1)

splice()メソッドは3つ以上の引数を受け取ります。

• 第1引数：startIndex — 要素を挿入したい位置（インデックス）
• 第2引数（省略可）：deleteCount — startIndexの位置から削除したい要素の数
• 第3引数：配列に追加したい新しい要素の値

splice()の実践例

ここでは、架空のアクション映画『Ask Questions Later（まず質問してから撃て）』の出演者リストを例に考えてみましょう。俳優たちは役柄の大きさ順に並んでいます。

ところが、ある俳優が自分の名前が主演キャストリストに載っていないことに激怒したのです。

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman",
  "The Rock",
  "Wesley Snipes"
]

その怒れる俳優とは、なんとスティーヴン・セガール（!!）。彼はこの映画にちょうど7秒間だけ登場し、その短い時間で敵10人を叩きのめします。セガール氏は、この出演時間なら主演キャストリストに名を連ねるのに十分だと主張しているのです。

さて、スティーヴン・セガールと口論をしようと思う人がいるでしょうか？

というわけで、先ほど学んだsplice()メソッドと引数の構文を使って、彼を主演キャストリストに追加しましょう。

マイケル・ジェイ・ホワイトの直後、リストの2番目としてスティーヴン・セガールを追加します（理由は後ほど説明します）：

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman",
  "The Rock",
  "Wesley Snipes",
]

mainCastList.splice(1, 0, "Steven Seagal")

console.log(mainCastList)
// ["Michael Jai White", "Steven Seagal", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Wesley Snipes"]

これでどうだ、スティーヴン！満足してくれたかな？

学習には繰り返しが重要なので、上記のコードで何が行われているのかをおさらいしておきましょう。

• mainCastList変数に対してsplice()メソッドを呼び出す
• splice()に3つの引数を渡す：開始位置（1）、削除数（0＝何も削除しない）、そしてその位置に追加したい要素（"Steven Seagal"）

ちなみに、セガール氏をリストの1位にできなかった理由は、言うまでもなくマイケル・ジェイ・ホワイトに倒されてしまうからです。

splice()メソッドについて知っておくべきこと

複数の要素を一度に追加する

複数の要素を一度に追加したい場合は、カンマで区切って指定します。

mainCastList.splice(1, 0, "Steven Seagal", "Sylvester Stallone")

startIndex以降のすべての要素を削除する

第2引数（例では0）を省略すると、デフォルトでstartIndex以降のすべての要素が削除されます。実際のプロジェクトでsplice()を使う際は、この仕様に十分注意してください。

配列の末尾から位置を指定する

先頭ではなく配列の末尾から数えた位置を指定して要素を追加・削除したい場合は、splice()の第1引数に負の値を指定します。

mainCastList.splice(-1, 0, "Steven Seagal")
console.log(mainCastList)
// ["Michael Jai White", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Steven Seagal", "Wesley Snipes"]

これでセガール氏はリストの下から2番目になりました。これは自己責任での大胆な決断です。