WEBVTT

1
00:00:00.000 --> 00:00:00.933
こんにちは。

2
00:00:00.933 --> 00:00:03.420
今回はインクルーズを紹介します。

3
00:00:03.420 --> 00:00:10.105
これは、対象の文字列の中に、探したい文字列が含まれているかどうかを調べるメソッドです。

4
00:00:10.105 --> 00:00:16.946
含まれていればトゥルー、含まれていなければフォルスという、わかりやすい真偽値が返ります。

5
00:00:16.946 --> 00:00:21.817
この動画では、書き方と二つの引数、戻り値、記事の基本例であるタイトル検索、

6
00:00:21.817 --> 00:00:26.688
検索を始める位置の指定、大文字と小文字の区別、空文字列の扱い、似たメソッドとの違いまで、

7
00:00:26.688 --> 00:00:31.560
実行結果と一緒に学びます。

8
00:00:31.560 --> 00:00:38.400
どこにあるかではなく、あるかないかを知りたい場面で、とてもシンプルに書けるのが魅力です。

9
00:00:38.400 --> 00:00:44.308
まずは、元の文字列は変わらず、真偽値だけが返る、という一点を確かめましょう。

10
00:00:44.308 --> 00:00:46.235
まず動作環境を確認します。

11
00:00:46.235 --> 00:00:52.461
インクルーズは、イーシーエムエースクリプト、二千十五で追加された文字列メソッドです。

12
00:00:52.461 --> 00:00:56.464
クロームでは四十一以降、エッジでは十二以降、ファイアーフォックスでは四十以降、

13
00:00:56.464 --> 00:01:00.466
サファリでは九以降で使えます。

14
00:01:00.466 --> 00:01:04.765
ノード・ジェイエスでは四・ゼロ・ゼロ以降に対応しています。

15
00:01:04.765 --> 00:01:08.916
記事の互換性情報はエムディーエヌのデータに基づく目安ですが、対応範囲は十分に広く、

16
00:01:08.916 --> 00:01:13.067
通常は環境を心配せず使えます。

17
00:01:13.067 --> 00:01:19.293
追加の読み込みは不要で、空文字列にも関数として備わっていることを実機で確認済みです。

18
00:01:19.293 --> 00:01:23.888
迷ったときは、実際に使う環境で小さなコードを試すのが確実です。

19
00:01:23.888 --> 00:01:25.513
書き方を確認します。

20
00:01:25.513 --> 00:01:32.015
対象の文字列に続けてインクルーズと書き、カッコの中に探したい文字列を指定します。

21
00:01:32.015 --> 00:01:34.779
第1引数が検索文字列で、必須です。

22
00:01:34.779 --> 00:01:39.493
第2引数は検索を始める位置で、省略すると先頭から探します。

23
00:01:39.493 --> 00:01:47.132
戻り値は、含まれていればトゥルー、なければフォルスの真偽値で、元の文字列自体は変更されません。

24
00:01:47.132 --> 00:01:58.348
スライドの例では、スクリプトという部分が含まれてトゥルーになり、パイソンという含まれない文字列ではフォルスになることを実機で確認しました。

25
00:01:58.348 --> 00:02:02.249
結果を条件分岐にそのまま使えるのが便利な点です。

26
00:02:02.249 --> 00:02:05.988
位置ではなく有無が返る、と覚えておきましょう。

27
00:02:05.988 --> 00:02:07.665
記事の基本例を見ます。

28
00:02:07.665 --> 00:02:15.593
ジャバスクリプト入門というタイトルの文字列に対して、入門という二文字が含まれているかを調べるコードです。

29
00:02:15.593 --> 00:02:21.996
実行するとトゥルーが返り、記事の期待出力と一致し、ノードの実機結果とも一致しました。

30
00:02:21.996 --> 00:02:26.874
記事が説明するように、これは簡単な記事タイトル検索の考え方です。

31
00:02:26.874 --> 00:02:34.497
タイトルにキーワードが含まれているかどうかで、表示するかどうかを切り替えるような処理に応用できます。

32
00:02:34.497 --> 00:02:39.985
検索文字列を別の言葉に変えれば、含まれていない場合はフォルスになります。

33
00:02:39.985 --> 00:02:45.016
まずはこの基本例を手で実行して、真偽値が返る感覚をつかみましょう。

34
00:02:45.016 --> 00:02:47.109
第2引数の開始位置を確認します。

35
00:02:47.109 --> 00:02:51.427
開始位置を指定すると、その位置から後ろだけが検索の対象になります。

36
00:02:51.427 --> 00:02:56.987
スライドの例では、通常はワールドが見つかってトゥルーになりますが、開始位置に七を指定すると、

37
00:02:56.987 --> 00:03:02.547
ワールドの始まりより後ろから探すため、フォルスになることを実機で確認しました。

38
00:03:02.547 --> 00:03:07.519
同様に、先頭にあるハローも、開始位置を一にすると対象外になってフォルスです。

39
00:03:07.519 --> 00:03:11.836
開始位置に負の数を渡した場合はゼロとして扱われ、先頭から探します。

40
00:03:11.836 --> 00:03:15.369
すでに読み飛ばした部分を除外したい場合などに便利です。

41
00:03:15.369 --> 00:03:18.116
位置はゼロから数える点に注意してください。

42
00:03:18.116 --> 00:03:20.610
大文字と小文字の扱いを確認します。

43
00:03:20.610 --> 00:03:24.130
インクルーズは大文字と小文字を厳密に区別します。

44
00:03:24.130 --> 00:03:29.338
記事の境界例のように、ジャバスクリプトという文字列に対して、すべて小文字のジャバスクリプトを探しても、

45
00:03:29.338 --> 00:03:34.546
フォルスになることを実機で確認しました。

46
00:03:34.546 --> 00:03:45.841
大文字と小文字を区別せずに検索したい場合は、記事も紹介しているように、対象と検索文字列の両方をトゥー・ローワーケースなどで同じ規則にそろえてから調べます。

47
00:03:45.841 --> 00:03:51.122
スライドの二つ目の例では、対象を小文字化することでトゥルーになりました。

48
00:03:51.122 --> 00:03:56.256
利用者の入力は表記が揺れやすいため、検索機能ではこの正規化が重要です。

49
00:03:56.256 --> 00:03:58.331
空文字列の扱いを確認します。

50
00:03:58.331 --> 00:04:04.406
検索文字列が空文字列の場合、対象がどんな文字列でも、結果は常にトゥルーになります。

51
00:04:04.406 --> 00:04:09.889
記事の境界例にあるように、空の文字列に対して空を探してもトゥルーですし、

52
00:04:09.889 --> 00:04:15.372
エー・ビー・シーに対して空を探してもトゥルーになることを実機で確認しました。

53
00:04:15.372 --> 00:04:17.298
ここが間違えやすい点です。

54
00:04:17.298 --> 00:04:24.411
利用者が検索欄を空のまま実行した場合でも、インクルーズだけでは全件一致のように見えてしまいます。

55
00:04:24.411 --> 00:04:30.190
そのため、入力が空かどうかは、長さを調べるなど別の方法で先に確認してください。

56
00:04:30.190 --> 00:04:34.636
空文字列は含まれている、という仕様として覚えておきましょう。

57
00:04:34.636 --> 00:04:36.729
実務に近い実例を見ます。

58
00:04:36.729 --> 00:04:46.497
タイトルの配列に対して、フィルターとインクルーズを組み合わせ、入門という文字を含むタイトルだけを残すコードです。

59
00:04:46.497 --> 00:04:55.218
ジャバスクリプト入門とリアクト入門の二件が残り、シーエスエス基礎は除かれることを実機で確認しました。

60
00:04:55.218 --> 00:04:59.317
一件ずつの判定はインクルーズが担い、配列全体の絞り込みはフィルターが担う、

61
00:04:59.317 --> 00:05:03.417
という役割分担です。

62
00:05:03.417 --> 00:05:09.696
検索ボックスの入力を検索文字列にすれば、簡単な検索機能の土台になります。

63
00:05:09.696 --> 00:05:17.196
大文字と小文字を区別したくない場合は、ここでも両方を小文字化してから判定してください。

64
00:05:17.196 --> 00:05:20.336
まずは小さな配列で試してみましょう。

65
00:05:20.336 --> 00:05:22.741
似たメソッドとの違いを確認します。

66
00:05:22.741 --> 00:05:28.824
インデックスオブは、見つかった位置を数値で返し、見つからなければマイナス一を返します。

67
00:05:28.824 --> 00:05:31.653
位置が必要な場合はこちらが向いています。

68
00:05:31.653 --> 00:05:35.685
スタートウィズは先頭から始まるか、エンズウィズは末尾で終わるかを調べるメソッドで、

69
00:05:35.685 --> 00:05:39.717
範囲が先頭と末尾に限定されます。

70
00:05:39.717 --> 00:05:45.800
一方インクルーズは、文字列の途中も含めて、含まれているかどうかだけを真偽値で返します。

71
00:05:45.800 --> 00:05:48.629
スライドの例はすべて実機で確認済みです。

72
00:05:48.629 --> 00:05:56.268
有無だけ知りたいならインクルーズ、位置が必要ならインデックスオブ、と使い分けるとコードが読みやすくなります。

73
00:05:56.268 --> 00:05:58.082
注意点を二つ確認します。

74
00:05:58.082 --> 00:06:01.861
まず、検索文字列に正規表現を渡すことはできません。

75
00:06:01.861 --> 00:06:05.641
渡すとタイプエラーになることを実機で確認しました。

76
00:06:05.641 --> 00:06:10.780
パターンで探したい場合は、正規表現用のメソッドを別に使ってください。

77
00:06:10.780 --> 00:06:16.525
次に、数値のような文字列でない値を渡すと、文字列に変換されてから探されます。

78
00:06:16.525 --> 00:06:22.269
スライドの例では、数字の三が文字列の三として見つかり、トゥルーになりました。

79
00:06:22.269 --> 00:06:28.467
便利な反面、意図しない一致が起きることもあるため、入力の型は意識しておきましょう。

80
00:06:28.467 --> 00:06:34.817
また、対象に対して呼ぶメソッドなので、数値など文字列でない対象ではエラーになります。

81
00:06:34.817 --> 00:06:37.840
先に文字列へ変換してから使ってください。

82
00:06:37.840 --> 00:06:38.791
まとめです。

83
00:06:38.791 --> 00:06:47.194
インクルーズは、文字列に検索文字列が含まれているかどうかを、トゥルーかフォルスの真偽値で返すメソッドです。

84
00:06:47.194 --> 00:06:49.255
判断のポイントは三つです。

85
00:06:49.255 --> 00:06:55.121
まず、第2引数で検索を始める位置を指定でき、それより前は対象外になること。

86
00:06:55.121 --> 00:07:02.256
次に、大文字と小文字を厳密に区別するため、区別しない検索では両方を同じ規則にそろえること。

87
00:07:02.256 --> 00:07:09.549
そして、空文字列は常にトゥルーになるため、空欄の確認は別に行い、正規表現は渡せないことです。

88
00:07:09.549 --> 00:07:18.269
まずは記事の基本例と境界例を実行し、検索文字列と開始位置を一つ変えて、結果を予測してから確かめてみてください。

89
00:07:18.269 --> 00:07:19.696
お疲れさまでした。

90
00:07:19.696 --> 00:07:24.452
有無をシンプルに判定できることは、検索処理の土台になります。