findで見つからない結果を扱う：名前を読む前に分岐しよう

一覧にある番号なら動くのに、別の番号では名前を表示できない。findで見つからない結果を扱うには、探す処理と、見つけた情報を読む処理の間に分岐を置きます。画面を作る前に、短いデータで結果を確かめましょう。

題材は架空の音声ガイドです。番号に対応する案内を一件だけ探します。ここでは手元の配列だけを使い、通信、音声の再生、実在する施設の情報は扱いません。コードはJavaScriptの実行環境で単独で試せます。

一件を探す処理の、二つの出口を決める

配列は順番に値を並べたものです。今回は各要素を、idとtitleを持つオブジェクトにします。探した番号があれば案内名を返し、なければ「該当する音声ガイドはありません」と返す方針を先に決めます。

MDNのfindの説明では、条件に合う最初の要素が戻り値になり、一致するものがなければundefinedが返ることを確認できます。undefinedは、この例では「対象のオブジェクトが得られなかった」と判断するために使います。

複数件の一覧を作るfilterによる絞り込みとは戻り値が異なります。findの結果を配列だと思って件数を数えるのではなく、一件のオブジェクトか、見つからなかった結果かを分けます。

titleへ触る前に、undefinedを確認する

次の関数は、番号を受け取り、表示する文章を返します。画面への書き込みは行わず、結果をconsole.logで確認します。

const guides = [
  { id: "g01", title: "入口の案内" },
  { id: "g02", title: "中庭の案内" }
];

function guideMessage(id) {
  const guide = guides.find((item) => item.id === id);
  if (guide === undefined) {
    return "該当する音声ガイドはありません";
  }
  return guide.title;
}

console.log(guideMessage("g02"));
console.log(guideMessage("g99"));

最初の出力は「中庭の案内」、次は見つからない場合の文章です。番号は文字列で統一しています。探す番号を別の型へ勝手に変換する処理や、表記の揺れを補正する処理は含めていません。

失敗する書き方は、結果を調べずにすぐguide.titleを読む形です。対象がないときはundefinedのtitleを読もうとしてエラーになります。上の修正では先に戻ることで、その場合にtitleを読まない順序にしています。

重複する番号と、空の配列を別々に試す

同じidを持つ案内を末尾に追加すると、findは先にある案内を返します。「一致したから番号は一意だった」とは判断できません。今回の音声ガイドでは番号が一つの案内を指す想定なので、重複を見つけたらデータの付け方も調べます。

もう一つの確認は、配列を空にした場合です。要素がなければどの番号も見つからないため、同じ案内文になるはずです。一件見つかる場合だけでなく、データが一件もない状態でも関数が文章を返すか確かめましょう。

ただし外部からの取得に失敗した状態まで、空の配列へ置き換える設計はここでは扱いません。後で通信を足すときは、取得できなかったことと、取得した一覧に番号がなかったことを別に伝える必要があります。

存在する番号と、見つからない番号の出力を比べる

g01、g02、g99、空文字の四つについて、実行前に出力を紙に書きます。一つずつ関数へ渡し、予想と照合してください。次に練習用データからg02を外し、同じ呼び出しで結果が変わるか試します。

結果が違ったら、探した文字列、配列内のid、分岐した場所の順に見ます。確認メモには「どのデータで、何を探して、何が出たか」を残すと、失敗の条件を後で再現できます。JavaScriptの無料レッスンへ進む前に、見つからない場合も正常に文章を返せることを今回の完成条件にしてください。