VIDEO LESSON

JavaScriptのArray.prototype.find()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:28動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はファインドを紹介します。
0:03これは、条件を満たす最初の要素そのものを取得するメソッドです。
0:08前回学んだファインドインデックスが位置を返すのに対して、ファインドは要素そのものを返します。
0:15条件に合う要素がなければ、アンディファインドが返ります。
0:20たとえば、アイディーから利用者を一件だけ探したい場面で役立ちます。
0:25この動画では、書き方と引数、戻り値、記事の基本例、コールバックの引数、該当なしの扱い、
0:30アンディファインドの二つの意味、安全な読み取り方、そして似たメソッドとの違いまで、
0:35実行結果と一緒に学びます。
0:41位置ではなく値そのものが欲しいときに選ぶメソッドだと覚えてください。
0:46まず動作環境を確認します。
0:48記事の互換性情報では、クロームでは四十五以降、エッジでは十二以降、ファイアーフォックスでは二十五以降、
0:53サファリでは八以降で使えます。
0:57ノード・ジェイエスでは四・ゼロ・ゼロ以降に対応しています。
1:02これらの数値はエムディーエヌの互換性データに基づく目安です。
1:06ファインドは比較的古くから使えるメソッドで、現在の主要な環境では広く対応しています。
1:12追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。
1:18対応開始の版は、推奨版という意味ではない点にも注意しましょう。
1:23書き方を確認します。
1:24対象の配列に続けてファインドと書き、カッコの中に判定する関数を渡します。
1:30リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:37判定関数は各要素に対して先頭から順番に呼ばれ、最初に条件を満たした要素そのものが返ります。
1:45判定関数には、要素の値、位置、配列自体が渡されます。
1:49任意で、判定関数の中のディスを決める第二引数も指定できます。
1:54戻り値は要素で、配列ではない点、そして該当がなければアンディファインドになる点が特徴です。
2:02まずは、この基本の形を押さえましょう。
2:05記事の基本例を見ます。
2:06アイディーが一と二の、二つの利用者オブジェクトが入った配列があります。
2:11この配列にファインドを呼び、アイディーが二の要素を探し、その名前を読みます。
2:17実行すると空という名前が表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:23疑問符とドットをつなぐ書き方のおかげで、見つからなかった場合でもエラーを避けられます。
2:30その安全な読み取り方は、後のセクションで詳しく説明します。
2:34この短い一文が、データを一件探す基本の形になります。
2:37判定関数に渡される引数を詳しく見ます。
2:40判定関数は三つの引数を受け取ります。
2:43一つ目は今調べている要素の値、二つ目はその要素の位置、三つ目は対象の配列自体です。
2:49スライドの例では、十、二十、三十という配列で、位置が二の要素を探し、結果は三十になりました。
2:56実機でも同じ結果でした。
2:58通常は値だけを使うことが多いのですが、位置そのものを条件にしたい場合や、
3:03配列の長さと組み合わせたい場合に、残りの引数が役立ちます。
3:08必要な引数だけを書けばよく、途中までで省略しても構いません。
3:13引数の順番は、値、位置、配列の順と覚えてください。
3:17実例として、数値の条件検索を見ます。
3:20五、十二、八、百三十という配列について、十より大きい最初の値をファインドで調べます。
3:27実行すると十二になり、最初に条件に合った値が返ります。
3:31実機でも同じ結果でした。
3:33百三十も条件に合いますが、最初に見つかった時点で探索は終わるため、返るのは十二だけです。
3:41このようにファインドは、条件に合う最初の一個だけが欲しい場面に向いています。
3:47条件に合うすべてが欲しい場合は、後で学ぶフィルターを使うとよいでしょう。
3:53また、探すだけなので、元の配列は変更されないことも実機で確認しています。
3:59記事の境界例で、該当がない場合を確かめます。
4:03一と二の配列で、五より大きい要素を探すと、条件に合う要素がないため、アンディファインドが返ります。
4:11スライドの例では、その結果がアンディファインドと等しいかを比べ、トゥルーになることを示しています。
4:19実機でも同じ結果でした。
4:21アンディファインドは、見つからなかったことを表す約束の値です。
4:26そのため、結果を使う前に、見つかったかどうかを確認する習慣が大切です。
4:32空の配列で探した場合も、答えは同じくアンディファインドになります。
4:38ただし次のセクションで見るように、この判定には一つ落とし穴があります。
4:43記事が注意する仕様を確認します。
4:46ファインドが返すのは要素そのもので、配列ではありません。
4:49ここで大切なのは、配列の中にアンディファインドという要素自体が入っている場合です。
4:55スライドの例のように、アンディファインドを探して見つけた場合でも、返ってくる値はアンディファインドで、
4:59見つからなかった場合と区別できません。
5:04実機でも同じ結果でした。
5:06つまり、戻り値だけでは、見つけたのか見つからなかったのかが分からない場合があるのです。
5:11存在するかどうかや、その位置が正確に必要な場面では、前回学んだファインドインデックスを使って位置で判定してください。
5:19見つからなかった場合の安全な扱い方を見ます。
5:22ファインドの結果がアンディファインドのとき、そのままプロパティを読もうとするとエラーになります。
5:29そこで基本例でも使われていた、疑問符とドットをつなぐ書き方を使います。
5:34これを使うと、対象がアンディファインドの場合に、そのままアンディファインドが返り、
5:38エラーを避けられます。
5:41スライドの例では、登録されていないアイディー九十九を探し、名前がアンディファインドになることを実機で確認しました。
5:49結果がアンディファインドかどうかで、未登録の場合の表示や処理を分けることができます。
5:55探す処理と、なかった場合の処理をセットで書く習慣をつけましょう。
5:59よく似たメソッドとの違いを整理します。
6:02ファインドは条件に合う要素そのものを返しますが、ファインドインデックスはその位置を返します。
6:10スライドの例では、二十について、ファインドは二十、ファインドインデックスは位置一を返し、
6:15どちらも実機で確認しました。
6:19また、フィルターは条件に合う要素すべてを新しい配列として返します。
6:25五、十二、八、百三十から十より大きいものを集めると、十二と百三十の二つが返ることも確認済みです。
6:32要素そのものが一件欲しいならファインド、位置が欲しいならファインドインデックス、
6:38すべて欲しいならフィルター、と目的で選んでください。
6:43まとめです。
6:44ファインドは、条件を満たす最初の要素そのものを返し、該当がなければアンディファインドを返すメソッドです。
6:52ポイントは三つです。
6:53まず、引数には要素と位置を受け取る判定関数を渡し、最初に合った時点で探索が終わること。
7:00次に、見つからなかった結果は、疑問符とドットの書き方で安全に読み取れること。
7:05そして、要素自体がアンディファインドの場合と区別できないため、位置や有無を正確に知りたいときはファインドインデックスを使うことです。
7:16まずは記事の基本例と境界例を実行し、結果を予測してから確かめてみてください。
7:21お疲れさまでした。
7:23一件探す処理が書けるようになれば、実務のデータ検索の土台が固まります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Array.prototype.find()で条件を満たす最初の要素を取得する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのArray.prototype.find()の使い方：引数・戻り値・実例と注意点 →