JavaScriptの配列

jsコード JavaScript
2024.12.03

本記事では、JavaScriptの配列について解説しています。
「配列」は多くのプログラミング言語にも存在する概念で、複数の値を一つの変数で管理できる代表的なデータ型です。

配列とは

JavaScriptにおいて配列は Array というオブジェクト型を指します。
配列（Array） は、複数の要素を単一の変数に格納するための特別なオブジェクトであり、配列を操作するのに便利なメソッドやプロパティが用意されています。

前述の通り「配列」はデータ型ですが、プリミティヴではなく、オブジェクトとしてのデータ型に分類されます。

JavaScriptの配列「入門編」となる本記事では、まず配列を「どのように作るのか」について学びます。
「どのように操作できるのか」については、制御構文の「繰り返し」（ループ）処理の知識が必要な内容も含まれますので、可能な範囲で学んでいきましょう。

配列の作り方（配列の初期化）

配列の作り方には多くの種類があります。
主な作り方を紹介していきますが、すべてを一気に覚えようとする必要はありません。

無理に暗記しようとせず、繰り返す中で徐々に覚えていきましょう。

1. リテラル表記による作り方

リテラル (*1) 表記での配列の作り方は、角カッコ[]を使用します。

*1：プログラミングにおける「リテラル」とは、プログラムのソースコードに直接記述された数値や文字列などの値で、変数の対義語です。リテラルは変更されないことを前提とした定数であり、プログラムの実行中に値が変更されることはありません。

let nums = [1, 2, 3, 4, 5];

👆上記は、数値型の複数要素を一つの変数に格納しています。

文字列型の複数要素をリスト化したい場合は次のようになります。

let chars = ["a", "b", "c", "d", "e"];

プログラミング学習は、インプットとアウトプットのバランスが大切です！

「読むだけ～」、で終わらせず、実際に手を動かしてプログラムを作成し、動作させてみましょう。

script.js
let chars = ["a", "b", "c", "d", "e"];

console.log( chars );
実行結果

2. Array コンストラクタによる作り方

let nums = new Array( 1, 2, 3, 4, 5 );
let chars = new Array( “a”, “b”, “c”, “d”, “e” );

ここからは、サンプルコードと実行結果を添付しませんが、ぜひ手を動かして実際に作成し、動作させてみてください。

3. Array.of メソッドによる作り方

let nums = Array.of( 1, 2, 3, 4, 5 );
let chars = Array.of( “a”, “b”, “c”, “d”, “e” );

4. Array.from メソッドによる作り方

let nums = Array.of( [1, 2, 3, 4, 5] );
let chars = Array.of( [“a”, “b”, “c”, “d”, “e”] );

Array.from メソッドは、ECMAScript 2015（ES6）で導入されたstatic（静的）なメソッドです。
次のような使いどころ（用途）があります。

  • 配列風のオブジェクトを配列に変換する
  • 文字列を配列に変換する
  • NodeList を配列に変換する
  • Set を配列に変換する
  • Map を配列に変換する
  • 配列の重複を削除する

例として、Mapオブジェクトを配列に変換するサンプルコードを掲載しておきます。

script.js
let myMap = new Map([
  ["name", "taro"],
  ["age", 20]
]);

console.log( Array.from(myMap) );
実行結果

5. Array のサイズのみを指定して初期化する

// 5つの要素を持つ空の配列を作成
let myArray = new Array(5);

6. 繰り返し（ループ）による作り方

こちらは、制御構文の「繰り返し」（ループ）処理の知識が必要となります。

let myArray = [];

for (let i = 0; i < 5; i++) {
  myArray[i] = i + 1;
}

スプレッド構文

JavaScriptのスプレッド構文（spread syntax）は、配列やオブジェクトの要素を展開するための便利な機能で、EcmaScript 2015（ES6）で導入されました。

スプレッド構文は、配列変数やオブジェクト変数の前にドット3つ（…）を記述します。

この項では配列でのスプレッド構文について、様々な使い方をサンプルプログラムを用いて紹介します。

スプレッド構文による配列のコピー

script.js
const originalArray = ['りんご', 'バナナ', 'オレンジ'];
const copiedArray = [...originalArray];

console.log(copiedArray);
実行結果
> ['りんご', 'バナナ', 'オレンジ']

スプレッド構文による配列の結合（マージ）

script.js
const array1 = ['りんご', 'バナナ'];
const array2 = ['オレンジ', 'ぶどう'];
const combinedArray = [...array1, ...array2];

console.log(combinedArray);
実行結果
> ['りんご', 'バナナ', 'オレンジ', 'ぶどう']

スプレッド構文による配列要素の追加

script.js
const fruits = ['りんご', 'バナナ'];
const newFruits = [...array1, 'いちご'];
実行結果
> 実行結果
> ['りんご', 'バナナ', 'いちご']

配列の操作

配列を操作するためによく使用される主なプロパティやメソッドを紹介します。

配列の長さ（サイズ）を取得する

  • length プロパティ

配列オブジェクトの「length」プロパティを使うことで、配列の長さ（サイズ、要素数）を取得できます。
このプロパティは、繰り返し（ループ）処理に欠かせないので、覚えておいてください。

script.js
let week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

console.log( week.length );
実行結果
> 7

配列要素の取得と変更

配列変数の角カッコ[]内にインデックス（添え字）を指定することで、指定した要素の取得および変更が可能です。

【重要】配列のインデックス（添え字）は、0から始まります。

実際のコードで確認してみましょう。

要素の取得

script.js
let week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

console.log( week[2] );
実行結果
> Tue

👆 配列のインデックス（添え字）は0から始まるため、0番目が”Sun”、1番目が”Mon”となり、2番目の”Tue”が表示されています。

続いて、存在しないインデックスが指定された場合の挙動も確認しておきましょう。

script.js
let week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

console.log( week[10] );
実行結果
> undefined

👆 undefined（未定義）と表示されました。

要素の変更

script.js
let week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
week[0] = "日";

console.log( week );
実行結果
▶ (7) ['日', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

インデックス（添え字）の検索

  • indexOf メソッド

indexOf メソッドを使うことで、指定した要素が何番目のインデックスにあるのかを検索できます。

script.js
let week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

console.log( week.indexOf("Wed") );
実行結果
> 3

要素の追加

  • push メソッド
    • 配列の末尾に要素を追加する
  • unshift メソッド
    • 配列の先頭に要素を追加する

push メソッド

pushメソッドは、配列の末尾に要素を追加し、追加後の要素数を返します。

script.js
let members = ["Taro", "Jiro"];
members.push("ichiko");

console.log( members );
実行結果
▶ (3) ['Taro', 'Jiro', 'Ichiko']

👆 このように、配列の末尾に要素が追加されています。

unshift メソッド

unshiftメソッドは、配列の先頭に要素を追加し、追加後の要素数を返します。

script.js
let members = ["Taro", "Jiro"];
members.unshift("ichiko");

console.log( members );
実行結果
▶ (3) ['Ichiko', Taro', 'Jiro']

👆 このように、配列の先頭に要素が追加されています。

要素の削除

  • pop メソッド
    • 配列の指定要素を削除する
  • shift メソッド
    • 配列の指定要素を削除する
    • 削除後の要素を返す

push メソッド

pop メソッドは、配列の指定要素を削除します。

script.js
let members = ["Taro", "Jiro", "ichiko"];
members.pop("ichiko");

console.log( members );
実行結果
▶ (3) ['Taro', 'Jiro']

👆 このように、指定した要素「ichiko」が削除されています。

shift メソッド

shiftメソッドは、配列の先頭の要素を削除し、削除した要素そのものを返します。

script.js
let members = ["Taro", "Jiro", "ichiko"];

console.log( members.shift() );
実行結果
▶ (3) ['Jiro', 'Ichiko']

👆 このように、配列の先頭要素「Taro」が削除されています。

要素の加工

  • slice メソッド
    • 配列の一部を抽出し、新しい配列を返す
  • concat メソッド
    • 2つ以上の配列を結合し、新しい配列を返す

slice メソッド

配列の一部を抽出して新しい配列を返します。

script.js
let array = [1, 2, 3, 4, 5];
let newArray = array.slice( 1, 3 );

console.log( newArray );
実行結果
▶ (2) [2, 3]

👆 この結果になる理由を、プログラムコードから推察してみましょう。

concat メソッド

複数の配列を結合し、新しい配列を返します。

script.js
let nums1 = [1, 2];
let nums2 = [3, 4];

console.log( nums1.concat(nums2) );
実行結果
▶ (4) [1, 2, 3, 4]

最後に

配列を操作するためのプロパティやメソッドは他にもまだありますが、この辺りを抑えておけば良いでしょう。

次に学習するのは『JavaScriptの演算』です。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

最後までお読みいただき、ありがとうございました。

slice メソッドの解答：

sliceメソッドの2つの引数は次の意味を持ちます。
「第一引数以上、第二引数未満を切り取る」

『詳説 JavaScript』メニューに戻る

スポンサーリンク

コメント

タイトルとURLをコピーしました