#046　フロントサイド（11）：JavaScript入門8（配列）

配列とは？

配列は、複数の値をひとまとめにして順番に並べたものです。買い物リストや、クラスの生徒名簿のようなものを想像してください。

配列の作成

let fruits = ["りんご", "バナナ", "オレンジ"];

この例では、fruitsという名前の配列を作成し、3つの果物の名前を入れています。

イメージ

配列の要素へのアクセス

配列の各項目を「要素」と呼びます。要素には0から始まる番号（インデックス）がついています。

console.log(fruits[0]); // 出力: りんご
console.log(fruits[1]); // 出力: バナナ
console.log(fruits[2]); // 出力: オレンジ

インデックス番号を利用することで配列に格納された値を取得できます。

配列の長さ

配列の要素数を知りたい場合は、lengthプロパティを使います。

console.log(fruits.length); // 出力: 3

配列の操作

要素の追加

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

fruits.push("ぶどう");
console.log(fruits); // 出力: ["りんご", "バナナ", "オレンジ", "ぶどう"]

要素の削除

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

let lastFruit = fruits.pop();
console.log(lastFruit); // 出力: ぶどう
console.log(fruits); // 出力: ["りんご", "バナナ", "オレンジ"]

配列の繰り返し処理

配列の全要素に対して何かを行いたい場合、for...ofループを使うと便利です。

for (let fruit of fruits) {
    console.log(fruit);
}
// 出力:
// りんご
// バナナ
// オレンジ

配列のメリット

1. データの整理: 関連するデータをまとめて管理できます。

2. 効率的なアクセス: インデックスを使って素早く特定の要素にアクセスできます。

3. 繰り返し処理: 多くのデータに対して同じ操作を簡単に行えます。

配列の使用例

学生の点数を管理する例を見てみましょう

let scores = [85, 90, 78, 92, 88];
let total = 0;

for (let score of scores) {
    total += score;
}

let average = total / scores.length;
console.log(`平均点: ${average}`); // 出力: 平均点: 86.6

まとめ

• 配列は複数の値を順番に並べて格納するためのデータ構造です。

• インデックスを使って個々の要素にアクセスできます。

• push()やpop()などのメソッドを使って要素を追加・削除できます。

• for...ofループを使って全要素に対して操作を行えます。

配列を使いこなすことで、多くのデータを効率的に管理・操作できるようになります。

配列の分割代入とスプレッド構文の例

配列の分割代入

分割代入を使うと、配列の要素を簡単に個別の変数に代入できます。

const fruits = ["りんご", "バナナ", "オレンジ"];

// 分割代入
const [fruit1, fruit2, fruit3] = fruits;

console.log(fruit1); // 出力: りんご
console.log(fruit2); // 出力: バナナ
console.log(fruit3); // 出力: オレンジ

特定の要素をスキップする

const [first, , third] = fruits;
console.log(first);  // 出力: りんご
console.log(third);  // 出力: オレンジ

デフォルト値の設定

const colors = ["赤", "青"];
const [primary, secondary, tertiary = "緑"] = colors;

console.log(primary);   // 出力: 赤
console.log(secondary); // 出力: 青
console.log(tertiary);  // 出力: 緑

配列のスプレッド構文

スプレッド構文 ... を使うと、配列の要素を展開したり、複数の配列を結合したりできます。

配列のコピー

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // 出力: [1, 2, 3]

配列の結合

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];

console.log(combinedArray); // 出力: [1, 2, 3, 4, 5, 6]

配列に要素を追加

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers); // 出力: [1, 2, 3, 4, 5]

分割代入とスプレッド構文を組み合わせた例

const team = ["田中", "佐藤", "鈴木", "高橋", "伊藤"];

// 最初の2人をキャプテンとサブキャプテンに、残りをメンバーとして分ける
const [captain, subCaptain, ...members] = team;

console.log(`キャプテン: ${captain}`);
console.log(`サブキャプテン: ${subCaptain}`);
console.log(`その他のメンバー: ${members.join(", ")}`);

// 出力:
// キャプテン: 田中
// サブキャプテン: 佐藤
// その他のメンバー: 鈴木, 高橋, 伊藤

この例では、分割代入を使って配列の最初の2要素を個別の変数に代入し、残りの要素をスプレッド構文を使って新しい配列にまとめています。

まとめ

• 分割代入を使うと、配列の要素を簡単に別々の変数に代入できます。

• スプレッド構文を使うと、配列の要素を展開したり、複数の配列を結合したりできます。

• これらの機能を組み合わせることで、配列の操作をより柔軟かつ簡潔に行うことができます。

これらのテクニックを使いこなすことで、配列を扱う際のコードをより読みやすく、効率的に書くことができます。

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。