WEBVTT

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

2
00:00:00.836 --> 00:00:02.647
今回はトリムを紹介します。

3
00:00:02.647 --> 00:00:06.409
これは、文字列の両端にある空白を取り除くメソッドです。

4
00:00:06.409 --> 00:00:13.236
たとえば利用者が入力欄に名前を入れるとき、前後に余分なスペースや改行が付いてしまうことがあります。

5
00:00:13.236 --> 00:00:17.276
トリムを使うと、その両端の空白だけをすっきり取り除けます。

6
00:00:17.276 --> 00:00:23.198
この動画では、書き方と引数と戻り値、記事の基本例である名前の整形、空白だけの文字列が空になる境界例、

7
00:00:23.198 --> 00:00:29.119
片側だけを取り除く関連メソッドとの違いまで、実行結果と一緒に学びます。

8
00:00:29.119 --> 00:00:32.184
地味ですが、入力処理では欠かせない道具です。

9
00:00:32.184 --> 00:00:37.618
フォームやファイルから読み込んだ文字列では、ほぼ毎回のように出てくる処理です。

10
00:00:37.618 --> 00:00:42.076
まずは、両端だけが変わるという一点を、実行結果で確かめましょう。

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

12
00:00:43.869 --> 00:00:46.766
トリムは古くから使える文字列メソッドです。

13
00:00:46.766 --> 00:00:50.421
クロームでは四以降、エッジでは十二以降、ファイアーフォックスでは三・五以降、

14
00:00:50.421 --> 00:00:54.076
サファリでは五以降で使えます。

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

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

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

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

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

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

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

22
00:01:22.301 --> 00:01:27.117
対象の文字列に続けてトリムと書き、カッコは空のままにします。

23
00:01:27.117 --> 00:01:29.203
トリムに引数はありません。

24
00:01:29.203 --> 00:01:32.574
除く対象は、両端の空白文字と改行文字です。

25
00:01:32.574 --> 00:01:38.192
戻り値は、両端を整えた新しい文字列で、元の文字列自体は変更されません。

26
00:01:38.192 --> 00:01:43.168
スライドの例では、前後に空白が二つずつ付いたハローが、空白のないハローになり、

27
00:01:43.168 --> 00:01:48.144
長さも九から五に減ることを実機で確認しました。

28
00:01:48.144 --> 00:01:54.886
結果を使いたい場合は、戻り値を変数に保存するか、そのまま表示する形で使ってください。

29
00:01:54.886 --> 00:01:58.257
引数がない分、書き方はとてもシンプルです。

30
00:01:58.257 --> 00:02:03.554
戻り値の長さを比べると、空白が何文字取れたかも数字で確認できます。

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

32
00:02:05.164 --> 00:02:11.602
前後に空白が付き、末尾に改行が付いた、山田太郎という名前の文字列をトリムするコードです。

33
00:02:11.602 --> 00:02:18.480
実行すると、山田太郎とだけ表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。

34
00:02:18.480 --> 00:02:22.430
名前の中にある空白は残っている点にも注目してください。

35
00:02:22.430 --> 00:02:27.552
記事が説明するように、これは入力欄の前後に付いた空白を除く使い方です。

36
00:02:27.552 --> 00:02:32.820
あいさつや検索の前に、利用者の入力を整える場面で、そのまま使える形です。

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

38
00:02:36.039 --> 00:02:40.868
コピーした文字列や、改行を含む貼り付けでも、同じ形で整えられます。

39
00:02:40.868 --> 00:02:43.060
記事の境界条件の例を見ます。

40
00:02:43.060 --> 00:02:51.359
スペースとタブと改行だけからなる文字列に対してトリムを実行し、空文字列と等しいかどうかを比べるコードです。

41
00:02:51.359 --> 00:02:58.718
実行するとトゥルーとなり、記事の期待出力と同じく、空白だけの文字列は空になることが分かります。

42
00:02:58.718 --> 00:03:02.320
長さもゼロになることを実機で追加確認しました。

43
00:03:02.320 --> 00:03:08.896
利用者が空白だけを入力した場合を、未入力として扱いたいときに、この判定が役立ちます。

44
00:03:08.896 --> 00:03:16.099
成功例だけでなく、こうした境界条件を確かめると、実際の入力チェックへ組み込みやすくなります。

45
00:03:16.099 --> 00:03:20.640
この判定は、必須入力のチェックを作るときの土台になります。

46
00:03:20.640 --> 00:03:23.407
除かれる空白の種類を確認します。

47
00:03:23.407 --> 00:03:30.325
トリムが対象にするのは、文字列の先頭と末尾にある、スペース、タブ、改行などです。

48
00:03:30.325 --> 00:03:39.837
スライドの最初の例では、タブや改行に囲まれたジャバスクリプトが、文字だけになって返ることを実機で確認しました。

49
00:03:39.837 --> 00:03:45.198
一方、二つ目の例のように、文字と文字の間にある空白は残ります。

50
00:03:45.198 --> 00:03:50.214
エーとビーの間の空白が二つ残ることも、実機で確認済みです。

51
00:03:50.214 --> 00:03:55.748
つまりトリムは、文字列の中の空白をすべて消す機能ではありません。

52
00:03:55.748 --> 00:03:59.207
両端だけを整える道具だと覚えてください。

53
00:03:59.207 --> 00:04:05.260
空白をすべて消したい場合は、別の置換処理を組み合わせる必要があります。

54
00:04:05.260 --> 00:04:06.835
実務に近い実例を見ます。

55
00:04:06.835 --> 00:04:12.477
名前の入力をトリムで整えると、前後の空白が取れた山田が得られ、実機でも確認できました。

56
00:04:12.477 --> 00:04:17.397
さらに、空白だけの文字列をトリムして空文字列と比べるとトゥルーになるため、

57
00:04:17.397 --> 00:04:22.318
見た目は何か入っているのに中身は空白だけ、という入力を未入力として弾けます。

58
00:04:22.318 --> 00:04:25.992
メールアドレスや検索キーワードでも同じ考え方が使えます。

59
00:04:25.992 --> 00:04:31.109
大切なのは、トリムした結果を変数に保存して、その後の判定や保存に使うことです。

60
00:04:31.109 --> 00:04:34.521
整える前の値をそのまま使わないよう注意してください。

61
00:04:34.521 --> 00:04:38.720
検索の前に整えておくと、空白の有無で結果がぶれる事故も防げます。

62
00:04:38.720 --> 00:04:43.338
片側だけを取り除きたい場合の、関連メソッドを紹介します。

63
00:04:43.338 --> 00:04:49.770
トリムスタートは先頭の空白だけを、トリムエンドは末尾の空白だけを取り除きます。

64
00:04:49.770 --> 00:04:56.202
スライドでは、結果を角カッコで囲んで表示し、残った空白が見えるようにしました。

65
00:04:56.202 --> 00:05:01.067
トリムでは両端が消え、トリムスタートでは末尾の空白が残り、トリムエンドでは先頭の空白が残ることを、

66
00:05:01.067 --> 00:05:05.933
実機で確認済みです。

67
00:05:05.933 --> 00:05:12.035
行頭の字下げは消したいが末尾は残したい、といった場面では片側版が便利です。

68
00:05:12.035 --> 00:05:15.498
目的に合わせて、三つを使い分けてください。

69
00:05:15.498 --> 00:05:20.611
名前が似ている三つのメソッドは、消える側で覚えると迷いません。

70
00:05:20.611 --> 00:05:22.508
注意点を一つ確認します。

71
00:05:22.508 --> 00:05:25.986
トリムを呼んでも、元の文字列は変わりません。

72
00:05:25.986 --> 00:05:30.886
スライドの例では、トリムの結果はハイと短くなりますが、元の変数の長さは六のままで、

73
00:05:30.886 --> 00:05:35.787
空白が残っていることを実機で確認しました。

74
00:05:35.787 --> 00:05:43.217
ジャバスクリプトの文字列は変更できない決まりなので、メソッドは新しい文字列を返す形になります。

75
00:05:43.217 --> 00:05:50.488
そのため、結果を使いたい場合は、戻り値を別の変数に入れるか、元の変数に代入し直してください。

76
00:05:50.488 --> 00:05:54.599
呼んだだけで整ったと思い込むのが、よくあるミスです。

77
00:05:54.599 --> 00:05:59.183
変換前と変換後を並べて表示すると、違いが一目で分かります。

78
00:05:59.183 --> 00:06:00.683
もう二つ注意します。

79
00:06:00.683 --> 00:06:07.133
まず、トリムは文字列のメソッドなので、数値やヌルなど、文字列ではない値には使えません。

80
00:06:07.133 --> 00:06:11.782
数値に対して呼ぶとタイプエラーになることを実機で確認しました。

81
00:06:11.782 --> 00:06:17.332
値の出どころが決まっていない場合は、先に文字列かどうかを確認してください。

82
00:06:17.332 --> 00:06:23.257
次に、記事も注意しているように、トリムは途中の空白を消したり、すべての見えない文字を取り除いたりする機能ではなく、

83
00:06:23.257 --> 00:06:29.181
エイチティーエムエルの無害化にもなりません。

84
00:06:29.181 --> 00:06:33.681
危険な入力への対策は、用途に合った別の方法で行ってください。

85
00:06:33.681 --> 00:06:39.081
トリムでできるのは両端の整形だけだと、範囲をはっきりさせておきましょう。

86
00:06:39.081 --> 00:06:40.093
まとめです。

87
00:06:40.093 --> 00:06:46.330
トリムは、文字列の両端の空白を取り除いた、新しい文字列を返すメソッドです。

88
00:06:46.330 --> 00:06:48.522
判断のポイントは三つです。

89
00:06:48.522 --> 00:06:54.591
まず、引数はなく、除かれるのは両端のスペースやタブや改行だけであること。

90
00:06:54.591 --> 00:06:59.312
次に、文字の間の空白は残り、元の文字列も変わらないこと。

91
00:06:59.312 --> 00:07:05.550
そして、空白だけの入力は空文字列になるため、入力チェックに使えることです。

92
00:07:05.550 --> 00:07:13.979
まずは記事の基本例と境界例を実行し、入力の空白を一つ変えて、結果を予測してから確かめてみてください。

93
00:07:13.979 --> 00:07:15.497
お疲れさまでした。

94
00:07:15.497 --> 00:07:20.891
小さな整形を正しく行うことが、信頼できる入力処理につながります。

95
00:07:20.891 --> 00:07:26.792
次に学ぶ分割や検索のメソッドでも、入力を整える前処理として役立ちます。

96
00:07:26.792 --> 00:07:32.187
一つのメソッドを正しく使い分ける力が、着実に身についていきます。