【JavaScript】someメソッドの「使い方」などをわかりやすく解説！

この記事ではJavaScriptの『someメソッド』について、

  • someメソッドとは
  • someメソッドの構文
  • someメソッドの使い方
    • 配列要素の値がある条件を満たしているかをテストする
    • 特定の値が配列に存在するかをテストする
    • 特定の文字が存在するかをテストする
    • 配列Aの各要素のいずれかが配列Bの各要素に含まれているかをテストする
  • someメソッドの特徴
    • 空のスロットに対しては処理をスキップする
    • テスト関数が一度でもtrueを返せば、配列の反復処理が終了する
    • 空の配列のテストではどのような条件でもfalseを返す

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

someメソッドとは

someメソッドは、配列の各要素が1つでもテスト関数を満たしていればtrueを返すメソッドです。

someメソッドは配列の各要素に対してテスト関数を実行します。テスト関数が一度でもtrueを返せば、someメソッドはtrueを返します。それ以外はfalseを返します。

後ほどsomeメソッドの構文や使い方について詳しく説明しますが、まず以下に示す簡単なサンプルコードを見てみましょう。

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

const arr02 = [1, 3, 5];
const result02 = arr02.some((num) => num % 2 === 0);
console.log(result02); // false

上記のサンプルコードでは、配列内に偶数が含まれているかをテストしています。arr01は配列内に1つ偶数(4)が含まれているのでtureを返しますが、arr02は配列内に1つも偶数が含まれていないためfalseを返します。

someメソッドとeveryメソッドの違い

someメソッドは配列の各要素が1つでもテスト関数を満たしていればtrueを返します。一方、everyメソッドは配列の各要素が全てテスト関数を満たしていればtrueを返します。

everyメソッドについては下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

【JavaScript】everyメソッドの「使い方」などをわかりやすく解説！
【JavaScript】everyメソッドの「使い方」などをわかりやすく解説！

続きを見る

someメソッドの構文

someメソッドの構文を以下に示します。

someメソッドの構文

array.some(callbackFn[, thisArg])

arrayはテスト対象の配列です。someメソッドの引数と返り値を以下に示します。

引数

  • callbackFn
    • 配列の各要素に対して実行するテスト関数です。
    • 配列の各要素をテストし、テストに合格した場合にはtrueを返します。そうでない場合にはfalseを返します。
    • テスト関数は以下の引数を渡すことができます(第1引数のelementのみを渡して使用することが多いです)。
      • element: テスト実行中の要素
      • index: テスト実行中の要素のインデックス
      • array: someメソッドでテストしている配列
  • thisArg(省略可能)
    • callbackFnを実行する際にthisとして使用される値

返り値(戻り値)

  • テスト関数(callbackFn)が一度でもtrueを返せば、someメソッドはtrueを返す。それ以外はfalseを返す。

someメソッドの使い方

someメソッドについて、以下に示している様々な使い方をこれから説明します。

  • 配列要素の値がある条件を満たしているかをテストする
  • 特定の値が配列に存在するかをテストする
  • 特定の文字が存在するかをテストする
  • 配列Aの各要素のいずれかが配列Bの各要素に含まれているかをテストする

各使い方について順番に説明します。

配列要素の値がある条件を満たしているかをテストする

以下のサンプルコードでは、someメソッドを用いて、配列の要素が1つでも10より大きいものがあるかをテストしています。

const arr01 = [1, 3, 4, 7, 9, 11];
const result01 = arr01.some((num) => num > 10);
console.log(result01); // true

const arr02 = [1, 3, 4, 7, 9];
const result02 = arr02.some((num) => num > 10);
console.log(result02); // false

アロー関数を使わない場合には以下のようになります。

function isBiggerThan10(num) {
  return num > 10;
}

const arr01 = [1, 3, 4, 7, 9, 11];
const result01 = arr01.some(isBiggerThan10);
console.log(result01); // true

const arr02 = [1, 3, 4, 7, 9];
const result02 = arr02.some(isBiggerThan10);
console.log(result02); // false

アロー関数を用いた方が、プログラムが短くなるのでオススメです。

特定の値が配列に存在するかをテストする

以下のサンプルコードでは、someメソッドを用いて、特定の値('mango')が配列に含まれているかをテストしています。

const fruits01 = ['apple', 'banana', 'mango', 'orange'];
const result01 = fruits01.some((fruit) => fruit === 'mango');
console.log(result01); // true

const fruits02 = ['apple', 'banana', 'orange'];
const result02 = fruits02.some((fruit) => fruit === 'mango');
console.log(result02); // false

includesメソッドを使用しても同様のテストをすることができます。includesメソッドを使用した場合のサンプルコードを以下に示します(後ほど、someメソッドとincludesメソッドの違いについて説明します)。

const fruits01 = ['apple', 'banana', 'mango', 'orange'];
const result01 = fruits01.includes('mango');
console.log(result01); // true

const fruits02 = ['apple', 'banana', 'orange'];
const result02 = fruits02.includes('mango');
console.log(result02); // false

特定の文字が存在するかをテストする

以下のサンプルコードでは、someメソッドを用いて、配列で指定した特定の文字がテスト対象の文字列に含まれているかをテストしています。

const targetItemNames = ['ワンピース', 'ナルト', 'ヒロアカ'];

const str01 = 'ワンピース 1巻';
const result01 = targetItemNames.some((word) => str01.includes(word));
console.log(result01); // true

const str02 = '呪術廻戦 1巻';
const result02 = targetItemNames.some((word) => str02.includes(word));
console.log(result02); // false

targetItemNamesから要素が1つずつ取り出され、wordに格納されます。その後、テスト対象の文字列がwordに含まれているかをincludesメソッドを用いてチェックしています。テスト対象の文字列の中に、配列で指定した文字が1つでもあれば、someメソッドはtrueを返します。

配列Aの各要素のいずれかが配列Bの各要素に含まれているかをテストする

以下のサンプルコードでは、someメソッドを用いて、配列arrAの各要素のいずれかが配列arrBの各要素に含まれているかをテストしています。

const arrA = [1, 2, 3];
const arrB = [4, 5, 1];
const result01 = arrA.some((element) => arrB.includes(element));
console.log(result01); // true

someメソッドの特徴

someメソッドの特徴を以下に示します。

  • 空のスロットに対しては処理をスキップする
  • テスト関数が一度でもtrueを返せば、配列の反復処理が終了する
  • 空の配列のテストではどのような条件でもfalseを返す

各特長について順番に説明します。

空のスロットに対しては処理をスキップする

someメソッドは空のスロットに対しては処理をスキップします。サンプルコードを以下に示します。

// 空のスロットがある場合
const arr01 = [1, , 1];
const result01 = arr01.some((num) => num !== 1);
console.log(result01); // false

// 空のスロットがない場合
const arr02 = [1, 2, 1];
const result02 = arr02.some((num) => num !== 1);
console.log(result02); // true

以下のサンプルコードに示すようにテスト関数の第2引数(index)を見ると、空の配列スロットに対しては処理がスキップされていることがよりわかると思います。

const arr01 = [1, , 1];
const result01 = arr01.some((num, index) => {
  console.log('index:', index);
  return num !== 1;
});
console.log(result01);
// ログ出力
// index: 0
// index: 2
// false

テスト関数が一度でもtrueを返せば、配列の反復処理が終了する

someメソッドはテスト関数が一度でもtrueを返せば、配列の反復処理が終了します。サンプルコードを以下に示します。

const arr01 = [1, 2, 1];
const result01 = arr01.some((num, index) => {
  console.log('index:', index);
  return num !== 1;
});
console.log(result01);
// ログ出力
// index: 0
// index: 1
// true

空の配列のテストではどのような条件でもfalseを返す

someメソッドは空の配列のテストではどのような条件でもfalseを返します。サンプルコードを以下に示します。

// 空配列の場合
const arr01 = [];
const result01 = arr01.some(() => true);
console.log(result01); // false

// 空配列ではない場合
const arr02 = [1, 2, 3];
const result02 = arr02.some(() => true);
console.log(result02); // true

someメソッドとincludesメソッドの「違い」

someメソッドとincludesメソッドはどちらも配列に特定の要素が存在するかをテストすることができます。サンプルコードを以下に示します。

const fruits = ['apple', 'banana', 'mango', 'orange'];

// someメソッドを用いた場合
const resultSome = fruits.some((fruit) => fruit === 'mango');
console.log(resultSome); // true

// includesメソッドを用いた場合
const resultIncludes = fruits.includes('mango');
console.log(resultIncludes); // true

ではこれらの違いは何でしょうか。主な違いは2つあります。

  • someメソッドはincludesメソッドよりも柔軟なテストができる
  • someメソッドはオブジェクトの配列に対してテストできる

各違いについて順番に説明します。

someメソッドはincludesメソッドよりも柔軟なテストができる

includesメソッドは配列に特定の要素が含まれているかをチェックしますが、someメソッドはテスト関数を用いて任意の条件式を指定することができます。

someメソッドはオブジェクトの配列に対してテストできる

someメソッドとincludesメソッドのどちらを用いても、オブジェクトの比較では、同じ参照を指しているかをテストします。そのため、以下のサンプルコードではtrueが返るように見えますが、falseが返されます。参照先が異なるからです。

const items = [
  { name: 'table', color: 'red' },
  { name: 'chair', color: 'blue' },
  { name: 'sofa', color: 'green' },
];

const target = { name: 'chair', color: 'blue' };

// someメソッドを用いた場合
const resultSome = items.some((item) => item === target);
console.log(resultSome); //false

// includesメソッドを用いた場合
const resultIncludes = items.includes(target);
console.log(resultIncludes); //false

以下のサンプルコードの場合は、同じ参照を返しているのでtrueが返されます。

const items = [
  { name: 'table', color: 'red' },
  { name: 'chair', color: 'blue' },
  { name: 'sofa', color: 'green' },
];

const target = items[1];

// someメソッドを用いた場合
const resultSome = items.some((item) => item === target);
console.log(resultSome); //true

// includesメソッドを用いた場合
const resultIncludes = items.includes(target);
console.log(resultIncludes); //true

someメソッドはテスト関数を用いると、任意の条件式を指定することができます。このテスト関数にて、オブジェクトの各プロパティを比較することで、オブジェクトの配列に対してテストすることが可能です。サンプルコードを以下に示します。

const items = [
  { name: 'table', color: 'red' },
  { name: 'chair', color: 'blue' },
  { name: 'sofa', color: 'green' },
];

const target = { name: 'chair', color: 'blue' };

// someメソッドで柔軟にテスト
const resultSome = items.some(
  (item) => item.name === target.name && item.color === target.color
);
console.log(resultSome); //true

本記事のまとめ

この記事ではJavaScriptの『someメソッド』について、以下の内容を説明しました。

  • someメソッドとは
  • someメソッドの構文
  • someメソッドの使い方
    • 配列要素の値がある条件を満たしているかをテストする
    • 特定の値が配列に存在するかをテストする
    • 特定の文字が存在するかをテストする
    • 配列Aの各要素のいずれかが配列Bの各要素に含まれているかをテストする
  • someメソッドの特徴
    • 空のスロットに対しては処理をスキップする
    • テスト関数が一度でもtrueを返せば、配列の反復処理が終了する
    • 空の配列のテストではどのような条件でもfalseを返す

お読み頂きありがとうございました。

スポンサーリンク