いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】配列の書き方と使い方の基本

JavaScriptで複数のデータを扱う「配列」について、基本的な概念から使い方までを解説します。配列の作り方をはじめ、要素の追加、削除、検索、並べ替えといったデータ操作の基礎を、豊富なサンプルコードと共に学ぶことができます。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptの配列（Array）

配列とは、複数のデータを順番に並べて、一つの変数としてまとめて管理するための仕組みです。JavaScriptでは、配列はobject型というデータ型の一種として扱われます。

  • 配列: 関連する複数のデータを、一つの変数名で管理するためのデータ構造です。これにより、たくさんの変数を個別に作る手間が省け、データを効率的に扱えます。
  • 要素: 配列の中に入っている個々のデータのことです。例えば、「りんご」「バナナ」「みかん」という3つの文字列を配列に入れた場合、その一つひとつが要素となります。
  • 要素数: 配列の中にいくつの要素が含まれているかを示す数です。先ほどの例では要素は3つなので、要素数は3になります。
  • インデックス番号: 配列内の各要素がどの位置にあるかを示す番号のことです。この番号は必ず0から始まり、1, 2, 3...と順番に割り振られます。この番号を使うことで、特定の要素を直接指定できます。
  • 次元：
    • 1列の配列は「1次元配列」: データが一列に並んでいる、最も基本的な配列のことです。
    • 配列の中に配列があるものは「2次元配列」: 配列の要素として、さらに別の配列が入っている構造です。これにより、表のような縦横のデータを表現できます。
    • より深い構造を「多次元配列」と呼びます: 2次元配列のように配列の入れ子がさらに深くなったものです。例えば、配列の中に配列があり、その中にさらに配列があるような構造を「3次元配列」と呼び、これらを総称して「多次元配列」と呼びます。

配列リテラルは [ ] （角括弧）を使って書きます。 これは、配列を作成する際の最も基本的な記述方法です。[]の中にカンマ区切りで要素を記述することで、配列を直接作ることができます。

配列の基本的な書き方

配列とは、複数の値を一つの変数にまとめて管理するためのデータ構造です。JavaScriptで配列を作成する際の基本的な構文は以下の通りです。

1変数宣言キーワード 変数名 = [値1, 値2, ...];
  • 変数宣言キーワード: const や let など、変数を宣言するために使用します。
  • 変数名: 作成する配列につける名前を自由に決めます。
  • [] (角括弧): この括弧で値を囲むことで、配列であることを示します。
  • 値: 配列に格納したいデータを、カンマ(,)で区切って記述します。数値や文字列など、様々な種類のデータを入れることができます。

配列を作成する方法には、主に「リテラル」と「コンストラクタ」の2種類があります。

リテラル

リテラルとは、角括弧 [] を使って値を直接記述し、配列を作成する方法です。この方法はコードがシンプルで読みやすいため、最も一般的に使用されます。

1const array = ["apple", "banana", "cherry"];

この例では、"apple", "banana", "cherry" という3つの文字列を格納した array という名前の配列を作成しています。

コンストラクタ

コンストラクタとは、new Array() という記述を用いて配列を生成する方法です。これは、Arrayという設計図から新しい配列オブジェクトを作成するイメージです。

1const array = new Array("apple", "banana", "cherry");

このコードで作成される配列は、リテラルで作成したものと全く同じものです。特別な理由がない限りは、より簡潔に記述できるリテラル記法を使うことが推奨されます。

サンプルコード

ここからは、JavaScriptの配列について学習します。配列とは、複数の値を順番にまとめて管理できるデータ構造のことです。 以下のHTMLファイルは、これから説明する9つのJavaScriptファイルを読み込むためのものです。ブラウザでこのファイルを開くと、各JavaScriptが順番に実行され、その結果が開発者ツール（コンソール）に表示されます。

javascript/chapter03/index.html

scriptタグのdefer属性は、HTMLの解析が終わってからJavaScriptを実行するための指定です。これにより、ページの表示がブロックされるのを防ぎます。

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15    <script src="./script05.js" defer></script>
16    <script src="./script06.js" defer></script>
17    <script src="./script07.js" defer></script>
18    <script src="./script08.js" defer></script>
19    <script src="./script09.js" defer></script>
20  </body>
21</html>
22

javascript/chapter03/script01.js

配列の各要素には、先頭から順番に0から始まる番号（インデックス）が割り振られています。配列名[インデックス]という形式で、特定の要素にアクセスすることができます。

1// -----------------------------
2// 配列の要素を取得する
3// -----------------------------
4const array = ["apple", "banana", "cherry"];
5console.log(array[0]); // 出力: apple
6console.log(array[1]); // 出力: banana
7console.log(array[2]); // 出力: cherry
8

javascript/chapter03/script02.js

配列の末尾に新しい要素を追加するには、push()メソッドを使用します。この操作により、配列の要素数が1つ増えます。

1// -----------------------------
2// 配列に要素を追加する
3// -----------------------------
4const fruits = ["apple", "banana", "cherry"];
5fruits.push("orange");
6console.log(fruits); // 出力: ["apple", "banana", "cherry", "orange"]
7

javascript/chapter03/script03.js

インデックスを指定して新しい値を代入することで、配列の要素を更新（上書き）できます。この例では、インデックス1の要素（2番目の要素）を"banana"から"blueberry"に書き換えています。

1// -----------------------------
2// 配列の要素を更新する
3// -----------------------------
4const fruits = ["apple", "banana", "cherry"];
5fruits[1] = "blueberry";
6console.log(fruits); // 出力: ["apple", "blueberry", "cherry"]
7

javascript/chapter03/script04.js

配列の末尾の要素を削除するには、pop()メソッドを使用します。このメソッドは引数を必要とせず、呼び出すたびに最後の要素が1つ削除されます。

1// -----------------------------
2// 配列の要素を削除する
3// -----------------------------
4const fruits = ["apple", "banana", "cherry"];
5fruits.pop(); // 末尾の要素を削除
6console.log(fruits); // 出力: ["apple", "banana"]
7

javascript/chapter03/script05.js

2つの配列を結合して新しい1つの配列を作成するには、concat()メソッドを使用します。元の配列（この例ではfruits1とfruits2）は変更されません。

1// -----------------------------
2// 配列を結合する
3// -----------------------------
4const fruits1 = ["apple", "banana"];
5const fruits2 = ["cherry", "orange"];
6const mergedFruits = fruits1.concat(fruits2);
7console.log(mergedFruits); // 出力: ["apple", "banana", "cherry", "orange"]
8

javascript/chapter03/script06.js

配列に含まれる要素の数を取得するには、lengthプロパティを使用します。配列名.lengthと記述します。

1// -----------------------------
2// 配列の長さを取得する
3// -----------------------------
4const fruits = ["apple", "banana", "cherry"];
5console.log(fruits.length); // 出力: 3
6

javascript/chapter03/script07.js

配列に特定の要素が含まれているかどうかを調べるには、includes()メソッドを使用します。このメソッドは、要素が含まれていればtrue、含まれていなければfalseを返します。

1// -----------------------------
2// 配列に特定の値が含まれているかを調べる
3// -----------------------------
4const fruits = ["apple", "banana", "cherry"];
5console.log(fruits.includes("apple")); // 出力: true
6console.log(fruits.includes("melon")); // 出力: false
7

javascript/chapter03/script08.js

配列の要素を並べ替えるには、sort()メソッドを使用します。文字列の配列の場合、デフォルトではアルファベット順（辞書順）にソートされます。このメソッドは元の配列を直接変更します。

1// -----------------------------
2// 配列のソート
3// -----------------------------
4const fruits = ["banana", "apple", "cherry"];
5fruits.sort(); // アルファベット順にソート
6console.log(fruits); // 出力: ["apple", "banana", "cherry"]
7

javascript/chapter03/script09.js

ここでは、これまで学んだ配列の知識を応用した練習問題を見ていきましょう。

1から10までの合計を求める

for...ofループを使うと、配列の要素を一つずつ取り出して処理を繰り返すことができます。sum += number;はsum = sum + number;と同じ意味で、取り出した数値をsum変数に次々と加算しています。

「a」を含む文字列だけを抽出する

配列から特定の条件に一致する要素だけを抽出して新しい配列を作成するには、filter()メソッドが便利です。filter()は、引数として渡された関数がtrueを返す要素だけを集めた新しい配列を返します。この例では、文字列に"a"を含む要素だけを抽出しています。

1// -----------------------------
2// 練習問題：1から10までの合計を求める
3// -----------------------------
4const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
5let sum = 0;
6
7for (let number of numbers) {
8  sum += number;
9}
10
11console.log("合計:", sum); // 出力: 合計: 55
12
13//  練習問題：「a」を含む文字列だけを抽出する
14const items = ["pen", "paper", "eraser", "notebook", "pencil"];
15
16// "a" を含む単語だけを取り出す
17const result = items.filter((item) => item.includes("a"));
18
19console.log(result); // ["paper", "eraser"]
20

おわりに

この記事では、JavaScriptで複数のデータをまとめて扱うための「配列」について、[]を使った基本的な作り方を学びました。push()メソッドによる要素の追加やpop()による削除、sort()を使った並べ替えなど、配列を操作するための様々な方法をサンプルコードで確認しました。さらに、filter()メソッドで条件に合う要素を抽出する応用例を通して、より実践的なデータ処理に触れました。配列の操作はプログラミングの基本となるため、今回学んだ知識を土台として、さまざまな処理に挑戦していきましょう。

【JavaScript】配列の書き方と使い方の基本 | いっしー@Webエンジニア