【JavaScript】条件のどれかに一致するときの条件式の書き方

複数ある条件のうちどれかに一致する条件式

JavaScriptで「条件のどれかに一致する」ときの条件式が必要になる時があります。

// 変数colorへ'green'を代入する
const color = 'green';

// 変数colorが'red','blue','green'のいずれかに一致する場合
if(color === 'red' || color === || 'blue' || color === 'green') {
  // consoleにtrueを表示する
  console.log(true);
}

if文と比較演算子「===」、論理演算子「||」を使って書いていますが、この書き方では条件が増えてくると条件部分が膨大になり読みづらいコードになってしまいます。

条件部分の、

color === 〇〇

を共通化することができると、より簡潔で保守性の高いコードを書ける気がしますね。

配列とincludes()メソッドを使う

配列とincludes()メソッドを使うことで、「条件のいずれかに一致する」ときの条件式を簡潔に記述することができます。

// 変数colorへ'green'を代入する
const color = 'green';

// 比較する条件を配列へ格納する
const condition = ['red', 'blue', 'green'];

// 条件の配列conditionに変数colorの値が含まれる場合
// 言い換えると、変数colorが条件の配列conditionのいずれかに一致する場合
if(condition.includes(color)) {
  // consoleにtrueを表示する
  console.log(true);
}

条件を追加したい場合には、条件の配列の部分を編集するだけでOKです。

// 比較する条件へ'orange'を追加した
const condition = ['red', 'blue', 'green', 'orange'];

また、プログラムの実行中に動的に条件を変更したい場合には、条件の配列をconstではなくletで定義しましょう。