JavaScriptのリスト（配列）操作完全ガイド：基本から応用まで徹底解説

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. はじめに

JavaScriptは、Web開発において最も重要なプログラミング言語の一つです。その中でも「配列（リスト）」は、データを整理・管理するために非常に役立つデータ構造です。本記事では、JavaScriptの配列操作について基礎から応用までを網羅的に解説します。初心者から中級者まで、配列を効果的に使いこなす方法を学ぶための最適なガイドです。

2. リスト（配列）の基本：作成と初期化

リスト（配列）とは？

配列とは、データを一つにまとめて管理できるデータ構造です。例えば、名前や数値などを順序付きで保存することができます。JavaScriptでは配列は柔軟性が高く、様々なデータ型を混在させることが可能です。

let fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits); // ["りんご", "バナナ", "みかん"]

配列とオブジェクトの違い

配列は順序付きのデータを扱うのに対して、オブジェクトはキーと値のペアでデータを扱います。それぞれ適材適所で使い分ける必要があります。

let colors = ["赤", "青", "緑"];
console.log(colors[0]); // "赤"

let person = { name: "太郎", age: 25 };
console.log(person.name); // "太郎"

リストの作成方法

JavaScriptで配列を作成する主な方法は以下の通りです。

リテラル表記

配列を最も簡単に作成する方法です。

let numbers = [1, 2, 3];

Arrayコンストラクタ

より柔軟な方法で配列を生成します。

let emptyArray = new Array(5); // 長さ5の空の配列
let filledArray = new Array(1, 2, 3); // [1, 2, 3]

スプレッド構文を使った作成

他の配列を元に新しい配列を作成します。

let original = [1, 2];
let extended = [...original, 3, 4]; // [1, 2, 3, 4]

実用例：リストを使ったデータ管理

例えば、オンラインショップの商品一覧を配列で管理する場合を考えます。

let products = ["商品A", "商品B", "商品C"];
console.log(`商品リスト: ${products.join(", ")}`); // 商品リスト: 商品A, 商品B, 商品C

このように配列を使うことで、簡単に複数のデータを管理し、後から操作することができます。

3. リストへの要素の追加と削除

要素の追加方法

配列の末尾に追加する（push）

pushメソッドを使用すると、配列の末尾に新しい要素を追加できます。

let fruits = ["りんご", "バナナ"];
fruits.push("みかん");
console.log(fruits); // ["りんご", "バナナ", "みかん"]

配列の先頭に追加する（unshift）

unshiftメソッドを使うと、配列の先頭に要素を追加できます。

let numbers = [2, 3, 4];
numbers.unshift(1);
console.log(numbers); // [1, 2, 3, 4]

特定の位置に追加する（splice）

spliceメソッドは、配列の特定の位置に要素を挿入する際に便利です。

let colors = ["赤", "青", "緑"];
colors.splice(1, 0, "黄"); // 1番目の位置に"黄"を挿入
console.log(colors); // ["赤", "黄", "青", "緑"]

要素の削除方法

配列の末尾から削除する（pop）

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

let fruits = ["りんご", "バナナ", "みかん"];
let removed = fruits.pop();
console.log(fruits); // ["りんご", "バナナ"]
console.log(removed); // "みかん"

配列の先頭から削除する（shift）

shiftメソッドを使うと、配列の先頭の要素を削除できます。

let numbers = [1, 2, 3, 4];
let removed = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removed); // 1

特定の位置から削除する（splice）

spliceメソッドを使うことで、特定の位置から要素を削除できます。

let colors = ["赤", "黄", "青", "緑"];
colors.splice(1, 2); // 1番目から2つの要素を削除
console.log(colors); // ["赤", "緑"]

実用例：TODOリストの管理

以下は、TODOリストを操作する簡単な例です。

let todos = ["タスク1", "タスク2"];

// 新しいタスクを追加
todos.push("タスク3");
console.log(todos); // ["タスク1", "タスク2", "タスク3"]

// 最初のタスクを完了して削除
todos.shift();
console.log(todos); // ["タスク2", "タスク3"]

このように、配列を活用することで効率的にデータを操作できます。

4. リストの操作方法：結合、分割、探索

リストの結合方法

concatメソッドを使用する

concatメソッドは、複数の配列を結合して新しい配列を作成します。元の配列は変更されません。

let array1 = ["りんご", "バナナ"];
let array2 = ["みかん", "パイナップル"];
let combined = array1.concat(array2);
console.log(combined); // ["りんご", "バナナ", "みかん", "パイナップル"]
console.log(array1); // 元の配列は変更されない

スプレッド構文を使用する

スプレッド構文（...）は、より簡潔に配列を結合する方法です。

let array1 = ["赤", "青"];
let array2 = ["緑", "黄"];
let combined = [...array1, ...array2];
console.log(combined); // ["赤", "青", "緑", "黄"]

リストの分割方法

sliceメソッドを使用する

sliceメソッドは、指定した範囲の要素を取り出して新しい配列を作成します。元の配列は変更されません。

let numbers = [1, 2, 3, 4, 5];
let sliced = numbers.slice(1, 4); // インデックス1から3まで取り出す（4は含まない）
console.log(sliced); // [2, 3, 4]
console.log(numbers); // 元の配列は変更されない

splitを使用して文字列を配列に変換する

文字列を特定の区切り文字で分割して配列に変換できます。

let text = "JavaScript,Python,Ruby";
let languages = text.split(",");
console.log(languages); // ["JavaScript", "Python", "Ruby"]

リストの探索方法

indexOfとlastIndexOfで要素を検索する

• indexOfは、指定した要素が配列内で最初に出現する位置を返します。
• lastIndexOfは、配列内で最後に出現する位置を返します。

let colors = ["赤", "青", "緑", "青"];
console.log(colors.indexOf("青")); // 1
console.log(colors.lastIndexOf("青")); // 3

条件で要素を検索する（findとfindIndex）

• findは、指定した条件に一致する最初の要素を返します。
• findIndexは、一致する要素のインデックスを返します。

let numbers = [10, 20, 30, 40];
let found = numbers.find(num => num > 25);
console.log(found); // 30

let foundIndex = numbers.findIndex(num => num > 25);
console.log(foundIndex); // 2

特定の要素が存在するか確認する（includes）

includesメソッドは、配列内に指定した要素が存在するかどうかを確認します。

let fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits.includes("バナナ")); // true
console.log(fruits.includes("スイカ")); // false

実用例：配列操作を活用したシナリオ

以下は、ショッピングカートを操作する簡単な例です。

let cart = ["商品A", "商品B"];

// 新商品を追加
cart = cart.concat(["商品C", "商品D"]);
console.log(cart); // ["商品A", "商品B", "商品C", "商品D"]

// 特定の商品を取り出す
let selected = cart.slice(1, 3);
console.log(selected); // ["商品B", "商品C"]

// 商品が含まれているか確認
console.log(cart.includes("商品A")); // true

5. リストの並び替えと加工

リストの並び替え

昇順・降順の並び替え（sortメソッド）

sortメソッドを使用すると、配列の要素を並び替えることができます。デフォルトでは、文字列として要素をソートします。

let fruits = ["みかん", "りんご", "バナナ"];
fruits.sort();
console.log(fruits); // ["いちご", "りんご", "みかん"]

数値の場合、デフォルトのソートでは期待通りに動作しないため、カスタムの比較関数を提供します。

let numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // 昇順
console.log(numbers); // [1, 5, 10, 25, 40, 100]

numbers.sort((a, b) => b - a); // 降順
console.log(numbers); // [100, 40, 25, 10, 5, 1]

逆順に並び替える（reverseメソッド）

reverseメソッドを使用すると、配列の順序を逆にすることができます。

let colors = ["赤", "青", "緑"];
colors.reverse();
console.log(colors); // ["緑", "青", "赤"]

リストの加工

新しい配列を作成する（mapメソッド）

mapメソッドを使用すると、元の配列を加工して新しい配列を作成できます。

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

条件を満たす要素を抽出する（filterメソッド）

filterメソッドは、特定の条件を満たす要素だけを含む新しい配列を返します。

let numbers = [10, 20, 30, 40];
let greaterThan20 = numbers.filter(num => num > 20);
console.log(greaterThan20); // [30, 40]

累積処理を行う（reduceメソッド）

reduceメソッドを使用すると、配列内の要素を累積して1つの値を計算できます。

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10

実用例：リストの並び替えと加工

以下は、商品の価格を管理し、並び替えや加工を行う例です。

let products = [
  { name: "商品A", price: 500 },
  { name: "商品B", price: 300 },
  { name: "商品C", price: 800 },
];

// 価格順に昇順で並び替え
products.sort((a, b) => a.price - b.price);
console.log(products);

// 価格が500以上の商品を抽出
let expensiveProducts = products.filter(product => product.price >= 500);
console.log(expensiveProducts);

// 全商品の合計金額を計算
let totalPrice = products.reduce((total, product) => total + product.price, 0);
console.log(totalPrice); // 1600

6. 多次元リストの作成と操作

多次元リストの基本

多次元リストは、配列の中に配列を持つことで構成されます。たとえば、行と列で構成される表形式のデータは、多次元リストで表現できます。

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[0]); // [1, 2, 3]
console.log(matrix[1][2]); // 6（2行目の3列目）

多次元リストの作成方法

手動で作成する

手動で多次元リストを作成する場合、単純に配列をネストさせます。

let grid = [
  ["A1", "A2", "A3"],
  ["B1", "B2", "B3"],
  ["C1", "C2", "C3"]
];
console.log(grid);

動的に作成する

ループを使用して多次元リストを動的に生成することも可能です。

let rows = 3;
let cols = 4;
let matrix = [];

for (let i = 0; i < rows; i++) {
  matrix[i] = [];
  for (let j = 0; j < cols; j++) {
    matrix[i][j] = `R${i + 1}C${j + 1}`; // 行と列を示す値
  }
}
console.log(matrix);

多次元リストの操作方法

要素へのアクセス

多次元リストでは、インデックスを2重に使用して要素にアクセスします。

let matrix = [
  [10, 20, 30],
  [40, 50, 60],
  [70, 80, 90]
];
console.log(matrix[1][2]); // 60（2行目の3列目）

要素の変更

指定した位置の値を直接変更できます。

matrix[0][1] = 25;
console.log(matrix); // [[10, 25, 30], [40, 50, 60], [70, 80, 90]]

ネストされたループを使った操作

多次元リストを操作する際、ネストされたループを使用するのが一般的です。

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
  }
}

行や列を取得する

特定の行や列を取り出すことも簡単です。

• 行を取得

  console.log(matrix[0]); // [10, 25, 30]

• 列を取得

  let column = matrix.map(row => row[1]);
  console.log(column); // [25, 50, 80]

実用例：座席表の管理

以下は、映画館の座席表を管理する例です。

let seats = [
  ["空席", "空席", "予約済み"],
  ["空席", "予約済み", "予約済み"],
  ["空席", "空席", "空席"]
];

// 2行目3列目の座席を予約済みに変更
seats[1][2] = "空席";
console.log(seats);

// すべての空席をカウント
let emptySeats = seats.flat().filter(seat => seat === "空席").length;
console.log(`空席の数: ${emptySeats}`);

7. リストのパフォーマンスとベストプラクティス

パフォーマンス向上のためのテクニック

配列の長さを固定する

JavaScriptの配列は動的にサイズが変わりますが、大量のデータを処理する場合は、初期化時にサイズを固定することで効率を向上させることができます。

let largeArray = new Array(1000); // 1000要素分の配列を確保

メモリ効率を意識する

不要なデータを配列に保持し続けるとメモリを浪費します。使用しない要素は削除するか、配列全体をリセットしましょう。

let data = [1, 2, 3, 4, 5];
data.length = 0; // 配列をリセット
console.log(data); // []

配列メソッドを最適に選ぶ

例えば、pushとunshiftは似ていますが、pushは末尾に追加するだけなので効率的です。一方、unshiftはすべての要素をシフトするため、コストが高くなります。

• 効率的: push
• コストが高い: unshift

let array = [];
array.push(1); // 効率的
array.unshift(0); // コストが高い

大規模な配列の反復処理を最適化

ネイティブのforループは高速で、特に大規模な配列を処理する場合に効果的です。forEachやmapも便利ですが、パフォーマンスが重要な場面ではforループを検討しましょう。

let largeArray = new Array(1000000).fill(1);

// 高速なforループ
for (let i = 0; i < largeArray.length; i++) {
  largeArray[i] += 1;
}

配列操作のベストプラクティス

イミュータブル（不変）操作を優先する

配列を直接変更する操作（破壊的操作）は、予期しないバグを引き起こす原因になります。代わりに新しい配列を作成する方法を優先しましょう。

• 破壊的操作の例

  let array = [1, 2, 3];
  array.push(4); // 元の配列が変更される

• イミュータブル操作の例

  let array = [1, 2, 3];
  let newArray = [...array, 4]; // 新しい配列を作成
  console.log(newArray); // [1, 2, 3, 4]

スプレッド構文やメソッドを適切に使用する

スプレッド構文（...）やmap、filter、reduceを効果的に活用することで、簡潔で読みやすいコードを実現できます。

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

// 各要素を2倍にする
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

意味のある命名をする

配列やその内容を示す明確な名前を付けることで、コードの可読性が向上します。

let arr = [1, 2, 3]; // 悪い例
let studentScores = [85, 90, 78]; // 良い例

長さを頻繁に変更しない

配列の長さを頻繁に変更すると、パフォーマンスが低下する可能性があります。特にunshiftやspliceは注意が必要です。

実用例：大量データの効率的な操作

以下は、大量のユーザーデータを処理する例です。

let users = Array.from({ length: 100000 }, (_, i) => ({ id: i, name: `User${i}` }));

// 名前に"User1"が含まれるユーザーをフィルタリング
let filteredUsers = users.filter(user => user.name.includes("User1"));
console.log(filteredUsers.length); // 該当するユーザー数を表示

8. よくある質問（FAQ）

Q1: JavaScriptのリストと配列は同じ意味ですか？

A: はい、ほとんどの場合「リスト」と「配列」は同じ意味で使われます。厳密にはJavaScriptでは「Array」というデータ型が正式名称ですが、配列がリスト形式のデータを管理できるため、一般的に「リスト」とも呼ばれます。

Q2: 配列のコピーを作成するにはどうすればいいですか？

A: 配列のコピーを作成するには、スプレッド構文（...）やsliceメソッドを使用するのが一般的です。

• スプレッド構文を使用

  let original = [1, 2, 3];
  let copy = [...original];
  console.log(copy); // [1, 2, 3]

• sliceメソッドを使用

  let original = [1, 2, 3];
  let copy = original.slice();
  console.log(copy); // [1, 2, 3]

Q3: 配列の重複要素を削除するにはどうすればいいですか？

A: 重複要素を削除するには、Setオブジェクトを使用する方法が簡単です。

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Q4: 配列を逆順に並び替える方法は？

A: reverseメソッドを使用すると、配列を逆順に並び替えることができます。

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]

Q5: 配列が空であるかどうか確認する方法は？

A: 配列のlengthプロパティを確認すれば、配列が空であるかどうかを判断できます。

let emptyArray = [];
console.log(emptyArray.length === 0); // true

Q6: 配列内のすべての要素が特定の条件を満たすか確認するには？

A: everyメソッドを使用すると、配列内のすべての要素が条件を満たしているか確認できます。

let numbers = [2, 4, 6, 8];
let allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

Q7: 配列の中から最初に条件を満たす要素を取得するには？

A: findメソッドを使用すると、最初に条件を満たす要素を取得できます。

let numbers = [10, 15, 20, 25];
let firstOver15 = numbers.find(num => num > 15);
console.log(firstOver15); // 20

Q8: 配列を特定の値で埋めるにはどうすればいいですか？

A: fillメソッドを使用すると、配列全体または一部を特定の値で埋めることができます。

let array = new Array(5).fill(0);
console.log(array); // [0, 0, 0, 0, 0]

Q9: 配列をランダムにシャッフルする方法はありますか？

A: 以下のコードで、配列をランダムに並び替えることができます。

let numbers = [1, 2, 3, 4, 5];
numbers.sort(() => Math.random() - 0.5);
console.log(numbers); // ランダムな順序で並び替えられる

Q10: 配列を文字列に変換するにはどうすればいいですか？

A: joinメソッドを使用すると、配列の要素を文字列として連結できます。

let words = ["JavaScript", "is", "fun"];
let sentence = words.join(" ");
console.log(sentence); // "JavaScript is fun"

9. まとめ

この記事では、JavaScriptの配列（リスト）操作について、基礎から応用まで詳しく解説しました。初心者から中級者までが実践的に活用できる内容を網羅し、配列を効果的に扱うスキルを身に付けるためのガイドとしてお届けしました。

振り返り：この記事で学んだ内容

1. リスト（配列）の基本

• 配列の作成方法、初期化、配列とオブジェクトの違いを学びました。
• 配列は順序付きのデータ管理に最適であることを理解しました。

1. リストへの要素の追加と削除

• pushやunshiftで要素を追加し、popやshiftで削除する方法を習得しました。
• spliceを使用して特定の位置に要素を追加・削除する技術も身に付けました。

1. リストの結合、分割、探索

• concatやスプレッド構文で配列を結合し、sliceで分割する方法を確認しました。
• indexOfやfindを使って効率的に要素を探索する方法も理解しました。

1. リストの並び替えと加工

• sortで配列を昇順・降順に並び替え、mapやfilterで配列を加工する方法を学びました。
• reduceを使って累積処理を行う応用技術も解説しました。

1. 多次元リストの作成と操作

• 配列の中に配列を持つ多次元リストを作成し、操作する方法を習得しました。
• ネストされたループを使った操作や特定の行や列を取り出すテクニックも確認しました。

1. パフォーマンスとベストプラクティス

• 効率的な配列操作のテクニックを紹介し、大量データを扱う際の注意点を学びました。
• イミュータブル操作や適切なメソッド選択の重要性も解説しました。

1. よくある質問（FAQ）

• 実践的な疑問に答え、配列操作の理解を深めるヒントを提供しました。

配列操作を活用するためのポイント

• 基本を押さえる
  配列の作成や要素の追加・削除といった基本操作を確実にマスターしましょう。基礎があれば、応用にもスムーズに対応できます。
• メソッドを活用する
  map、filter、reduceなどの便利なメソッドを使うことで、コードを簡潔で効率的に書くことができます。
• パフォーマンスに配慮する
  大規模なデータを扱う場合、ネイティブのループやイミュータブル操作を活用して効率を向上させましょう。
• 練習する
  理論だけでなく、実際にコードを書いて配列操作を練習することで理解が深まります。

次に学ぶべきトピック

配列操作をマスターしたら、次のステップとして以下のトピックを学ぶことをお勧めします。

1. オブジェクト操作
   配列と組み合わせて使うことで、複雑なデータ構造を扱えるようになります。
2. ES6以降の新機能
   スプレッド構文、Set、Mapなど、最新のJavaScript機能を活用しましょう。
3. アルゴリズムとデータ構造
   ソートアルゴリズムやデータ構造の基礎を学び、配列を効率的に活用するスキルを磨きましょう。

最後に

配列操作はJavaScriptの基本的なスキルであり、Web開発において頻繁に利用されます。本記事を参考に、配列操作の基礎と応用をしっかりと身に付けてください。練習と実践を繰り返すことで、さらに高度なスキルを習得できるでしょう。

あなたのJavaScriptスキルがさらに向上することを願っています！

広告