VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00今回はインクルーズを紹介します。
0:03これは、対象の文字列の中に、探したい文字列が含まれているかどうかを調べるメソッドです。
0:10含まれていればトゥルー、含まれていなければフォルスという、わかりやすい真偽値が返ります。
0:16この動画では、書き方と二つの引数、戻り値、記事の基本例であるタイトル検索、
0:21検索を始める位置の指定、大文字と小文字の区別、空文字列の扱い、似たメソッドとの違いまで、
0:26実行結果と一緒に学びます。
0:31どこにあるかではなく、あるかないかを知りたい場面で、とてもシンプルに書けるのが魅力です。
0:38まずは、元の文字列は変わらず、真偽値だけが返る、という一点を確かめましょう。
0:44まず動作環境を確認します。
0:46インクルーズは、イーシーエムエースクリプト、二千十五で追加された文字列メソッドです。
0:52クロームでは四十一以降、エッジでは十二以降、ファイアーフォックスでは四十以降、
0:56サファリでは九以降で使えます。
1:00ノード・ジェイエスでは四・ゼロ・ゼロ以降に対応しています。
1:04記事の互換性情報はエムディーエヌのデータに基づく目安ですが、対応範囲は十分に広く、
1:08通常は環境を心配せず使えます。
1:13追加の読み込みは不要で、空文字列にも関数として備わっていることを実機で確認済みです。
1:19迷ったときは、実際に使う環境で小さなコードを試すのが確実です。
1:23書き方を確認します。
1:25対象の文字列に続けてインクルーズと書き、カッコの中に探したい文字列を指定します。
1:32第1引数が検索文字列で、必須です。
1:34第2引数は検索を始める位置で、省略すると先頭から探します。
1:39戻り値は、含まれていればトゥルー、なければフォルスの真偽値で、元の文字列自体は変更されません。
1:47スライドの例では、スクリプトという部分が含まれてトゥルーになり、パイソンという含まれない文字列ではフォルスになることを実機で確認しました。
1:58結果を条件分岐にそのまま使えるのが便利な点です。
2:02位置ではなく有無が返る、と覚えておきましょう。
2:05記事の基本例を見ます。
2:07ジャバスクリプト入門というタイトルの文字列に対して、入門という二文字が含まれているかを調べるコードです。
2:15実行するとトゥルーが返り、記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:21記事が説明するように、これは簡単な記事タイトル検索の考え方です。
2:26タイトルにキーワードが含まれているかどうかで、表示するかどうかを切り替えるような処理に応用できます。
2:34検索文字列を別の言葉に変えれば、含まれていない場合はフォルスになります。
2:39まずはこの基本例を手で実行して、真偽値が返る感覚をつかみましょう。
2:45第2引数の開始位置を確認します。
2:47開始位置を指定すると、その位置から後ろだけが検索の対象になります。
2:51スライドの例では、通常はワールドが見つかってトゥルーになりますが、開始位置に七を指定すると、
2:56ワールドの始まりより後ろから探すため、フォルスになることを実機で確認しました。
3:02同様に、先頭にあるハローも、開始位置を一にすると対象外になってフォルスです。
3:07開始位置に負の数を渡した場合はゼロとして扱われ、先頭から探します。
3:11すでに読み飛ばした部分を除外したい場合などに便利です。
3:15位置はゼロから数える点に注意してください。
3:18大文字と小文字の扱いを確認します。
3:20インクルーズは大文字と小文字を厳密に区別します。
3:24記事の境界例のように、ジャバスクリプトという文字列に対して、すべて小文字のジャバスクリプトを探しても、
3:29フォルスになることを実機で確認しました。
3:34大文字と小文字を区別せずに検索したい場合は、記事も紹介しているように、対象と検索文字列の両方をトゥー・ローワーケースなどで同じ規則にそろえてから調べます。
3:45スライドの二つ目の例では、対象を小文字化することでトゥルーになりました。
3:51利用者の入力は表記が揺れやすいため、検索機能ではこの正規化が重要です。
3:56空文字列の扱いを確認します。
3:58検索文字列が空文字列の場合、対象がどんな文字列でも、結果は常にトゥルーになります。
4:04記事の境界例にあるように、空の文字列に対して空を探してもトゥルーですし、
4:09エー・ビー・シーに対して空を探してもトゥルーになることを実機で確認しました。
4:15ここが間違えやすい点です。
4:17利用者が検索欄を空のまま実行した場合でも、インクルーズだけでは全件一致のように見えてしまいます。
4:24そのため、入力が空かどうかは、長さを調べるなど別の方法で先に確認してください。
4:30空文字列は含まれている、という仕様として覚えておきましょう。
4:34実務に近い実例を見ます。
4:36タイトルの配列に対して、フィルターとインクルーズを組み合わせ、入門という文字を含むタイトルだけを残すコードです。
4:46ジャバスクリプト入門とリアクト入門の二件が残り、シーエスエス基礎は除かれることを実機で確認しました。
4:55一件ずつの判定はインクルーズが担い、配列全体の絞り込みはフィルターが担う、
4:59という役割分担です。
5:03検索ボックスの入力を検索文字列にすれば、簡単な検索機能の土台になります。
5:09大文字と小文字を区別したくない場合は、ここでも両方を小文字化してから判定してください。
5:17まずは小さな配列で試してみましょう。
5:20似たメソッドとの違いを確認します。
5:22インデックスオブは、見つかった位置を数値で返し、見つからなければマイナス一を返します。
5:28位置が必要な場合はこちらが向いています。
5:31スタートウィズは先頭から始まるか、エンズウィズは末尾で終わるかを調べるメソッドで、
5:35範囲が先頭と末尾に限定されます。
5:39一方インクルーズは、文字列の途中も含めて、含まれているかどうかだけを真偽値で返します。
5:45スライドの例はすべて実機で確認済みです。
5:48有無だけ知りたいならインクルーズ、位置が必要ならインデックスオブ、と使い分けるとコードが読みやすくなります。
5:56注意点を二つ確認します。
5:58まず、検索文字列に正規表現を渡すことはできません。
6:01渡すとタイプエラーになることを実機で確認しました。
6:05パターンで探したい場合は、正規表現用のメソッドを別に使ってください。
6:10次に、数値のような文字列でない値を渡すと、文字列に変換されてから探されます。
6:16スライドの例では、数字の三が文字列の三として見つかり、トゥルーになりました。
6:22便利な反面、意図しない一致が起きることもあるため、入力の型は意識しておきましょう。
6:28また、対象に対して呼ぶメソッドなので、数値など文字列でない対象ではエラーになります。
6:34先に文字列へ変換してから使ってください。
6:37まとめです。
6:38インクルーズは、文字列に検索文字列が含まれているかどうかを、トゥルーかフォルスの真偽値で返すメソッドです。
6:47判断のポイントは三つです。
6:49まず、第2引数で検索を始める位置を指定でき、それより前は対象外になること。
6:55次に、大文字と小文字を厳密に区別するため、区別しない検索では両方を同じ規則にそろえること。
7:02そして、空文字列は常にトゥルーになるため、空欄の確認は別に行い、正規表現は渡せないことです。
7:09まずは記事の基本例と境界例を実行し、検索文字列と開始位置を一つ変えて、結果を予測してから確かめてみてください。
7:18お疲れさまでした。
7:19有無をシンプルに判定できることは、検索処理の土台になります。

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

この動画で学べること

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

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