someで条件に合う要素の有無を調べる：trueとfalseで案内を選ぼう

点検項目の一覧から「未確認が残っているか」だけを知りたい。名前の一覧や件数は必要ない。そんなときはsomeで条件に合う要素の有無を調べると、trueかfalseの二つの値で次の処理を選べます。

今回は架空の展示準備メモを題材にします。実際の施設の点検基準ではなく、配列の判定を学ぶためのデータです。チェックボックスの画面は作らず、手元のデータから案内文を返します。

ほしい答えを「あるか」に絞る

someへ渡す関数には、一つの要素が条件に合うかを書くことにします。今回の条件は「checkedがfalseであること」です。checkedは確認済みかを示す項目で、値はtrueかfalseに統一します。

MDNのsomeの説明では、条件を満たす要素を見つけるとtrueを返し、その時点で調べる処理を終えることを確認できます。一件もなければfalseです。戻ってくるのは点検項目そのものではありません。

名前を読みたいときのfindによる一件取得とは、使う結果が違います。今回は「どの項目か」を表示しないので、有無だけを変数hasUncheckedへ入れます。必要な結果を先に決めると、戻り値の扱いも絞れます。

空の一覧を先に分けて、未確認を探す

次は単独で実行できるコードです。itemsにはcheckedを持つオブジェクトの配列を渡します。通信や保存、データ形式の検証は含めません。

function inspectionMessage(items) {
  if (items.length === 0) {
    return "点検項目を用意してください";
  }
  const hasUnchecked = items.some((item) => item.checked === false);
  return hasUnchecked ? "未確認の項目があります" : "登録した項目は確認済みです";
}

const items = [
  { name: "案内札", checked: true },
  { name: "配布資料", checked: false }
];
console.log(inspectionMessage(items));
console.log(inspectionMessage([{ name: "案内札", checked: true }]));
console.log(inspectionMessage([]));

出力は、未確認がある案内、登録項目が確認済みの案内、項目の準備を求める案内の順です。条件に一致した結果をそのまま名前として読まず、案内文を選ぶために使っています。

このコードは項目が揃っているかまでは検査しません。「登録した項目は確認済み」という結果を、展示の準備全体が終わった証明に広げないでください。確認対象の一覧を決める作業と、一覧内の値を調べる処理は別です。

falseが何を意味するか、データと一緒に読む

空の配列でもsomeはfalseを返します。したがって「未確認がないならすべて完了」とだけ書くと、項目を一つも用意していない状態でも完了と表示してしまいます。今回は先にlengthで空かを調べ、別の文章を返しています。

また、checkedを文字列の「false」に変えると、真偽値のfalseとの比較には一致しません。この練習ではデータをtrueかfalseに統一し、形が違うデータはそのまま投入しない約束にします。画面や外部から受け取る実装へ広げる際は、その入口で形式を確かめる必要があります。

someの中で全項目の名前を出力する処理も、今回の用途には混ぜません。一件見つかると調べ終えるため、全件を処理する場所にはできないからです。条件を調べる関数には、条件を返すことだけを書きます。

未確認の位置を変え、空配列との違いも確かめる

まず未確認を先頭に置き、次に末尾に置きます。どちらも同じ「未確認の項目があります」になるかを試してください。未確認を二件に増やしても、今回は件数を表示しないため、文章は同じです。

最後にすべてtrueの配列と空配列を比較し、違う案内になることを確かめます。、入力した配列と結果の組を四行残しましょう。JavaScriptの無料レッスンへ進むときも、返されたfalseだけを見るのではなく、どのデータに対する答えかを説明できることを確認してください。