WEBVTT

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

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

3
00:00:03.754 --> 00:00:10.239
これは、配列の中に、探している値が含まれているかどうかを調べるメソッドです。

4
00:00:10.239 --> 00:00:15.529
含まれていればトゥルー、含まれていなければフォルスが返ります。

5
00:00:15.529 --> 00:00:20.478
たとえば、権限の名前が一覧にあるかどうか、選択済みの項目が含まれているかどうか、

6
00:00:20.478 --> 00:00:25.426
といった存在確認の場面で役立ちます。

7
00:00:25.426 --> 00:00:31.001
この動画では、書き方と引数、戻り値、記事の基本例、検索を始める位置の指定、

8
00:00:31.001 --> 00:00:36.575
エヌエーエヌの扱い、似たインデックスオブとの違い、そしてオブジェクトの比較や型変換の注意点まで、

9
00:00:36.575 --> 00:00:42.150
実行結果と一緒に学びます。

10
00:00:42.150 --> 00:00:47.269
値があるかどうか、というシンプルな問いに応えるメソッドです。

11
00:00:47.269 --> 00:00:52.389
条件を満たす要素を探すサムやエブリーと違い、インクルーズは値そのものを直接探すため、

12
00:00:52.389 --> 00:00:57.508
書き方がとても短くなる点も特徴です。

13
00:00:57.508 --> 00:00:59.227
まず動作環境を確認します。

14
00:00:59.227 --> 00:01:03.590
記事の互換性情報では、クロームでは四十七以降、エッジでは十四以降、ファイアーフォックスでは四十三以降、

15
00:01:03.590 --> 00:01:07.954
サファリでは九以降で使えます。

16
00:01:07.954 --> 00:01:11.788
ノード・ジェイエスでは六・ゼロ・ゼロ以降に対応しています。

17
00:01:11.788 --> 00:01:15.755
これらの数値はエムディーエヌの互換性データに基づく目安です。

18
00:01:15.755 --> 00:01:20.780
インクルーズは比較的新しいメソッドですが、現在の主要な環境では広く使えます。

19
00:01:20.780 --> 00:01:26.598
追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。

20
00:01:26.598 --> 00:01:30.697
対応開始の版は、推奨版という意味ではない点にも注意しましょう。

21
00:01:30.697 --> 00:01:34.928
前回のサムやエブリーより少し新しい点も覚えておくとよいでしょう。

22
00:01:34.928 --> 00:01:36.661
書き方を確認します。

23
00:01:36.661 --> 00:01:42.555
対象の配列に続けてインクルーズと書き、カッコの中に探す値を渡します。

24
00:01:42.555 --> 00:01:49.315
リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。

25
00:01:49.315 --> 00:01:51.222
第一引数は探す値です。

26
00:01:51.222 --> 00:01:58.329
第二引数として、検索を始める位置も指定できますが、通常は省略し、先頭から探します。

27
00:01:58.329 --> 00:02:03.356
負の位置を指定すると、末尾から数えた位置から探し始めます。

28
00:02:03.356 --> 00:02:08.556
戻り値は、値が含まれていればトゥルー、なければフォルスです。

29
00:02:08.556 --> 00:02:16.183
該当する要素そのものや、その位置が返るわけではなく、あるかないかだけが返る点が特徴です。

30
00:02:16.183 --> 00:02:19.476
まずは、この基本の形を押さえましょう。

31
00:02:19.476 --> 00:02:20.842
記事の基本例を見ます。

32
00:02:20.842 --> 00:02:24.817
リーダーとエディターという、二つの権限名が入った配列があります。

33
00:02:24.817 --> 00:02:29.040
この配列にインクルーズを呼び、エディターが含まれているかを調べます。

34
00:02:29.040 --> 00:02:34.505
実行するとトゥルーが表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。

35
00:02:34.505 --> 00:02:38.976
権限が含まれているため、編集を許可する、といった分岐にそのまま使えます。

36
00:02:38.976 --> 00:02:44.193
あわせて、含まれていないアドミンを調べるとフォルスになることも実機で確認しています。

37
00:02:44.193 --> 00:02:49.782
どの位置にあるかまで知りたい場合は、位置を返すインデックスオブへの切り替えが向いています。

38
00:02:49.782 --> 00:02:55.744
権限チェックのように、結果に応じて処理を分ける場面では、この短い一文がそのまま条件式になります。

39
00:02:55.744 --> 00:02:59.726
第二引数で、検索を始める位置を詳しく見ます。

40
00:02:59.726 --> 00:03:04.704
エー、ビー、シーという配列で、位置一からエーを探すと、先頭のエーは対象外になるため、

41
00:03:04.704 --> 00:03:09.682
結果はフォルスになります。

42
00:03:09.682 --> 00:03:14.750
次に、マイナス一を指定してシーを探すと、末尾から数えた最後の位置から探すため、

43
00:03:14.750 --> 00:03:19.818
シーが見つかりトゥルーになります。

44
00:03:19.818 --> 00:03:22.353
どちらも実機で確認しました。

45
00:03:22.353 --> 00:03:26.516
負の位置は、末尾から数える、と覚えてください。

46
00:03:26.516 --> 00:03:32.127
開始位置より前に同じ値があっても見つからない点がポイントです。

47
00:03:32.127 --> 00:03:36.471
途中からだけ探したい場面で使う、任意の引数です。

48
00:03:36.471 --> 00:03:41.178
開始位置を配列の長さ以上に指定すると、何も見つからずフォルスになることも、

49
00:03:41.178 --> 00:03:45.884
あわせて確認しておきましょう。

50
00:03:45.884 --> 00:03:49.035
実例として、選択済み項目の確認を見ます。

51
00:03:49.035 --> 00:03:57.228
アップルとバナナが選ばれた状態を表す配列について、バナナが含まれているかどうかをインクルーズで調べます。

52
00:03:57.228 --> 00:04:02.428
実行するとトゥルーになり、バナナが選択済みであることが分かります。

53
00:04:02.428 --> 00:04:04.319
実機でも同じ結果でした。

54
00:04:04.319 --> 00:04:13.299
このようにインクルーズは、権限の有無、選択済みかどうか、許可リストに載っているかどうかといった確認に向いています。

55
00:04:13.299 --> 00:04:19.129
結果がトゥルーかフォルスなので、そのままイフ文の条件に書ける点も便利です。

56
00:04:19.129 --> 00:04:23.856
文字列の配列だけでなく、数値の配列でも同じ書き方で使えます。

57
00:04:23.856 --> 00:04:27.428
記事の境界例で、エヌエーエヌの扱いを確かめます。

58
00:04:27.428 --> 00:04:33.380
エヌエーエヌが一つ入った配列で、エヌエーエヌを探すと、結果はトゥルーになります。

59
00:04:33.380 --> 00:04:37.398
スライドの一行目が記事の例で、実機でもトゥルーでした。

60
00:04:37.398 --> 00:04:40.077
これはインクルーズの大きな特徴です。

61
00:04:40.077 --> 00:04:45.211
似たメソッドであるインデックスオブでは、エヌエーエヌを正しく比較できないため、

62
00:04:45.211 --> 00:04:50.345
含まれていてもマイナス一が返り、見つからない扱いになります。

63
00:04:50.345 --> 00:04:56.447
計算結果にエヌエーエヌが混ざっていないかを確認したい場面では、この違いが重要です。

64
00:04:56.447 --> 00:05:00.316
見つけられるのがインクルーズ、と覚えておきましょう。

65
00:05:00.316 --> 00:05:03.601
よく似たインデックスオブとの違いを整理します。

66
00:05:03.601 --> 00:05:08.457
インクルーズは、含まれているかどうかをトゥルーかフォルスで返します。

67
00:05:08.457 --> 00:05:15.742
一方インデックスオブは、見つかった位置をゼロ始まりの数値で返し、見つからなければマイナス一を返します。

68
00:05:15.742 --> 00:05:19.884
スライドの例では、ビーについて、インクルーズはトゥルー、インデックスオブは位置一を返し、

69
00:05:19.884 --> 00:05:24.026
どちらも実機で確認しました。

70
00:05:24.026 --> 00:05:27.669
あるかどうかだけ知りたいならインクルーズ、位置まで必要なならインデックスオブ、

71
00:05:27.669 --> 00:05:31.311
と目的で選んでください。

72
00:05:31.311 --> 00:05:38.024
エヌエーエヌの扱いも異なるため、対象にエヌエーエヌが混ざる場合はインクルーズを選ぶと安全です。

73
00:05:38.024 --> 00:05:41.006
注意点の第一は、オブジェクトの比較です。

74
00:05:41.006 --> 00:05:47.267
インクルーズは、オブジェクトを中身ではなく、参照、つまり同じものかどうかで比べます。

75
00:05:47.267 --> 00:05:51.739
記事の境界例では、アイディーが一というオブジェクトの配列で、見た目が同じ別のオブジェクトを探すと、

76
00:05:51.739 --> 00:05:56.212
フォルスになりました。

77
00:05:56.212 --> 00:05:57.852
実機でも同じ結果です。

78
00:05:57.852 --> 00:06:03.964
一方、同じ変数に入れた同じオブジェクトを探すと、トゥルーになることも確認しました。

79
00:06:03.964 --> 00:06:08.660
オブジェクトのアイディーの値で探したい場合は、記事でも勧められているように、

80
00:06:08.660 --> 00:06:13.356
条件判定ができるサムやファインドを使ってください。

81
00:06:13.356 --> 00:06:16.028
記事が注意する仕様を確認します。

82
00:06:16.028 --> 00:06:19.200
インクルーズは型の強制変換をしません。

83
00:06:19.200 --> 00:06:25.713
数値の二が入った配列で、文字列の二を探しても、型が違うためフォルスになります。

84
00:06:25.713 --> 00:06:27.717
実機でもフォルスでした。

85
00:06:27.717 --> 00:06:31.891
探す値の型を、配列の中身とそろえることが大切です。

86
00:06:31.891 --> 00:06:40.574
一方で、プラスゼロとマイナスゼロは同じ値とみなされ、ゼロの配列でマイナスゼロを探すとトゥルーになります。

87
00:06:40.574 --> 00:06:47.921
あわせて、要素がない空配列では、どんな値を探してもフォルスになる点も覚えておきましょう。

88
00:06:47.921 --> 00:06:52.096
型をそろえる、という一手間が、探し漏れを防ぎます。

89
00:06:52.096 --> 00:06:52.950
まとめです。

90
00:06:52.950 --> 00:07:00.067
インクルーズは、配列に特定の値が含まれているかどうかを判定し、トゥルーかフォルスを返すメソッドです。

91
00:07:00.067 --> 00:07:01.491
ポイントは三つです。

92
00:07:01.491 --> 00:07:06.045
まず、第一引数に探す値、第二引数に任意で検索開始位置を渡すこと。

93
00:07:06.045 --> 00:07:10.600
次に、エヌエーエヌも見つけられますが、型の変換は行われないこと。

94
00:07:10.600 --> 00:07:17.575
そして、オブジェクトは中身ではなく参照で比べるため、条件で探したいときはサムに切り替えることです。

95
00:07:17.575 --> 00:07:22.984
まずは記事の基本例と境界例を実行し、結果を予測してから確かめてみてください。

96
00:07:22.984 --> 00:07:24.265
お疲れさまでした。

97
00:07:24.265 --> 00:07:31.952
値があるかどうか、という問いを短く書けるようになれば、権限確認や選択チェックをすっきり書けるようになります。

98
00:07:31.952 --> 00:07:37.076
短いコードで意図が伝わりやすいことも、インクルーズを選ぶ理由の一つです。