someの使い方、やっとピンときたので書き留めておくログ

はじめに

someがJavaScriptで便利なメソッドだと知ってはいたものの、実際にどういうタイミングで使えばいいのかイメージが湧いていませんでした。しかし、コーディング中にピンとくる使用場面に出会ったので、その内容を記録として残します。

someについて

公式ドキュメントから引用します。

指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します

やりたかったこと

たとえば、特定の形式のファイルのみアップロードを許可する関数を書きたかったとします。
指定した形式で終わっていたら、console.logでOK、合致しなかったらNGを表示します。
このような仕様があったと仮定した場合、私は最初次のようにコードを書いていました。

const allowedExtensions = ['.jpg', '.png', '.gif', '.psd', '.tif', '.tiff'];

const isAllowedExtensions = (file) => {
  for(let allowedExtension of allowedExtensions){
    if (file.endsWith(allowedExtension)) {
      return true;
    }
  }
  return false;
};

上記のようにforループを使用して、許可された拡張子を1つずつチェックし、一致するものがあればtrueを返します。一方で全てのチェックを終えても一致しなければfalseを返します。

テストしてみます。

const testFiles = [
  'document.pdf',
  'image.png',
  'video.mp4',
  'music.mp3',
  'photo.jpg',
  'script.js',
  'index.html',
];

testFiles.forEach(testFile => {
  const isAllowed = isAllowedExtensions(testFile) ? "アップOK" : "ダメだよ！"
  console.log(`${testFile}は${isAllowed}`);
});

いい感じです！
ただ、もう少しスッキリと書けないか探してみました。
そこで登場するのがsomeです。

someを使ってリファクタリングしてみる

someは配列内に指定した条件を満たす要素が1つでもあればtrueを返します。
この特性を活かしてリファクタリングをしました。

const isAllowedExtensions = (file) => {
  return allowedExtensions.some(allowedExtension => file.endsWith(allowedExtension));
};

forループを使わずに同じ結果を得ることができます。

さらにリファクタリングしてみます

アロー関数の省略記法を使ってみます。
引数が1つの場合()を省略でき、さらに１行のみの場合、returnと中括弧を省略できます。

const isAllowedExtensions = file => allowedExtensions.some(allowedExtension => file.endsWith(allowedExtension));

なんと1行で書くことができました、すごい！！！
結果も期待通りです。

まとめ

便利だなと思いつつも使い所がピンとこなかったsomeですが、実際に使用してみたことで理解が深まりました！
全ての要素をチェックしたい場面に遭遇したら、someやeveryといったメソッドが使用できないか考えていきたいです。

参考にさせていただいた記事

以下の記事を参考にしました。ありがとうございました！