【JavaScript】someメソッドの使い方を徹底解説!

JavaScriptのsome()メソッドについてご存じでしょうか?

JavaScriptで配列を取り扱う際、各要素に格納されている値がある条件に沿っているかを判定したいとします。このような処理を実装するときに利用したいのが、some()メソッドです。

今回は、JavaScriptで配列を取り扱う際に覚えておきたい、some()メソッドの使い方について解説していきます。サンプルコードを交えて詳しく解説しますので、プログラミングスキルの向上に、ぜひお役立てください。


JavaScriptを学び直すなら最新の第7版がおすすめ


2022年ITエンジニア大賞を受賞した話題本



Array.some()メソッドとは?

someメソッドは、JavaScriptのArrayオブジェクトに実装されているメソッドの1つです。

コールバック関数を引数として、Arrayオブジェクトの各要素に対してコールバック関数を都度実行します。コールバック関数で定義した条件を、1つでも満たす要素が存在した場合にtrueを、全て満たしていない場合はfalseを返します。

some()メソッドは、JavaScriptの標準規格であるECMA-262の5thエディションにて追加されたメソッドで、比較的新しい機能です。

そのため、ECMA-262の最新規格に準拠して実装されていないブラウザなどでは、some()メソッドを直接記述しただけでは、動作しないおそれがありますが、Google chromeやFire foxなどの主要なブラウザでは一通りサポートされているので、問題はありません。

Array.some()メソッドの使い方

具体的な例を挙げて、some()メソッドの使い方をサンプルコード付きで解説していきましょう。

今回は、配列にテストの点数が5教科分格納されているとし、赤点(30点以下)が含まれているかを判定する処理を実装したいとします。実際に実装したサンプルコードが、以下の通りです。

// テストの点数    
let test_score = [50, 85, 28, 60, 88];

// コールバック関数の定義
let callback_fun = function(score){
  return score <= 30;
};

// some()メソッド呼び出し
let exist = test_score.some(callback_fun);

// 赤点ありなしの出力
exist ? console.log("赤点あり") : console.log("赤点なし");

上記サンプルコードを実行した場合、コンソールには「赤点あり」の文字列が出力されることが分かります。実際、配列test_scoreには28、つまり赤点の範囲内である値が格納されているため、正しく動作していると言えます。

今度は、28を31以上の値に書き換えて実行してみましょう。すると今度は「赤点なし」と出力されることが分かります。赤点となる値が配列内に格納されていないため、この動作も正しいです。

some()メソッドは、コールバック関数を引数としているため、some()メソッド呼び出しの前にコールバック関数を定義する必要があります。

5行目で定義しているのがコールバック関数です。コールバック関数で定義している変数scoreには、配列の各要素の値が設定される箱だと考えてください。この箱の中に格納されている値が、30点以下であるかを判定する処理を実装しているのです。

コールバック関数を定義したら、some()メソッドを呼び出しましょう(8行目)。1回の呼び出しで、配列の各要素に対してコールバック関数が実行され、trueかfalseのどちらかの値を返してくれるので、後は戻り値を後続の処理に活用しましょう。

for文やif文を使えば目的の処理を実装できそうですが、some()メソッドを利用すれば、for文・if文を使うより場合と比べて、処理がコンパクトに収まるというメリットがあります。配列の各要素に対して条件判定を行う処理を実装する際は、some()メソッドの利用を一度検討することがおすすめです。

ちなみに、コールバック関数の書き方にはサンプルコードで示したもの以外にも、以下のような書き方が存在します。

// コールバック関数の書き方その2
let callback_fun = (score) => {
  return score <= 30;
};

上記サンプルコードで定義したコールバック関数では、「アロー関数」と呼ばれる記法によって記述されています。関数の動作自体は、先に取り上げたサンプルコードの場合と変わりありません。

しかし、アロー関数では「function」の文字列を記述せずともコールバック関数を定義できることから、コールバック関数をコンパクトに記述できるというメリットがあります。

また、上記のコールバック関数は、引数のカッコ、関数の波カッコ、returnキーワードの省略が可能であり、最終的に以下のサンプルコードのように記述することができます。

// コールバック関数の書き方その3
let callback_fun = score => score <= 30;

アロー関数の記法に慣れていくと、functionキーワードを使うよりもソースコードが見やすくなったり、ソースコードの記述量も削減できたりと、多くのメリットを享受できるため、積極的に利用しましょう。

以降、本記事でサンプルコードを掲載するときは、アロー関数で記述したものを掲載していきます。

【応用編】Object.valuesと組み合わせる

ここでは、some()メソッドの応用編として、Object.values()メソッドと組み合わせた使い方について解説していきます。

Object.valuesとは?

Object.values()メソッドは、JavaScriptのオブジェクトから値のみを取り出して配列化する機能を持ちます。

JavaScriptのオブジェクトはその構造上、「キーと値」の対応付けがされているのが前提となっており、JavaScriptで実装されている配列処理向けのメソッドを利用できないという問題点があります。

仮に、テストの点数を格納するためのデータ構造が、以下のサンプルコードのように定義されていたとしましょう。

let test_score = {
  'Japanese' : 65,
  'Mathematics' : 40,
  'SocialStudies' : 70,
  'Science' : 29,
  'English' : 39,
};

サンプルコード中の変数test_scoreは、教科名をキーとして、対応するテストの点数が設定されている、オブジェクトを利用したデータ構造となっています。配列で定義するよりもデータの内容は分かりやすくなっているものの、この状態ではsome()メソッドなどの配列処理に特化したメソッドたちを利用できません。

このような場面で利用したいのが、Object.values()メソッドです。Object.values()メソッドは、オブジェクトの中から値のみを取り出し、順番に配列に格納する機能を持っており、オブジェクトから配列を生成することができるのです。

実際に、オブジェクトtest_scoreから点数のみを取り出す処理を実装したものを、以下のサンプルコードに示します。

// テストの点数のみが格納された配列を生成
let test_score_array = Object.values(test_score);

// 配列であるかを判定
if (Array.isArray(test_score_array)) console.log("test_score_arrayは配列です");

// 配列の要素を参照しコンソール出力
for(let value of test_score_array) console.log(value + "点");

Object.valuesは、抽出対象のオブジェクトを引数にとり、配列を戻り値とします。

5行目では、変数test_score_arrayが配列であるか否かを判定していますが、コンソールには「test_score_arrayは配列です」と出力されているので、配列として定義されていることが分かります。

さらに、8行目で配列の要素を参照しコンソール出力する処理を、for…of構文を使って実装していますが、こちらも正常に動作していることが分かります。

このように、Object.values()メソッドを使えば、オブジェクトから配列を生成することができるのです。

オブジェクトのvalueを判定する

Object.value()メソッドでオブジェクトから配列を作成できれば、配列処理用のメソッドであるsome()メソッドを利用できます。そこで、オブジェクトの各メンバに対して、条件判定を行う処理について考えてみましょう。

例として、オンラインショップにおいて、購入しようとしている商品の中に10,000円のものが存在したら「高額商品が含まれています」と表示する処理を実装したいとします。

ただし、商品はプログラム内で「商品名」をキーとしたオブジェクトで定義されています。実際に実装したサンプルコードは、以下の通りです。

et produsts = {
  'note' : 400,
  'outerwear' : 5400,
  'side dish' : 750,
  'headphone' : 23000,
  'juice' : 300,
};

// 値段だけを格納した配列の生成
let produsts_price_array = Object.values(produsts);

// some()メソッド呼び出し
let exist = produsts_price_array.some(price => price >= 10000);

// コンソール出力処理
if (exist) console.log("高額商品が含まれています");

オブジェクトのままでは、some()メソッドをそのまま利用できないので、Object.values()メソッドを使って配列の生成から行わなければなりません(10行目)。

つづいて13行目で、生成した配列からsome()メソッドを呼び出します。コールバック関数には、値段が10,000以上であったときにtrueであってほしいので「price >= 10000」と記述します。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptのsome()メソッドの使い方について解説してきましたがいかがでしたか?

これまで、配列内の要素が任意の条件に合致しているかを判定するためにはfor構文などを使用する他なかったですが、このsome()メソッドの登場によってその処理が非常に簡潔になりました。

今回学んで頂いた内容を頭の片隅に置いておいていただいて、いざという時にこのsome()メソッドを使えるようにしておきましょう。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。


JavaScriptを学び直すなら最新の第7版がおすすめ


2022年ITエンジニア大賞を受賞した話題本