【JavaScript入門】配列自体の操作

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

配列自体の操作

　JavaScript の配列は、要素を追加・削除するだけでなく、配列そのものを文字列として結合したり、配列の要素を並べ替えたり、配列の入れ子構造を平坦化するためのメソッドが用意されています。ここでは主に、配列自体を操作するメソッド .join(), .fill(), .reverse(), .flat() の使い方を解説します。

１．配列を文字列に結合する：.join()

1.1．基本的な利用例

　arr.join() は配列の要素を結合した文字列を返します。引数を与えない場合、デフォルトで区切り文字としてカンマ（,）を使用しますが、好きな文字列を指定することで区切り文字を変更できます。

構文

配列.join([区切り文字])

引数を与えなければカンマが区切り文字に
引数に ' / ' などを与えれば任意の区切り文字に

2．配列の要素を埋める：.fill()

2.1．基本の使い方

　arr.fill(x) は、配列全体または指定した範囲を特定の値 x で埋めるメソッドです。返り値として、変更後の配列自身を返します。

構文

配列.fill(埋め込む値, 開始インデックス, 終了インデックス)

第2引数と第3引数を省略すると、配列の全要素が埋められます。
開始インデックスのみ指定し、終了インデックスを省略すると開始インデックス以降が全て埋められる。
埋め終える位置のゼロから始まるインデックスで、end を含まず、その直前までを埋めます。

３．配列の向きを反転する：.reverse()

3.1．使用方法

　arr.reverse() は、配列の要素を末尾から先頭の順に反転させてしまうメソッドです。返り値は変更後の配列であり、注意すべきなのは、元の配列オブジェクトが破壊的に変更されるという点です。

４．配列の入れ子を平坦化する：.flat()

4.1．浅いフラット化と深いフラット化

　arr.flat(depth) は、入れ子構造になっている配列を平坦にするメソッドです。引数なし（あるいは引数 1）では一段階の入れ子のみが平坦化されます。引数に数字を指定すると、その深さまで入れ子を解消します。全部解消したい場合は Infinity を指定します。

元の配列は変更されずに、新しい配列を返す
例：arr.flat(2) は 2 階層までの入れ子を解消

５．サンプルコード（HTML + JavaScript）

　以下の例を「myArrayManipulations.html」というファイル名で保存し、ブラウザで開き、開発者ツール（コンソール）に表示される出力を確認してください。

【myArrayManipulations.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myArrayManipulations.html</title>
</head>
<body>
  <h1>配列自体の操作の例</h1>
  <p>ブラウザで開発者ツールを開いて、コンソールの出力を確認してください。</p>

  <script>
    // 1) .join() の例
    const arrJoin = ['コーヒー', '紅茶', 'ミルクティー'];
    console.log('join()デフォルト:', arrJoin.join());        // -> "コーヒー,紅茶,ミルクティー"
    console.log('join("/"):', arrJoin.join('/'));            // -> "コーヒー/紅茶/ミルクティー"
    console.log('join(""):', arrJoin.join(''));              // -> "コーヒー紅茶ミルクティー"

    // 2) .fill() の例
    const arrFill = new Array(4); // [empty × 4]
    console.log('初期arrFill:', arrFill);

    // 全部を "★" で埋める
    arrFill.fill('★');
    console.log('arrFill全体を★で埋めた:', arrFill);

    // 一部だけ埋める (start=1, end=3)
    arrFill.fill('☆', 1, 3);
    console.log('arrFill一部を☆で上書き:', arrFill);

    // 3) .reverse() の例
    const arrRev = [1, 2, 3, 4];
    console.log('初期arrRev:', arrRev);

    arrRev.reverse(); // 破壊的に変更
    console.log('reverse後arrRev:', arrRev);

    // 4) .flat() の例
    const arrFlat = [0, [1, 2], [[3, 4], 5], [[[6, 7]]]];
    console.log('初期arrFlat:', arrFlat);

    console.log('flat() (深さ1):', arrFlat.flat());   // 1段階だけ平坦化
    console.log('flat(2) (深さ2):', arrFlat.flat(2)); // 2段階平坦化
    console.log('flat(Infinity):', arrFlat.flat(Infinity)); // 全て平坦化
    console.log('元のarrFlatは変更されない:', arrFlat);
  </script>
</body>
</html>

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

join()デフォルト: コーヒー,紅茶,ミルクティー
join('/'): コーヒー/紅茶/ミルクティー
join(''): コーヒー紅茶ミルクティー

初期arrFill: (4) [empty × 4]
arrFill全体を★で埋めた: (4) ["★", "★", "★", "★"]
arrFill一部を☆で上書き: (4) ["★", "☆", "☆", "★"]

初期arrRev: (4) [1, 2, 3, 4]
reverse後arrRev: (4) [4, 3, 2, 1]

初期arrFlat: (4) [0, [1, 2], Array(2), Array(1)]
flat() (深さ1): (5) [0, 1, 2, Array(2), Array(1)]
flat(2) (深さ2): (6) [0, 1, 2, 3, 4, 5, Array(1)]
flat(Infinity): (7) [0, 1, 2, 3, 4, 5, 6, 7]
元のarrFlatは変更されない: (4) [0, [1, 2], Array(2), Array(1)]

まとめ

join()：配列の要素を文字列に結合。デフォルト区切りは「,」、引数で区切り文字を変えられる。
fill()：指定した値で配列を埋める。部分的に埋める範囲指定も可能で、破壊的に変更する。
reverse()：配列を逆順に並べ替える。破壊的に変更される点に注意。
flat()：配列の入れ子を浅い階層（または指定階層）まで平坦化し、新しい配列を返す（元の配列は変わらない）。

　これらのメソッドを使いこなすことで、配列に対する操作を効率よく行えます。ただし、fill() や reverse() のように元の配列を直接変更する（破壊的メソッド）ものと、そうでないものがあるので、使用する際には注意が必要です。