SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:37動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:01今回はインクルーズを紹介します。
  3. 0:03これは、配列の中に、探している値が含まれているかどうかを調べるメソッドです。
  4. 0:10含まれていればトゥルー、含まれていなければフォルスが返ります。
  5. 0:15たとえば、権限の名前が一覧にあるかどうか、選択済みの項目が含まれているかどうか、
  6. 0:20といった存在確認の場面で役立ちます。
  7. 0:25この動画では、書き方と引数、戻り値、記事の基本例、検索を始める位置の指定、
  8. 0:31エヌエーエヌの扱い、似たインデックスオブとの違い、そしてオブジェクトの比較や型変換の注意点まで、
  9. 0:36実行結果と一緒に学びます。
  10. 0:42値があるかどうか、というシンプルな問いに応えるメソッドです。
  11. 0:47条件を満たす要素を探すサムやエブリーと違い、インクルーズは値そのものを直接探すため、
  12. 0:52書き方がとても短くなる点も特徴です。
  13. 0:57まず動作環境を確認します。
  14. 0:59記事の互換性情報では、クロームでは四十七以降、エッジでは十四以降、ファイアーフォックスでは四十三以降、
  15. 1:03サファリでは九以降で使えます。
  16. 1:07ノード・ジェイエスでは六・ゼロ・ゼロ以降に対応しています。
  17. 1:11これらの数値はエムディーエヌの互換性データに基づく目安です。
  18. 1:15インクルーズは比較的新しいメソッドですが、現在の主要な環境では広く使えます。
  19. 1:20追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。
  20. 1:26対応開始の版は、推奨版という意味ではない点にも注意しましょう。
  21. 1:30前回のサムやエブリーより少し新しい点も覚えておくとよいでしょう。
  22. 1:34書き方を確認します。
  23. 1:36対象の配列に続けてインクルーズと書き、カッコの中に探す値を渡します。
  24. 1:42リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
  25. 1:49第一引数は探す値です。
  26. 1:51第二引数として、検索を始める位置も指定できますが、通常は省略し、先頭から探します。
  27. 1:58負の位置を指定すると、末尾から数えた位置から探し始めます。
  28. 2:03戻り値は、値が含まれていればトゥルー、なければフォルスです。
  29. 2:08該当する要素そのものや、その位置が返るわけではなく、あるかないかだけが返る点が特徴です。
  30. 2:16まずは、この基本の形を押さえましょう。
  31. 2:19記事の基本例を見ます。
  32. 2:20リーダーとエディターという、二つの権限名が入った配列があります。
  33. 2:24この配列にインクルーズを呼び、エディターが含まれているかを調べます。
  34. 2:29実行するとトゥルーが表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。
  35. 2:34権限が含まれているため、編集を許可する、といった分岐にそのまま使えます。
  36. 2:38あわせて、含まれていないアドミンを調べるとフォルスになることも実機で確認しています。
  37. 2:44どの位置にあるかまで知りたい場合は、位置を返すインデックスオブへの切り替えが向いています。
  38. 2:49権限チェックのように、結果に応じて処理を分ける場面では、この短い一文がそのまま条件式になります。
  39. 2:55第二引数で、検索を始める位置を詳しく見ます。
  40. 2:59エー、ビー、シーという配列で、位置一からエーを探すと、先頭のエーは対象外になるため、
  41. 3:04結果はフォルスになります。
  42. 3:09次に、マイナス一を指定してシーを探すと、末尾から数えた最後の位置から探すため、
  43. 3:14シーが見つかりトゥルーになります。
  44. 3:19どちらも実機で確認しました。
  45. 3:22負の位置は、末尾から数える、と覚えてください。
  46. 3:26開始位置より前に同じ値があっても見つからない点がポイントです。
  47. 3:32途中からだけ探したい場面で使う、任意の引数です。
  48. 3:36開始位置を配列の長さ以上に指定すると、何も見つからずフォルスになることも、
  49. 3:41あわせて確認しておきましょう。
  50. 3:45実例として、選択済み項目の確認を見ます。
  51. 3:49アップルとバナナが選ばれた状態を表す配列について、バナナが含まれているかどうかをインクルーズで調べます。
  52. 3:57実行するとトゥルーになり、バナナが選択済みであることが分かります。
  53. 4:02実機でも同じ結果でした。
  54. 4:04このようにインクルーズは、権限の有無、選択済みかどうか、許可リストに載っているかどうかといった確認に向いています。
  55. 4:13結果がトゥルーかフォルスなので、そのままイフ文の条件に書ける点も便利です。
  56. 4:19文字列の配列だけでなく、数値の配列でも同じ書き方で使えます。
  57. 4:23記事の境界例で、エヌエーエヌの扱いを確かめます。
  58. 4:27エヌエーエヌが一つ入った配列で、エヌエーエヌを探すと、結果はトゥルーになります。
  59. 4:33スライドの一行目が記事の例で、実機でもトゥルーでした。
  60. 4:37これはインクルーズの大きな特徴です。
  61. 4:40似たメソッドであるインデックスオブでは、エヌエーエヌを正しく比較できないため、
  62. 4:45含まれていてもマイナス一が返り、見つからない扱いになります。
  63. 4:50計算結果にエヌエーエヌが混ざっていないかを確認したい場面では、この違いが重要です。
  64. 4:56見つけられるのがインクルーズ、と覚えておきましょう。
  65. 5:00よく似たインデックスオブとの違いを整理します。
  66. 5:03インクルーズは、含まれているかどうかをトゥルーかフォルスで返します。
  67. 5:08一方インデックスオブは、見つかった位置をゼロ始まりの数値で返し、見つからなければマイナス一を返します。
  68. 5:15スライドの例では、ビーについて、インクルーズはトゥルー、インデックスオブは位置一を返し、
  69. 5:19どちらも実機で確認しました。
  70. 5:24あるかどうかだけ知りたいならインクルーズ、位置まで必要なならインデックスオブ、
  71. 5:27と目的で選んでください。
  72. 5:31エヌエーエヌの扱いも異なるため、対象にエヌエーエヌが混ざる場合はインクルーズを選ぶと安全です。
  73. 5:38注意点の第一は、オブジェクトの比較です。
  74. 5:41インクルーズは、オブジェクトを中身ではなく、参照、つまり同じものかどうかで比べます。
  75. 5:47記事の境界例では、アイディーが一というオブジェクトの配列で、見た目が同じ別のオブジェクトを探すと、
  76. 5:51フォルスになりました。
  77. 5:56実機でも同じ結果です。
  78. 5:57一方、同じ変数に入れた同じオブジェクトを探すと、トゥルーになることも確認しました。
  79. 6:03オブジェクトのアイディーの値で探したい場合は、記事でも勧められているように、
  80. 6:08条件判定ができるサムやファインドを使ってください。
  81. 6:13記事が注意する仕様を確認します。
  82. 6:16インクルーズは型の強制変換をしません。
  83. 6:19数値の二が入った配列で、文字列の二を探しても、型が違うためフォルスになります。
  84. 6:25実機でもフォルスでした。
  85. 6:27探す値の型を、配列の中身とそろえることが大切です。
  86. 6:31一方で、プラスゼロとマイナスゼロは同じ値とみなされ、ゼロの配列でマイナスゼロを探すとトゥルーになります。
  87. 6:40あわせて、要素がない空配列では、どんな値を探してもフォルスになる点も覚えておきましょう。
  88. 6:47型をそろえる、という一手間が、探し漏れを防ぎます。
  89. 6:52まとめです。
  90. 6:52インクルーズは、配列に特定の値が含まれているかどうかを判定し、トゥルーかフォルスを返すメソッドです。
  91. 7:00ポイントは三つです。
  92. 7:01まず、第一引数に探す値、第二引数に任意で検索開始位置を渡すこと。
  93. 7:06次に、エヌエーエヌも見つけられますが、型の変換は行われないこと。
  94. 7:10そして、オブジェクトは中身ではなく参照で比べるため、条件で探したいときはサムに切り替えることです。
  95. 7:17まずは記事の基本例と境界例を実行し、結果を予測してから確かめてみてください。
  96. 7:22お疲れさまでした。
  97. 7:24値があるかどうか、という問いを短く書けるようになれば、権限確認や選択チェックをすっきり書けるようになります。
  98. 7:31短いコードで意図が伝わりやすいことも、インクルーズを選ぶ理由の一つです。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Array.prototype.includes()で配列に特定の値が含まれるか調べる方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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