VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00今回はエブリーを紹介します。
0:03これは、配列のすべての要素が、決めた条件を満たしているかどうかを調べるメソッドです。
0:09全部が条件を満たせばトゥルー、一つでも外れる要素があればフォルスが返ります。
0:16たとえば、全員が合格点以上かどうか、全ての入力欄が埋まっているかどうか、
0:20といった全件チェックの場面で役立ちます。
0:24この動画では、書き方と引数、戻り値、記事の基本例、コールバックの引数、成人の確認の実例、
0:32よく似たサムとの違い、そして空配列や途中で判定が終わる注意点まで、実行結果と一緒に学びます。
0:39全て、という言葉が鍵になるメソッドです。
0:42まず動作環境を確認します。
0:44記事の互換性情報では、クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一・五以降、
0:48サファリでは三以降で使えます。
0:52ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。
0:56これらの数値はエムディーエヌの互換性データに基づく目安です。
1:00エブリーは古くからある基本的な機能で、現在の主要な環境では広く使えます。
1:05追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。
1:10対応開始の版は、推奨版という意味ではない点にも注意しましょう。
1:14長く使われている分、解説やサンプルも豊富で、調べながら学びやすいメソッドでもあります。
1:20書き方を確認します。
1:21対象の配列に続けてエブリーと書き、カッコの中に、条件を判定する関数を渡します。
1:28リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:34この判定する関数をコールバックと呼び、要素ごとに自動で呼び出されます。
1:39第二引数として、判定の中で使うディスを指定する値も渡せますが、通常は省略します。
1:46戻り値は、全部が条件を満たすときはトゥルー、そうでないときはフォルスです。
1:52フォーイーチのように結果を受け取らないメソッドとは違い、エブリーは判定結果そのものが成果になります。
2:00まずは、この基本の形を押さえましょう。
2:03記事の基本例を見ます。
2:04八十点、七十点、九十点という三人分の点数が入った配列があります。
2:09この配列にエブリーを呼び、六十点以上かどうかを判定する処理を渡します。
2:15実行するとトゥルーが表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:22三つとも六十点以上なので、全て満たす、という結果です。
2:26もし一人でも五十九点のような低い点数が混ざれば、結果はフォルスに変わることも実機で確認しています。
2:34条件と全要素、という二つの視点でコードを読むと、結果を予測しやすくなります。
2:40点数と合格ラインを自分で変えて実行すると、フォルスになる条件も体感できます。
2:47コールバックが受け取る引数を詳しく見ます。
2:50第一引数は今判定している要素の値、第二引数はゼロ始まりの位置、第三引数は対象の配列そのものです。
2:57スライドの例では、エーとビーの配列で、値と位置と長さを表示しながら、常にトゥルーを返して最後まで進む様子を実機で確認しました。
3:06必要な引数だけを受け取ればよく、多くの場合は値だけを使うのが一般的です。
3:11判定の中でトゥルー相当の値を返すかどうかで結果が決まるため、リターンし忘れると意図しないフォルスになる点にも注意してください。
3:21引数の順番は、値、位置、配列、と決まっています。
3:24実例として、年齢の確認を見ます。
3:27二十歳、二十五歳、十九歳の三人について、十八歳以上かどうかをエブリーで判定します。
3:34実行するとトゥルーになり、全員が成人であることが分かります。
3:39次に、二人目を十七歳に変えた配列で同じ判定をすると、今度はフォルスになります。
3:46どちらも実機で確認しました。
3:48このようにエブリーは、対象者全員に同じ条件を適用したい場面に向いています。
3:55年齢制限の確認、在庫が全てあるかの確認、必須項目が全て入力されたかの確認など、
4:00全件を一括で判定したいときに、そのまま使える形です。
4:06条件を十八歳以上から二十歳以上へ変えるなど、判定基準を差し替えて試すのも良い練習になります。
4:14記事の境界例で、空配列の扱いを確かめます。
4:17要素が一つもない配列にエブリーを呼ぶと、条件を満たさない要素が存在しないため、
4:20結果はトゥルーになります。
4:24スライドの一行目がその確認で、実機でもトゥルーでした。
4:28しかし、入力必須の場面では、空なのに合格と判定されては困ります。
4:32そこで記事では、長さがゼロより大きいことと、エブリーの判定を組み合わせた例が示されています。
4:39空の回答一覧にこの組み合わせを使うと結果はフォルスになり、記事の期待出力と一致しました。
4:45空でもよいのか、必ず中身が必要か、要件に合わせて組み合わせることが大切です。
4:51よく似たサムとの違いを整理します。
4:53エブリーは、全ての要素が条件を満たすときにトゥルーになります。
4:58一方サムは、一つでも条件を満たす要素があればトゥルーになります。
5:03スライドの例では、二、三、四という配列で、偶数かどうかを判定しています。
5:08三という奇数が混ざるためエブリーはフォルスですが、偶数が一つでもあるためサムはトゥルーになり、
5:13どちらも実機で確認しました。
5:17全員が満たすかを確認したいならエブリー、該当者がいるかを確認したいならサム、
5:22と問いの立て方で選んでください。
5:26二つを並べて実行すると違いが一目で分かります。
5:29名前が似ていても問いは正反対に近いので、コードを読むときはまず、全部か一つかを確認しましょう。
5:36注意点の第一は、判定が途中で終わることです。
5:40エブリーは、条件を満たさない要素が見つかった時点で、残りの要素を判定せずにフォルスを返します。
5:48スライドの例では、十、二十、五、三十のうち、三番目の五が十未満のため、コールバックは三回だけ呼ばれて終わり、
5:53三十は判定されませんでした。
5:59実機でも、結果はフォルス、回数は三と確認しました。
6:03これは無駄な処理を省く効率のよい仕様ですが、全ての要素に必ず処理を実行したい場合は、
6:09エブリーではなくフォーイーチなどを選んでください。
6:14途中で終わる前提を理解しておくことが大切です。
6:18注意点をもう一つ確認します。
6:20空きのある配列では、要素が入っていない空き位置でコールバックは呼ばれません。
6:26スライドの例では、一、空き、三という三件の並びで判定し、呼ばれた回数は二回だけでした。
6:32結果はトゥルーで、回数とともに実機で確認しました。
6:36つまり、空きは条件を満たさない要素として数えられるのではなく、最初から判定の対象外になります。
6:43データに空きが混ざる可能性がある場合は、件数や中身を先にそろえてから判定する習慣が役立ちます。
6:50空配列のトゥルーとあわせて、要素がない場合の扱いをセットで覚えておきましょう。
6:56特に、ほかの処理で作った配列を受け取る場合は、空きの有無を意識しておくと安心です。
7:02まとめです。
7:03エブリーは、配列の全ての要素が条件を満たすかどうかを判定し、トゥルーかフォルスを返すメソッドです。
7:11ポイントは三つです。
7:13まず、コールバックは値と位置と配列を受け取り、要素ごとに判定すること。
7:19次に、一つでも条件を外れる要素があれば、その時点でフォルスとなり判定が終わること。
7:25そして、空配列ではトゥルーになるため、入力必須の場面では長さの確認と組み合わせることです。
7:33まずは記事の基本例と境界例を実行し、結果を予測してから確かめてみてください。
7:39お疲れさまでした。
7:41全てか、一つでもか、と問いを言葉で区別できるようになれば、サムとの使い分けも自然に身につきます。

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

この動画で学べること

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

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