WEBVTT

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

2
00:00:01.146 --> 00:00:04.012
今回はスプリットを紹介します。

3
00:00:04.012 --> 00:00:10.317
これは、文字列を区切りに従って分けて、配列として返すメソッドです。

4
00:00:10.317 --> 00:00:20.826
たとえばカンマでつながったタグの一覧を、一つずつの項目に分けたり、日付の文字列を年と月と日に分けたりできます。

5
00:00:20.826 --> 00:00:26.812
この動画では、書き方と二つの引数、戻り値、記事の基本例であるカンマ区切りの変換、

6
00:00:26.812 --> 00:00:32.799
個数を制限する方法、正規表現での分割、連続する区切りで空文字列ができる境界例まで、

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

8
00:00:38.786 --> 00:00:45.282
文字列を配列に変える入り口として、データ処理では欠かせない道具です。

9
00:00:45.282 --> 00:00:51.205
まずは、区切りが消えて配列になる、という一点を確かめましょう。

10
00:00:51.205 --> 00:00:57.892
配列になれば、一件ずつ処理したり、件数を数えたりできるようになります。

11
00:00:57.892 --> 00:00:59.807
まず動作環境を確認します。

12
00:00:59.807 --> 00:01:04.816
スプリットは、ジャバスクリプトの最初期から使える文字列メソッドです。

13
00:01:04.816 --> 00:01:08.572
クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一以降、

14
00:01:08.572 --> 00:01:12.329
サファリでは一以降で使えます。

15
00:01:12.329 --> 00:01:16.601
ノード・ジェイエスではゼロ・十・ゼロ以降に対応しています。

16
00:01:16.601 --> 00:01:20.873
記事の互換性情報はエムディーエヌのデータに基づく目安ですが、対応範囲が非常に広いため、

17
00:01:20.873 --> 00:01:25.145
通常は環境を心配せず使えます。

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

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

20
00:01:35.899 --> 00:01:40.760
対応が広い分、古い環境向けのコードでも安心して使えるのが強みです。

21
00:01:40.760 --> 00:01:42.431
書き方を確認します。

22
00:01:42.431 --> 00:01:48.281
対象の文字列に続けてスプリットと書き、カッコの中に区切りを指定します。

23
00:01:48.281 --> 00:01:52.292
第1引数は区切りで、文字列か正規表現を渡します。

24
00:01:52.292 --> 00:01:56.971
第2引数のリミットは、結果の最大要素数で、省略できます。

25
00:01:56.971 --> 00:02:02.486
戻り値は、分割した文字列の配列で、元の文字列自体は変更されません。

26
00:02:02.486 --> 00:02:11.177
スライドの例では、スペースで区切られた三つの単語が、三つの要素を持つ配列になることを実機で確認しました。

27
00:02:11.177 --> 00:02:15.689
結果を使いたい場合は、戻り値を変数に保存してください。

28
00:02:15.689 --> 00:02:21.037
区切りそのものは結果に含まれない、という点も覚えておきましょう。

29
00:02:21.037 --> 00:02:25.884
慣れてきたら、正規表現による区切りにも広げていきましょう。

30
00:02:25.884 --> 00:02:27.616
記事の基本例を見ます。

31
00:02:27.616 --> 00:02:31.945
エイチティーエムエル、シーエスエス、ジャバスクリプトがカンマでつながった文字列を、

32
00:02:31.945 --> 00:02:36.273
カンマで分割するコードです。

33
00:02:36.273 --> 00:02:44.302
実行すると、三つの要素を持つ配列が表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。

34
00:02:44.302 --> 00:02:49.811
記事が説明するように、これは単純なタグ入力を配列へ変換する使い方です。

35
00:02:49.811 --> 00:02:54.376
カンマという区切りが消え、その前後が別々の要素になります。

36
00:02:54.376 --> 00:02:57.839
まずはこの基本例を手で実行してみてください。

37
00:02:57.839 --> 00:03:03.664
区切りを別の文字に変えるとどうなるか、予測してから試すと理解が深まります。

38
00:03:03.664 --> 00:03:09.016
タグやカテゴリのように、区切り文字で管理される入力では定番の形です。

39
00:03:09.016 --> 00:03:11.540
第2引数のリミットを確認します。

40
00:03:11.540 --> 00:03:18.324
リミットに二を指定すると、分割は先頭の二要素までで止まり、三つ目は結果に含まれません。

41
00:03:18.324 --> 00:03:24.476
リミットにゼロを指定すると、空の配列になることを、どちらも実機で確認しました。

42
00:03:24.476 --> 00:03:29.366
先頭の数件だけが必要な場合や、処理量を抑えたい場合に便利です。

43
00:03:29.366 --> 00:03:35.046
注意点として、残りの文字列が最後の要素にまとめて残るわけではありません。

44
00:03:35.046 --> 00:03:37.412
途中で切り捨てられるだけです。

45
00:03:37.412 --> 00:03:42.302
必要な個数が決まっている入力では、この引数を活用してください。

46
00:03:42.302 --> 00:03:45.300
省略した場合は、最後まで分割されます。

47
00:03:45.300 --> 00:03:50.348
たとえば先頭の一件だけを見たい場合は、リミットに一を指定します。

48
00:03:50.348 --> 00:03:53.204
区切りの指定方法を広げます。

49
00:03:53.204 --> 00:03:56.060
まず、正規表現を渡す例です。

50
00:03:56.060 --> 00:04:02.079
数字を表す正規表現で区切ると、エー・ワン・ビー・ツー・シーが、エー、ビー、

51
00:04:02.079 --> 00:04:08.097
シーの三要素になることを実機で確認しました。

52
00:04:08.097 --> 00:04:15.850
コロンとセミコロンのように、複数種の区切りをまとめて扱いたいときに便利です。

53
00:04:15.850 --> 00:04:22.378
次に、空文字列を区切りに渡すと、文字列が一文字ずつに分かれます。

54
00:04:22.378 --> 00:04:34.823
ただし、絵文字のような文字では一文字の扱いがずれる場合があるため、日本語や絵文字を一文字ずつ扱う場面では注意してください。

55
00:04:34.823 --> 00:04:39.720
区切りの選び方で、結果の粒度が大きく変わります。

56
00:04:39.720 --> 00:04:45.840
使い分けは、区切りが一種類か、複数かで判断すると迷いません。

57
00:04:45.840 --> 00:04:48.466
記事の境界条件の例を見ます。

58
00:04:48.466 --> 00:04:55.595
エーの後にカンマが二つ続き、ビーが来る文字列を、カンマで分割するコードです。

59
00:04:55.595 --> 00:05:01.223
実行すると、エー、空文字列、ビーの三要素となり、記事の期待出力と同じく、

60
00:05:01.223 --> 00:05:06.852
連続する区切りは空文字列を作ることが分かります。

61
00:05:06.852 --> 00:05:12.855
区切りが文字列の先頭や末尾にある場合も、端に空文字列ができます。

62
00:05:12.855 --> 00:05:19.796
空欄を許可しない入力では、この空文字列が思わぬ要素として残ってしまいます。

63
00:05:19.796 --> 00:05:27.675
成功例だけでなく、こうした境界条件を確かめると、後の整形処理の必要性が見えてきます。

64
00:05:27.675 --> 00:05:31.615
次のセクションで、その整え方を紹介します。

65
00:05:31.615 --> 00:05:36.868
要素数を数える処理では、空要素の有無が結果を左右します。

66
00:05:36.868 --> 00:05:38.728
実務に近い実例を見ます。

67
00:05:38.728 --> 00:05:44.386
カンマの後にスペースが混ざったタグ入力をスプリットで分け、各要素にトリムを適用すると、

68
00:05:44.386 --> 00:05:50.043
余分な空白のないタグの配列が得られ、実機でも確認できました。

69
00:05:50.043 --> 00:05:54.383
さらに、空文字列になった要素はフィルターで取り除けます。

70
00:05:54.383 --> 00:05:59.653
これは、記事が推奨する、分割後にトリムとフィルターで整える流れです。

71
00:05:59.653 --> 00:06:03.683
利用者の入力はそろっていない前提で、分割、整形、除去の順に処理を組み立てると、

72
00:06:03.683 --> 00:06:07.713
扱いやすい配列になります。

73
00:06:07.713 --> 00:06:11.278
メソッドをつなぐ書き方にも慣れておきましょう。

74
00:06:11.278 --> 00:06:17.168
この流れは、検索キーワードの分割や、設定値の読み取りでも同じように使えます。

75
00:06:17.168 --> 00:06:20.386
区切りが見つからない場合を確認します。

76
00:06:20.386 --> 00:06:26.992
カンマを含まないハローをカンマで分けると、文字列全体が一要素の配列になります。

77
00:06:26.992 --> 00:06:34.953
空文字列をカンマで分けた場合も、空文字列が一要素だけ入った配列になることを実機で確認しました。

78
00:06:34.953 --> 00:06:39.696
一方、空文字列を空文字列で分けると、空の配列になります。

79
00:06:39.696 --> 00:06:43.931
引数自体を省略した場合も、全体が一要素の配列です。

80
00:06:43.931 --> 00:06:49.436
要素数がゼロになるのか、一になるのかは条件で変わるため、空入力を扱うコードでは、

81
00:06:49.436 --> 00:06:54.941
長さを前提にせず、実行して確かめる習慣が大切です。

82
00:06:54.941 --> 00:07:01.716
空の配列だと思い込んで処理すると、件数の数え間違いにつながるので注意しましょう。

83
00:07:01.716 --> 00:07:03.558
注意点を二つ確認します。

84
00:07:03.558 --> 00:07:08.316
まず、記事も注意しているように、引用符の中でカンマを含むような本格的なシーエスブイは、

85
00:07:08.316 --> 00:07:13.075
単純なカンマ分割では正しく読めません。

86
00:07:13.075 --> 00:07:15.838
専用の読み取り処理を使ってください。

87
00:07:15.838 --> 00:07:23.819
次に、スプリットは文字列のメソッドなので、数値に対して呼ぶとタイプエラーになることを実機で確認しました。

88
00:07:23.819 --> 00:07:30.113
また、スライドの例のように、分割しても元の文字列は変わらず、新しい配列が返ります。

89
00:07:30.113 --> 00:07:34.257
結果を使いたい場合は、戻り値を変数に保存してください。

90
00:07:34.257 --> 00:07:39.015
単純な区切り専用の道具だと、範囲をはっきりさせておきましょう。

91
00:07:39.015 --> 00:07:44.848
迷った場合は、小さな入力で結果を確かめてから本番のデータに適用してください。

92
00:07:44.848 --> 00:07:45.827
まとめです。

93
00:07:45.827 --> 00:07:52.030
スプリットは、文字列を区切りに従って分割し、文字列の配列を返すメソッドです。

94
00:07:52.030 --> 00:07:54.152
判断のポイントは三つです。

95
00:07:54.152 --> 00:08:00.518
まず、区切りには文字列と正規表現が使え、第2引数で最大要素数を制限できること。

96
00:08:00.518 --> 00:08:09.333
次に、連続する区切りや端の区切りは空文字列の要素を作り、空欄を許さない場合はトリムとフィルターで整えること。

97
00:08:09.333 --> 00:08:17.004
そして、元の文字列は変わらず、引用符を含むシーエスブイのような複雑な形式には向かないことです。

98
00:08:17.004 --> 00:08:24.676
まずは記事の基本例と境界例を実行し、区切りを一つ変えて結果を予測してから確かめてみてください。

99
00:08:24.676 --> 00:08:26.145
お疲れさまでした。

100
00:08:26.145 --> 00:08:32.348
文字列と配列を行き来できるようになると、扱えるデータの形が大きく広がります。