「覚えておくと便利」JavaScriptで誰でも理解できる簡単な関数を紹介

JavaScriptには、多くの便利な関数があります。これから紹介する関数は、日常的に使われることが多く、初心者でも理解しやすいものです。これらを覚えておくことで、JavaScriptでのコーディングがより効率的になります。

1. Array.prototype.map()

map() 関数は、配列の各要素に対して関数を実行し、新しい配列を返します。元の配列は変更されません。

例:

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

ポイント: 各要素に何らかの処理を施したいときに便利です。例えば、数値を倍にしたり、文字列を変換したりする場合です。

2. Array.prototype.filter()

filter() 関数は、配列の各要素に対して条件をチェックし、条件を満たす要素だけを含む新しい配列を返します。

例:

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

ポイント: 特定の条件に合致する要素だけを取り出したいときに使用します。例えば、偶数だけを抽出したい場合などです。

3. Array.prototype.reduce()

reduce() 関数は、配列の各要素に対して関数を実行し、最終的に1つの値を生成します。

例:

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

ポイント: 配列の全体を集約して1つの値にしたいときに使います。例えば、配列内の全ての数値を合計する場合などです。

4. String.prototype.includes()

includes() 関数は、文字列が指定された部分文字列を含んでいるかどうかをチェックします。

例:

const sentence = "Hello, world!";
console.log(sentence.includes("world")); // true

ポイント: 文字列内に特定の単語やフレーズが含まれているかを確認したいときに便利です。

5. Object.keys()

Object.keys() 関数は、オブジェクトの全てのキーを配列として返します。

例:

const user = {
  name: "Alice",
  age: 25,
  location: "Tokyo"
};
const keys = Object.keys(user);
console.log(keys); // ["name", "age", "location"]

ポイント: オブジェクトのキー（プロパティ名）を一覧として取得したいときに使用します。

6. Object.values()

Object.values() 関数は、オブジェクトの全ての値を配列として返します。

例:

const user = {
  name: "Alice",
  age: 25,
  location: "Tokyo"
};
const values = Object.values(user);
console.log(values); // ["Alice", 25, "Tokyo"]

ポイント: オブジェクトの値を一覧として取得したいときに便利です。

7. Array.prototype.find()

find() 関数は、配列内で条件に合致する最初の要素を返します。見つからなかった場合は undefined を返します。

例:

const numbers = [5, 12, 8, 130, 44];
const found = numbers.find(num => num > 10);
console.log(found); // 12

ポイント: 配列の中から特定の条件を満たす最初の要素を取得したいときに使います。

8. Array.prototype.some()

some() 関数は、配列の少なくとも1つの要素が条件を満たすかどうかをチェックします。少なくとも1つ満たす要素があれば true を返し、なければ false を返します。

例:

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

ポイント: 配列内に条件を満たす要素があるかどうかを確認したいときに便利です。

9. Array.prototype.every()

every() 関数は、配列の全ての要素が条件を満たすかどうかをチェックします。全て満たせば true を返し、1つでも満たさない要素があれば false を返します。

例:

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

ポイント: 配列内の全ての要素が特定の条件を満たしているかを確認したいときに使います。

10. Math.random()

Math.random() 関数は、0以上1未満のランダムな浮動小数点数を返します。

例:

const randomNumber = Math.random();
console.log(randomNumber); // 例えば0.7857893493のようなランダムな数値が出力される

ポイント: ランダムな数値を生成したいときに使います。例えば、ランダムな選択肢を選ぶときなどに便利です。

これらの関数を使いこなすことで、JavaScriptでのプログラミングがより簡単かつ効率的になります。初めは慣れるまで少し時間がかかるかもしれませんが、何度も使っているうちに自然と身についていきます。