初心者もマスター！JavaScriptリスト作成の10選

はじめに
●JavaScriptリストの基本
- ○配列とは
- ○オブジェクトとは
●リストの作成方法
- ○サンプルコード1：配列を作成する
- ○サンプルコード2：オブジェクトを作成する
●リストの操作方法
●応用例とサンプルコード
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptを使ったリスト作成・操作ができるようになります。

リストは、プログラミングでよく使われるデータ構造で、データを効率的に扱うことができます。

JavaScriptリストの基本から応用例まで、初心者にもわかりやすい説明とサンプルコードで徹底解説していきます。

●JavaScriptリストの基本

JavaScriptでリストを扱うためには、配列とオブジェクトという2つのデータ構造を理解する必要があります。

○配列とは

配列は、複数のデータを順序付けて格納できるデータ構造です。

配列内の各データにはインデックスが割り振られ、0から始まります。

○オブジェクトとは

オブジェクトは、キーと値のペアでデータを格納するデータ構造です。

キーは一意であり、それぞれのキーに対応する値を取得できます。

●リストの作成方法

JavaScriptでリストを作成する方法には、配列とオブジェクトの作成があります。

○サンプルコード1：配列を作成する

このコードでは、配列を作成しています。

この例では、整数のリストを作成し、コンソールに出力しています。

// 配列を作成
const numbers = [1, 2, 3, 4, 5];

// 配列を出力
console.log(numbers); // [1, 2, 3, 4, 5]

○サンプルコード2：オブジェクトを作成する

このコードでは、オブジェクトを作成しています。

この例では、キーと値のペアを持つオブジェクトを作成し、コンソールに出力しています。

// オブジェクトを作成
const person = {
  name: '山田',
  age: 30
};

// オブジェクトを出力
console.log(person); // {name: "山田", age: 30}

●リストの操作方法

リストを操作する方法として、要素のアクセス、追加、削除、変更があります。

○サンプルコード3：リストの要素にアクセスする

このコードでは、リストの要素にアクセスしています。

この例では、配列とオブジェクトの要素にアクセスし、それぞれの要素をコンソールに出力しています。

const numbers = [1, 2, 3, 4, 5];
const person = {
  name: '山田',
  age: 30
};

// 配列の要素にアクセス
console.log(numbers[0]); // 1

// オブジェクトの要素にアクセス
console.log(person.name); // 山田

○サンプルコード4：リストの要素を追加する

このコードでは、リストの要素を追加しています。

この例では、配列に要素を追加し、オブジェクトにキーと値のペアを追加しています。

const numbers = [1, 2, 3, 4, 5];
const person = {
  name: '山田',
  age: 30
};

// 配列に要素を追加
numbers.push(6);
console.log(numbers); // [1, 2, 3, 4, 5, 6]

// オブジェクトにキーと値のペアを追加
person.job = 'エンジニア';
console.log(person); // {name: "山田", age: 30, job: "エンジニア"}

○サンプルコード5：リストの要素を削除する

このコードでは、リストの要素を削除しています。

この例では、配列の最後の要素を削除し、オブジェクトの特定のキーと値のペアを削除しています。

const numbers = [1, 2, 3, 4, 5];
const person = {
  name: '山田',
  age: 30,
  job: 'エンジニア'
};

// 配列の最後の要素を削除
numbers.pop();
console.log(numbers); // [1, 2, 3, 4]

// オブジェクトの特定のキーと値のペアを削除
delete person.job;
console.log(person); // {name: "山田", age: 30}

○サンプルコード6：リストの要素を変更する

このコードでは、リストの要素を変更しています。

この例では、配列の特定の要素の値を変更し、オブジェクトの特定のキーに対応する値を変更しています。

const numbers = [1, 2, 3, 4, 5];
const person = {
  name: '山田',
  age: 30
};

// 配列の特定の要素の値を変更
numbers[0] = 10;
console.log(numbers); // [10, 2, 3, 4, 5]

// オブジェクトの特定のキーに対応する値を変更
person.name = '鈴木';
console.log(person); // {name: "鈴木", age: 30}

●応用例とサンプルコード

JavaScriptのリストを使って、様々な応用例を実現できます。

次のサンプルコードでは、条件を満たす要素の抽出、リストのソート、要素のマップ、リストのフィルタリングといった操作を紹介します。

○サンプルコード7：リストから特定の条件を満たす要素を抽出する

このコードでは、配列から条件に合う要素を抽出しています。

この例では、配列内の偶数を抽出し、新しい配列に格納しています。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]

○サンプルコード8：リストをソートする

このコードでは、配列の要素をソートしています。

この例では、配列内の数値を昇順にソートしています。

const numbers = [5, 3, 1, 4, 2];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4, 5]

○サンプルコード9：リストの要素をマップする

このコードでは、配列の要素をマップして新しい配列を作成しています。

この例では、配列内の各数値を二乗して新しい配列に格納しています。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(number => number ** 2);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

○サンプルコード10：リストをフィルタリングする

このコードでは、配列をフィルタリングして新しい配列を作成しています。

この例では、配列内の値が特定の条件を満たすものだけを抽出し、新しい配列に格納しています。

const words = ['apple', 'banana', 'cherry', 'orange', 'grape'];
const filteredWords = words.filter(word => word.length > 5);
console.log(filteredWords); // ["banana", "cherry", "orange"]