VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

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

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