配列の基本的な操作

JavaScriptでは、要素のリストは主に配列として表現されます。配列は多くの操作が可能で、要素を簡単に取り出すことができます。

例: 配列の作成とアクセス

// 配列の作成
const fruits = ["りんご", "バナナ", "みかん"];

// インデックスを指定して要素を取り出す
console.log(fruits[0]); // "りんご"
console.log(fruits[1]); // "バナナ"

配列のインデックスは0から始まります。この仕組みを利用して簡単に要素を取り出せます。

特定のインデックスから要素を取り出す

特定の位置にある要素を取り出すには、インデックスを指定します。以下の例を見てみましょう。

例: インデックスを使ったアクセス

// 配列の作成
const colors = ["赤", "青", "緑", "黄色"];

// 2番目の要素を取り出す
const secondColor = colors[1];
console.log(secondColor); // "青"

// 最後の要素を取り出す
const lastColor = colors[colors.length - 1];
console.log(lastColor); // "黄色"

条件に合う要素を取り出す

filterメソッドを使えば、条件に合致する要素を簡単に取得できます。

例: 条件付きの要素取得

// 数値の配列
const numbers = [1, 2, 3, 4, 5, 6];

// 偶数を取り出す
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

ループで要素を取り出す

配列の全ての要素をループで取り出す方法も一般的です。forループやfor...ofを活用できます。

例: ループによる要素の取得

// 配列の作成
const animals = ["猫", "犬", "ウサギ"];

// forループ
for (let i = 0; i < animals.length; i++) {
    console.log(animals[i]);
}

// for...ofループ
for (const animal of animals) {
    console.log(animal);
}

DOM要素のリストから取り出す

ブラウザでのDOM操作では、クラスやタグ名で取得した要素リストから特定の要素を取り出すことができます。

例: クラス名を使った要素取得

// HTMLの例
// <ul>
//   <li class="item">アイテム1</li>
//   <li class="item">アイテム2</li>
//   <li class="item">アイテム3</li>
// </ul>

// JavaScriptコード
const items = document.querySelectorAll(".item");

// 最初のアイテムを取り出す
console.log(items[0].textContent); // "アイテム1"

// 全てのアイテムをループで取得
items.forEach(item => console.log(item.textContent));