配列の作成と基本操作を学ぼう

学習の目標

本章では、以下の内容を学習します。

配列リテラルによる配列の作成方法を理解する
インデックスを使った要素の取得・更新方法を習得する
配列の長さ（length）の取得方法を学ぶ
配列への要素追加・削除の基本操作を身につける

はじめに

これまでは、1つの変数に1つの値を保存する方法を学んできました。

しかし、実際のWebアプリケーションでは、複数の関連する値をまとめて管理したい場面がよくあります。

例えば、ショッピングサイトの商品リスト、ユーザーの趣味一覧、テストの点数リストなどです。

JavaScriptでは、配列という仕組みを使って、複数の値を1つの変数にまとめて保存できます。

配列は「値を入れる箱が複数並んでいる」ようなイメージで、それぞれの箱に番号を付けて管理します。

この章では、配列の基本的な作成方法から操作方法まで、順序立てて学んでいきましょう。

配列リテラルによる作成

基本的な配列の作り方

配列を作るには、角括弧[]の中に値をカンマで区切って並べます。

VS Codeで新しいファイルarrays.htmlを作成し、以下のコードを入力してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>配列の練習</title>
</head>
<body>
    <h1>配列操作の練習</h1>

    <script>
        let fruits = ["りんご", "バナナ", "オレンジ"];
        let scores = [85, 92, 78, 96];

        console.log("果物リスト:");
        console.log(fruits);
        console.log("点数リスト:");
        console.log(scores);
    </script>
</body>
</html>

このコードを実行すると、コンソールに以下のような結果が表示されます。

果物リスト:
['りんご', 'バナナ', 'オレンジ']
点数リスト:
[85, 92, 78, 96]

この例では、文字列の配列と数値の配列を作成しています。

配列の中身がすべて表示され、複数の値が1つの変数にまとめて保存されていることが分かります。

空の配列と混合型の配列

配列は空の状態から始めることもでき、異なる種類の値を混在させることもできます。

<script>
    let emptyArray = [];  // 空の配列
    let mixedArray = ["田中", 25, true, null];  // 異なる型を混在

    console.log("空の配列:");
    console.log(emptyArray);
    console.log("混合配列:");
    console.log(mixedArray);
</script>

実行結果は以下のようになります。

空の配列:
[]
混合配列:
['田中', 25, true, null]

空の配列は、後で値を追加していく際の初期状態として使われます。

混合型の配列は、ユーザー情報のように異なる種類のデータをまとめて管理する際に便利です。

ただし、通常は同じ種類のデータをまとめることが多く、混合型は特別な場合にのみ使用されます。

インデックスを使った要素の取得・更新

配列の要素を取り出す方法

配列の各要素には、0から始まる番号（インデックス）が自動的に割り振られます。

<script>
    let colors = ["赤", "青", "緑", "黄"];

    console.log("最初の色: " + colors[0]);
    console.log("2番目の色: " + colors[1]);
    console.log("3番目の色: " + colors[2]);
    console.log("4番目の色: " + colors[3]);
</script>

実行結果は以下のようになります。

最初の色: 赤
2番目の色: 青
3番目の色: 緑
4番目の色: 黄

角括弧[]の中にインデックス番号を書くことで、その位置の要素を取り出せます。

重要なのは、インデックスが0から始まることです。最初の要素は0番目、2番目の要素は1番目となります。

この「0から始まる」という考え方は、多くのプログラミング言語で共通しており、慣れることが大切です。

存在しないインデックスにアクセスした場合

配列の範囲を超えたインデックスにアクセスすると、undefinedが返されます。

<script>
    let animals = ["犬", "猫", "鳥"];

    console.log("1番目の動物: " + animals[0]);
    console.log("2番目の動物: " + animals[1]);
    console.log("3番目の動物: " + animals[2]);
    console.log("4番目の動物: " + animals[3]);  // undefined
    console.log("10番目の動物: " + animals[9]);  // undefined
</script>

実行結果は以下のようになります。

1番目の動物: 犬
2番目の動物: 猫
3番目の動物: 鳥
4番目の動物: undefined
10番目の動物: undefined

存在しないインデックスにアクセスしてもエラーにはなりませんが、undefinedが返されます。

これは、前章で学んだ「値が設定されていない状態」を表しており、配列にその位置の要素が存在しないことを意味します。

配列の要素を変更する

インデックスを指定して、配列の要素を新しい値に変更することもできます。

<script>
    let subjects = ["数学", "英語", "理科"];

    console.log("変更前: " + subjects);

    subjects[1] = "国語";  // 2番目の要素を変更

    console.log("変更後: " + subjects);
    console.log("2番目の科目: " + subjects[1]);
</script>

実行結果は以下のようになります。

変更前: 数学,英語,理科
変更後: 数学,国語,理科
2番目の科目: 国語

このように、配列の特定の位置の値を後から変更できます。

ユーザーが設定を変更したり、データを更新したりする際によく使われる操作です。

配列の長さ（length）の取得

配列の要素数を調べる

配列に含まれる要素の数を調べるには、lengthプロパティを使います。

<script>
    let weekdays = ["月", "火", "水", "木", "金"];
    let numbers = [10, 20, 30, 40, 50, 60, 70];

    console.log("曜日の数: " + weekdays.length);
    console.log("数値の個数: " + numbers.length);

    // 空の配列の長さ
    let emptyList = [];
    console.log("空の配列の長さ: " + emptyList.length);
</script>

実行結果は以下のようになります。

曜日の数: 5
数値の個数: 7
空の配列の長さ: 0

lengthプロパティは、配列に含まれる要素の総数を返してくれます。

空の配列の場合は0、要素が5個ある配列の場合は5が返されます。

この値は、のちに学習するループ処理で配列のすべての要素を処理する際に重要な役割を果たします。

lengthを使った最後の要素の取得

配列の最後の要素を取得するには、length - 1をインデックスとして使います。

<script>
    let cities = ["東京", "大阪", "名古屋", "福岡"];

    let lastIndex = cities.length - 1;
    let lastCity = cities[lastIndex];

    console.log("都市数: " + cities.length);
    console.log("最後のインデックス: " + lastIndex);
    console.log("最後の都市: " + lastCity);

    // より簡潔な書き方
    console.log("最後の都市（簡潔版）: " + cities[cities.length - 1]);
</script>

実行結果は以下のようになります。

都市数: 4
最後のインデックス: 3
最後の都市: 福岡
最後の都市（簡潔版）: 福岡

インデックスは0から始まるため、要素数がnの配列の最後のインデックスはn-1になります。

この考え方は、配列を扱う上で基本的かつ重要な概念です。

配列への要素追加・削除

配列の末尾に要素を追加する

配列の最後に新しい要素を追加するには、push()メソッドを使います。

<script>
    let hobbies = ["読書", "映画鑑賞"];

    console.log("追加前: " + hobbies);
    console.log("要素数: " + hobbies.length);

    hobbies.push("料理");
    console.log("追加後: " + hobbies);
    console.log("要素数: " + hobbies.length);

    // 複数の要素を一度に追加
    hobbies.push("ゲーム", "スポーツ");
    console.log("複数追加後: " + hobbies);
</script>

実行結果は以下のようになります。

追加前: 読書,映画鑑賞
要素数: 2
追加後: 読書,映画鑑賞,料理
要素数: 3
複数追加後: 読書,映画鑑賞,料理,ゲーム,スポーツ

push()メソッドを使うことで、配列の最後に新しい要素を簡単に追加できます。

1つずつ追加することも、複数の要素を一度に追加することも可能です。

ショッピングカートに商品を追加したり、タスクリストに新しいタスクを追加したりする際によく使われます。

配列の末尾から要素を削除する

配列の最後の要素を削除するには、pop()メソッドを使います。

<script>
    let colors = ["赤", "青", "緑", "黄", "紫"];

    console.log("削除前: " + colors);

    let removedColor = colors.pop();

    console.log("削除後: " + colors);
    console.log("削除された色: " + removedColor);
    console.log("残り要素数: " + colors.length);
</script>

実行結果は以下のようになります。

削除前: 赤,青,緑,黄,紫
削除後: 赤,青,緑,黄
削除された色: 紫
残り要素数: 4

pop()メソッドは、最後の要素を削除すると同時に、削除された要素を返してくれます。

削除された要素を後で使いたい場合は、変数に保存しておくことができます。

配列の先頭に要素を追加・削除する

配列の最初に要素を追加するにはunshift()、最初の要素を削除するにはshift()を使います。

<script>
    let numbers = [2, 3, 4];

    console.log("元の配列: " + numbers);

    // 先頭に要素を追加
    numbers.unshift(1);
    console.log("先頭に追加: " + numbers);

    // 先頭の要素を削除
    let firstNumber = numbers.shift();
    console.log("先頭を削除: " + numbers);
    console.log("削除された数値: " + firstNumber);
</script>

実行結果は以下のようになります。

元の配列: 2,3,4
先頭に追加: 1,2,3,4
先頭を削除: 2,3,4
削除された数値: 1

unshift()とshift()を使うことで、配列の先頭からも要素を追加・削除できます。

これらの操作は、待ち行列（キュー）のような仕組みを実装する際に便利です。

まとめ

本章では、JavaScriptでの配列の基本操作について学びました。以下の内容を理解できたことと思います。

角括弧[]を使って配列を作成し、複数の値をまとめて管理できる
インデックス（0から始まる番号）を使って配列の要素を取得・更新できる
lengthプロパティで配列の要素数を取得できる
push()とpop()で配列の末尾に要素を追加・削除でき、unshift()とshift()で先頭の操作ができる

配列は、複数のデータを効率的に管理するための基本的な仕組みです。

商品リスト、ユーザー一覧、メニュー項目など、Webアプリケーションの様々な場面で今回学んだ知識を活用できるでしょう。

次回は、配列と同様にデータをまとめて管理できるオブジェクトについて学んでいきます。