JavaScript 入門

JavaScript 配列の作成とアクセス

Array（配列）はJavaScriptにおける基礎的なデータ構造であり、一つのVariable（変数）名の下でデータの集合を管理できます。

ArrayはWeb開発、データ処理、アルゴリズム設計において広く使用されています。複数の値を整理された形で扱うことができ、情報の効率的な保存と取得を可能にします。

本セクションでは、Arrayを作成するさまざまな方法、Element（要素）のアクセスと修正方法、そしてIndex（インデックス）操作のベストプラクティスを紹介します。

1. Array（配列）の作成

JavaScriptにはArrayを作成する方法がいくつかあります。最も一般的な方法は、Array LiteralとArray Constructorを使用する方法です。

1.1 Array Literal（配列リテラル）

Array Literalは、最もシンプルで可読性の高いArrayの作成方法です。角括弧 [] を使用し、その中にElementをカンマ区切りで配置します。

// Array Literalを使用して空のArrayを作成
let emptyArray = [];
console.log(emptyArray); // 出力: []

// 初期値（数値）を含むArrayを作成
let numbers = [1, 2, 3, 4, 5];
console.log(numbers); // 出力: [1, 2, 3, 4, 5]

// 初期値（文字列）を含むArrayを作成
let fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 出力: ["apple", "banana", "orange"]

// 混合データタイプのArrayを作成
let mixedArray = [1, 'hello', true, null, undefined];
console.log(mixedArray); // 出力: [1, "hello", true, null, undefined]

解説：

  • 空のArrayは [] で作成します。
  • Arrayには数値、文字列、ブーリアン、null、undefinedを含めることができ、これらを混在させることも可能です。
  • Element間はカンマで区切ります。

1.2 Array Constructor（配列コンストラクタ）

Array Constructorを使用してArrayを作成することもできます。Array Literalほど一般的ではありませんが、その仕組みを理解しておくことは重要です。

// Array Constructorを使用して空のArrayを作成
let emptyArrayConstructor = new Array();
console.log(emptyArrayConstructor); // 出力: []

// 長さを指定してArrayを作成
let arrayWithLength = new Array(5); // 長さ5のArrayを作成するが、中身は空
console.log(arrayWithLength); // 出力: [ <5 empty items> ]

// Array Constructorを使用して初期値を持つArrayを作成
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log(numbersConstructor); // 出力: [1, 2, 3, 4, 5]

解説：

  • new Array() は空のArrayを作成します（[] と同様）。
  • new Array(5) は指定された長さのArrayを作成しますが、定義された値は持ちません。これらの位置は「empty（空）」と見なされます。
  • new Array(1, 2, 3, 4, 5) は、指定された初期値を含むArrayを作成します。

重要なヒント：

Array Constructorに単一の数値を渡すと、その数値の数だけ空のスロットを持つArrayが作成されます（その数値自体がElementになるわけではありません）。特定のサイズのArrayを事前に割り当てる必要がある場合を除き、通常はArray Literalを使用するのがベストです。これにより、その後のArrayメソッド操作における予期せぬ挙動を避けることができます。

1.3 実践例：異なるタイプのArray作成

ユーザー名のリスト：

let usernames = ['Alice', 'Bob', 'Charlie'];
console.log(usernames); // 出力: ["Alice", "Bob", "Charlie"]

製品価格のリスト：

let prices = [19.99, 29.99, 49.99];
console.log(prices); // 出力: [19.99, 29.99, 49.99]

ブーリアン値のリスト：

let booleanValues = [true, false, true];
console.log(booleanValues); // 出力: [true, false, true]

2. Array要素へのアクセス

Arrayを作成したら、Index（インデックス）を使用してそのElementにアクセスできます。JavaScriptのArray Indexは0から始まります。

2.1 Index（インデックス）番号の使用

Elementにアクセスするには、角括弧 [] を使用し、その中にIndex番号を入れます。

let fruits = ['apple', 'banana', 'orange'];

// 最初の要素にアクセス (Index 0)
console.log(fruits[0]); // 出力: apple

// 2番目の要素にアクセス (Index 1)
console.log(fruits[1]); // 出力: banana

// 3番目の要素にアクセス (Index 2)
console.log(fruits[2]); // 出力: orange

解説：

  • fruits[0] は Index 0 の要素、つまり最初の要素 ('apple') にアクセスします。
  • fruits[1] は Index 1 の要素、つまり2番目の要素 ('banana') にアクセスします。
  • fruits[2] は Index 2 の要素、つまり3番目の要素 ('orange') にアクセスします。

3. Array要素の修正

特定のIndexに値を代入することで、ArrayのElementを修正することも可能です。

let fruits = ['apple', 'banana', 'orange'];

// Index 1 の要素を修正
fruits[1] = 'grape';
console.log(fruits); // 出力: ["apple", "grape", "orange"]

// Index 3 に新しい要素を追加 (現在のArray末尾の次)
fruits[3] = 'kiwi';
console.log(fruits); // 出力: ["apple", "grape", "orange", "kiwi"]

解説：

  • fruits[1] = 'grape' は、Index 1 の値を 'banana' から 'grape' に変更します。
  • fruits[3] = 'kiwi' は、Index 3 に新しい要素を追加しました。JavaScriptのArrayはダイナミック（動的）であり、必要に応じてサイズが拡大・縮小します。

4. Arrayの長さ（Array Length）

Arrayの length Property（プロパティ）は、Arrayに含まれるElementの数を返します。

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 出力: 3

length Propertyを使用して、Arrayの末尾に要素を追加することもできます。

let fruits = ['apple', 'banana', 'orange'];
fruits[fruits.length] = 'kiwi';
console.log(fruits); // 出力: ["apple", "banana", "orange", "kiwi"]

これは機能的に fruits.push('kiwi') と同等です（詳細は次のセクションで解説します）。

4.1 範囲外の要素へのアクセス

範囲外（つまりIndexがArrayの長さ以上）の要素にアクセスしようとすると、JavaScriptは undefined を返します。

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[5]); // 出力: undefined

4.2 実践例：Array要素のアクセスと修正

ユーザー名へのアクセス：

let usernames = ['Alice', 'Bob', 'Charlie'];
console.log('最初のユーザー:', usernames[0]); // 出力: 最初のユーザー: Alice
console.log('2番目のユーザー:', usernames[1]); // 出力: 2番目のユーザー: Bob

製品価格の修正：

let prices = [19.99, 29.99, 49.99];
prices[1] = 34.99; // 2番目の製品価格を変更
console.log(prices); // 出力: [19.99, 34.99, 49.99]

ブーリアン値の処理：

let booleanValues = [true, false, true];
booleanValues[0] = false; // 最初の値を変更
console.log(booleanValues); // 出力: [false, false, true]