【JavaScript入門】配列の結合と分離

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

配列の結合と分離

　JavaScript で配列を扱う際には、既存の配列を結合して新たに大きな配列を作ったり、配列の一部だけを取り出したり、要素を別のものに置き換えたりしたい場面がよくあります。こうした「配列の結合と分離」には、主に concat(), slice(), splice() というメソッドが使われます。それぞれ、元の配列に影響を与えない（非破壊的メソッド）かどうかが異なるため、使い分けに注意しましょう。

１．配列の結合と分離を行うメソッド

メソッド	説明
.concat(x[, y, ...])	引数に与えた配列や値を、元の配列の後ろに並べた「新しい配列」を作って返します。元の配列は変更されません（非破壊的）。
.slice(s[, e])	配列の位置 s から e の直前までを取り出して「新しい配列」を返します。元の配列を変更しない（非破壊的）。負の数を指定すると、末尾からの位置となります。
.splice(s[, n, v1, v2, ...])	配列の位置 s から n 個の要素を「取り除き」、さらに同じ位置に任意の要素（v1, v2, ...）を挿入できます。取り除いた要素を返し、元の配列は破壊的に変更されます。

２．サンプルコード (HTML + JavaScript)

　以下の例を「myArrayConcatSliceSplice.html」というファイル名で保存してブラウザで開き、コンソール出力を確認してください。

【myArrayConcatSliceSplice.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myArrayConcatSliceSplice.html</title>
</head>
<body>
  <h1>配列の結合と分離のサンプル</h1>
  <p>開発者ツールのコンソールで結果を確認してください。</p>

  <script>
    // 1) .concat() の例
    console.log('--- concat() の例 ---');
    const arrA = ['ホットコーヒー', 'アイスコーヒー'];
    const arrB = ['ケーキ', 'アイスクリーム'];
    const arrC = ['トースト', 'ジャム'];

    // 複数の配列や値を連結して新しい配列を返す
    let newArray1 = arrA.concat(arrB, arrC);
    console.log('concat result:', newArray1);
    // 元の配列は変更されない
    console.log('arrA remains:', arrA);

    // 2) .slice() の例
    console.log('--- slice() の例 ---');
    const arrSlice = ['コーヒー', '紅茶', '緑茶', 'ウーロン茶', '抹茶'];
    console.log('arrSlice:', arrSlice);

    // 位置1から3の直前まで (index 1, 2) の要素を抽出
    let slicedPart1 = arrSlice.slice(1, 3);
    console.log('slicedPart1:', slicedPart1);

    // 位置2から末尾まで
    let slicedPart2 = arrSlice.slice(2);
    console.log('slicedPart2:', slicedPart2);

    // 負の指定（末尾から2つ）
    let slicedPart3 = arrSlice.slice(-2);
    console.log('slicedPart3:', slicedPart3);

    // 元の配列はそのまま
    console.log('arrSlice remains:', arrSlice);

    // 3) .splice() の例
    console.log('--- splice() の例 ---');
    let arrSplice = ['チョコ', 'キャラメル', 'クッキー', 'キャンディ', 'マシュマロ'];
    console.log('arrSplice 初期:', arrSplice);

    // (A) 要素1から2つ取り除く
    let removedA = arrSplice.splice(1, 2);
    console.log('removedA:', removedA);
    console.log('arrSplice after removal:', arrSplice);

    // (B) 要素2から末尾まで全部取り除く
    let arrSplice2 = ['チョコ', 'キャラメル', 'クッキー', 'キャンディ', 'マシュマロ'];
    let removedB = arrSplice2.splice(2);
    console.log('removedB:', removedB);
    console.log('arrSplice2 after removal:', arrSplice2);

    // (C) 置き換え: 要素1から2つ取り除き、代わりに複数の要素を挿入
    let arrSplice3 = ['アップルパイ', 'タルト', 'ショートケーキ', 'スフレ'];
    let replacedC = arrSplice3.splice(1, 2, 'ワッフル', 'ガトーショコラ', 'クレープ');
    console.log('replacedC:', replacedC);
    console.log('arrSplice3 after replacement:', arrSplice3);
  </script>
</body>
</html>

デバックコンソールの出力

--- concat() の例 ---
concat result: (6) ["ホットコーヒー","アイスコーヒー","ケーキ","アイスクリーム","トースト","ジャム"]
arrA remains: (2) ["ホットコーヒー","アイスコーヒー"]

--- slice() の例 ---
arrSlice: (5) ["コーヒー","紅茶","緑茶","ウーロン茶","抹茶"]
slicedPart1: (2) ["紅茶","緑茶"]
slicedPart2: (3) ["緑茶","ウーロン茶","抹茶"]
slicedPart3: (2) ["ウーロン茶","抹茶"]
arrSlice remains: (5) ["コーヒー","紅茶","緑茶","ウーロン茶","抹茶"]

--- splice() の例 ---
arrSplice 初期: (5) ["チョコ","キャラメル","クッキー","キャンディ","マシュマロ"]
removedA: (2) ["キャラメル","クッキー"]
arrSplice after removal: (3) ["チョコ","キャンディ","マシュマロ"]
removedB: (3) ["クッキー","キャンディ","マシュマロ"]
arrSplice2 after removal: (2) ["チョコ","キャラメル"]
replacedC: (2) ["タルト","ショートケーキ"]
arrSplice3 after replacement: (5) ["アップルパイ","ワッフル","ガトーショコラ","クレープ","スフレ"]

まとめ

.concat() ：複数の配列や要素をつなげ、新しい配列を作成（非破壊）。
.slice() ：指定範囲の要素を抽出し、新しい配列を返す（非破壊）。
.splice() ：指定範囲の要素を「削除」し、「他の要素と置き換えたり挿入」したりする多機能メソッド（破壊的）。

　それぞれ役割が異なるので、必要に応じて使い分けることで配列操作を効率よく行えます。破壊的なメソッド（splice など）を誤用しないように注意しながら活用しましょう。