【JavaScript入門】配列の処理

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

配列の処理

　JavaScript では、配列（Array）は最も頻繁に使われるデータ構造の1つです。配列の内容を操作するうえでよく使う機能として、「配列の先頭や末尾に要素を追加・削除するメソッド」があります。ここでは、配列に対して要素を追加する push()・unshift()、要素を削除する pop()・shift() など、基本的なメソッドを紹介します。

１．値の追加と削除の基本

1.1．末尾への追加・削除

array.push(x, y, ...) ：配列の末尾に要素を追加
・戻り値は 新しい配列の長さ
array.pop() ：末尾の要素を取り除き、その取り除いた要素を返す。
・もし要素が空なら undefined を返す

1.2．先頭への追加・削除

array.unshift(x, y, ...) ：配列の先頭に要素を追加
・戻り値は 新しい配列の長さ
array.shift() ：先頭の要素を取り除き、その取り除いた要素を返す。
・もし要素が空なら undefined を返す

３．サンプルHTMLとJavaScript

　以下の例を「myArrayOperations.html」というファイル名で保存し、ブラウザで開いて、開発者ツールのコンソールで動作結果を確認してください。

【myArrayOperations.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myArrayOperations.html</title>
</head>
<body>
  <h1>配列の処理：push, pop, unshift, shift</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて結果をチェックしてください。</p>

  <script>
    // 1) 配列を作成し、初期状態を表示
    const arr = [20, 21, 22];
    console.log('初期配列:', arr);

    // 2) pushで末尾に追加
    arr.push(30, 31, 32);
    console.log('push後の配列:', arr);

    // 3) unshiftで先頭に追加
    arr.unshift(10, 11, 12);
    console.log('unshift後の配列:', arr);

    // 4) popで末尾の要素を取り除き、取り除いた要素を表示
    const removedTail = arr.pop();
    console.log('popで削除した要素:', removedTail);
    console.log('pop後の配列:', arr);

    // 5) shiftで先頭の要素を取り除き、取り除いた要素を表示
    const removedHead = arr.shift();
    console.log('shiftで削除した要素:', removedHead);
    console.log('shift後の配列:', arr);
  </script>
</body>
</html>

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

初期配列: (3) [20, 21, 22]
push後の配列: (6) [20, 21, 22, 30, 31, 32]
unshift後の配列: (9) [10, 11, 12, 20, 21, 22, 30, 31, 32]
popで削除した要素: 32
pop後の配列: (8) [10, 11, 12, 20, 21, 22, 30, 31]
shiftで削除した要素: 10
shift後の配列: (7) [11, 12, 20, 21, 22, 30, 31]

まとめ

push() と pop() は配列の末尾の追加・削除に使う。
unshift() と shift() は配列の先頭の追加・削除に使う。
これら4つのメソッドを活用すれば、簡単に配列の要素を操作できる。
要素数の多い配列やパフォーマンスが気になる場合、先頭への追加・削除（unshift / shift）はコストが高い可能性があることにも注意（内部で要素の再配置が必要になるため）

　配列は JavaScript で最も多用されるデータ構造の1つですので、これらの基本的な操作を理解し、必要に応じて使いこなしていきましょう。