JavaScriptの配列メソッドとは？初心者でもわかる基本の使い方と活用法

1. 配列とは何かを理解しよう

1. 配列とは何かを理解しよう

JavaScriptの配列とは、複数のデータをひとつの箱にまとめて保存できる仕組みです。例えば、友達の名前をまとめて管理したいときに便利です。

const friends = ["太郎", "花子", "次郎"];
console.log(friends);

["太郎", "花子", "次郎"]

このように、角かっこ [] の中にカンマで区切ったデータを並べることで配列を作ります。

2. 配列にデータを追加する方法

2. 配列にデータを追加する方法

配列に新しいデータを追加したい場合、push メソッドを使います。これは配列の最後にデータを追加する便利な方法です。

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

["りんご", "みかん", "バナナ"]

逆に配列の先頭に追加したい場合は unshift を使います。

3. 配列からデータを削除する方法

3. 配列からデータを削除する方法

配列の最後のデータを削除するには pop メソッド、先頭のデータを削除するには shift メソッドを使います。

const colors = ["赤", "青", "緑"];
colors.pop();  // 最後の"緑"を削除
console.log(colors);

colors.shift(); // 先頭の"赤"を削除
console.log(colors);

["赤", "青"]
["青"]

このように、配列メソッドを使うと簡単にデータの追加・削除ができます。

4. 配列のデータを順番に処理する方法

4. 配列のデータを順番に処理する方法

配列の全てのデータに対して同じ処理をしたい場合、forEach メソッドが便利です。

const numbers = [1, 2, 3];
numbers.forEach(function(num){
  console.log(num * 2);
});

2
4
6

このように、配列の各要素を順番に処理できます。

5. 条件に合うデータを取り出す方法

5. 条件に合うデータを取り出す方法

配列の中から条件に合うデータだけを取り出すには filter メソッドを使います。

const scores = [80, 60, 90, 50];
const highScores = scores.filter(function(score){
  return score >= 70;
});
console.log(highScores);

[80, 90]

この例では、70点以上の点数だけを抽出しています。

6. 配列をまとめて変換する方法

6. 配列をまとめて変換する方法

配列の各データを別の形に変換するには map メソッドを使います。例えば、点数を2倍にしたい場合です。

const points = [10, 20, 30];
const doubled = points.map(function(point){
  return point * 2;
});
console.log(doubled);

[20, 40, 60]

このように、元の配列を壊さずに新しい配列を作ることもできます。

7. 配列の並び替え方法

7. 配列の並び替え方法

配列を昇順や降順に並べ替えるには sort メソッドを使います。文字列だけでなく、数字の並び替えも可能です。

const nums = [30, 10, 20];
nums.sort(function(a, b){
  return a - b;
});
console.log(nums);

[10, 20, 30]

簡単に配列の順序を自由に操作できます。

8. 配列のデータを検索する方法

8. 配列のデータを検索する方法

配列の中から特定のデータを探すには find メソッドや includes メソッドが便利です。

const fruits = ["りんご", "みかん", "バナナ"];
const found = fruits.find(function(fruit){
  return fruit === "みかん";
});
console.log(found);

console.log(fruits.includes("バナナ"));

みかん
true

データの有無を簡単に確認したり、特定のデータを取得できます。

9. 配列メソッドを組み合わせて便利に使う

9. 配列メソッドを組み合わせて便利に使う

配列メソッドは組み合わせて使うことでより便利になります。例えば、フィルターしたデータをさらに並び替えることもできます。

const scores = [40, 80, 60, 90];
const result = scores.filter(s => s >= 50).sort((a, b) => b - a);
console.log(result);

[90, 80, 60]

このように、複数のメソッドを組み合わせることで、複雑な操作も簡単に行えます。

10. 配列メソッドを覚えるコツ

10. 配列メソッドを覚えるコツ

JavaScriptの配列メソッドは種類が多いですが、まずはよく使う push、pop、forEach、map、filter を覚えるのがおすすめです。少しずつ実際のコードで試してみると、自然に使いこなせるようになります。

初心者でも、配列メソッドを使うことでデータ管理や操作がとても簡単になり、コードが読みやすくなります。

まとめ

まとめ

JavaScriptの配列メソッドを学ぶことで、複数のデータを効率よく管理し、操作できる力が身につきます。配列とは複数の値をひとまとめにした箱のようなもので、push や unshift を使えばデータの追加、pop や shift を使えば削除が簡単にできます。また、forEach を使うことで全ての要素に同じ処理を施すことができ、filter や map では条件に合ったデータの抽出や変換が可能です。さらに、sort で順番を並べ替えたり、find や includes でデータを検索することもできます。これらのメソッドを組み合わせることで、複雑なデータ操作も短いコードで実現でき、コードの可読性や保守性も向上します。特に、実務やプロジェクトで配列を扱う場面では、これらの基本的な配列メソッドを理解し使いこなすことが非常に役立ちます。初心者の方はまずよく使うメソッドを順番に試し、少しずつ理解を深めることが重要です。

サンプルプログラムまとめ

ここまで紹介した配列メソッドをまとめて使うサンプルコードです。条件で抽出したデータを変換し、並び替える操作を一度に行っています。

const scores = [40, 80, 60, 90, 50, 30];

// 50以上のスコアを抽出し、2倍に変換して降順に並び替え
const processedScores = scores
  .filter(score => score >= 50)
  .map(score => score * 2)
  .sort((a, b) => b - a);

console.log(processedScores);

[180, 160, 120, 100]

このように、filter、map、sort を組み合わせることで、配列のデータを効率的に処理できます。複雑なデータ操作も、短く読みやすいコードで実現可能です。