WEBVTT

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

2
00:00:01.158 --> 00:00:03.860
今回はスライスを紹介します。

3
00:00:03.860 --> 00:00:11.774
これは、文字列の指定した範囲だけを切り出して、新しい文字列として返すメソッドです。

4
00:00:11.774 --> 00:00:20.459
たとえばファイル名から拡張子を取り除いたり、日付の文字列から年だけを取り出したりできます。

5
00:00:20.459 --> 00:00:26.700
この動画では、書き方と二つの引数、戻り値、記事の基本例である拡張子の処理、

6
00:00:26.700 --> 00:00:32.941
負の位置指定の使い方、範囲外や開始と終了が逆になる境界例、よく似たサブストリングとの違いまで、

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

8
00:00:39.182 --> 00:00:47.481
位置を数える感覚が身につけば、文字列の欲しい部分だけを正確に取り出せるようになります。

9
00:00:47.481 --> 00:00:55.588
まずは、元の文字列は変わらず、切り出した部分だけが返る、という一点を確かめましょう。

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

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

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

13
00:01:06.222 --> 00:01:10.015
サファリでは一以降で使えます。

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

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

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

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

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

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

20
00:01:38.720 --> 00:01:40.586
書き方を確認します。

21
00:01:40.586 --> 00:01:48.049
対象の文字列に続けてスライスと書き、カッコの中に開始位置と終了位置を指定します。

22
00:01:48.049 --> 00:01:53.460
第1引数は開始位置で、その位置の文字から結果が始まります。

23
00:01:53.460 --> 00:02:00.923
第2引数は終了位置ですが、ここが大切で、終了位置の文字自体は結果に含まれません。

24
00:02:00.923 --> 00:02:06.707
第2引数を省略すると、開始位置から文字列の最後までが返ります。

25
00:02:06.707 --> 00:02:12.864
戻り値は切り出した新しい文字列で、元の文字列自体は変更されません。

26
00:02:12.864 --> 00:02:21.446
スライドの例では、先頭の四文字と、五文字目以降がそれぞれ取り出せることを実機で確認しました。

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

28
00:02:26.484 --> 00:02:32.268
終了位置は含めない、という数え方がスライスを使いこなす鍵です。

29
00:02:32.268 --> 00:02:33.891
記事の基本例を見ます。

30
00:02:33.891 --> 00:02:38.243
レポート・ドット・シーエスブイというファイル名の文字列から、拡張子を除いた名前と、

31
00:02:38.243 --> 00:02:42.595
拡張子そのものを取り出すコードです。

32
00:02:42.595 --> 00:02:49.971
開始位置ゼロから、末尾から四つ手前までを切り出すと、ドットと拡張子が除かれてレポートだけが残ります。

33
00:02:49.971 --> 00:02:55.577
逆に、末尾から三文字だけを切り出すと、シーエスブイという拡張子が得られます。

34
00:02:55.577 --> 00:03:00.445
どちらも記事の期待出力と一致し、ノードの実機結果とも一致しました。

35
00:03:00.445 --> 00:03:05.461
記事が説明するように、末尾の位置を意識して切り出すのがポイントです。

36
00:03:05.461 --> 00:03:11.510
拡張子の種類が複数ある実際の処理では、末尾の位置を検証してから切り出してください。

37
00:03:11.510 --> 00:03:14.608
まずはこの基本例を手で実行してみましょう。

38
00:03:14.608 --> 00:03:16.659
負の位置指定を確認します。

39
00:03:16.659 --> 00:03:22.970
スライスでは、引数に負の数を渡すと、文字列の末尾から数えた位置として扱われます。

40
00:03:22.970 --> 00:03:29.124
マイナス一は最後の文字、マイナス三は末尾から三文字の始まり、という数え方です。

41
00:03:29.124 --> 00:03:35.514
スライドの例では、末尾から六文字を取り出すとスクリプトが得られ、末尾から六つ手前から三つ手前までを切り出すと、

42
00:03:35.514 --> 00:03:41.904
その先頭の三文字が得られることを実機で確認しました。

43
00:03:41.904 --> 00:03:50.108
文字列の長さが変わっても、末尾を基準に指定できるため、拡張子や末尾のコードを取り出す処理で特に便利です。

44
00:03:50.108 --> 00:03:53.895
長さを数えて先頭から指定し直す必要がありません。

45
00:03:53.895 --> 00:03:58.628
末尾から数える感覚に慣れると、位置指定がぐっと楽になります。

46
00:03:58.628 --> 00:04:01.791
引数の省略と、範囲外の指定を確認します。

47
00:04:01.791 --> 00:04:06.536
まず、引数をすべて省略すると、文字列全体がそのまま返ります。

48
00:04:06.536 --> 00:04:11.360
次に、終了位置に文字列の長さを超える大きな数を指定しても、エラーにはならず、

49
00:04:11.360 --> 00:04:16.184
最後の文字までが返ることを実機で確認しました。

50
00:04:16.184 --> 00:04:22.669
逆に、開始位置が文字列の長さ以上だと、切り出す範囲がないため、空文字列が返ります。

51
00:04:22.669 --> 00:04:29.628
はみ出した位置は、端の位置にそろえて扱われる、と覚えておくと結果を予測しやすくなります。

52
00:04:29.628 --> 00:04:36.113
範囲外で例外が出ないのは扱いやすい反面、位置の計算ミスに気づきにくい面もあります。

53
00:04:36.113 --> 00:04:41.016
意図した範囲になっているか、小さな例で確かめる習慣が大切です。

54
00:04:41.016 --> 00:04:43.276
記事の境界条件の例を見ます。

55
00:04:43.276 --> 00:04:51.508
エー・ビー・シー・ディー・イーという五文字の文字列で、開始位置に三、終了位置に一を指定するコードです。

56
00:04:51.508 --> 00:04:57.965
開始が終了より後ろにあるため、切り出す範囲は存在せず、結果は空文字列になります。

57
00:04:57.965 --> 00:05:02.484
空文字列と等しいかどうかを調べる式がトゥルーになることが、記事の期待出力であり、

58
00:05:02.484 --> 00:05:07.004
実機でも同じ結果を確認しました。

59
00:05:07.004 --> 00:05:11.362
スライスは、開始と終了を自動で入れ替えたりはしません。

60
00:05:11.362 --> 00:05:17.173
開始と終了の前後関係が逆になると、例外ではなく空文字列が静かに返ります。

61
00:05:17.173 --> 00:05:24.437
成功例だけでなく、こうした境界条件を確かめておくと、位置指定のミスを早めに見つけられます。

62
00:05:24.437 --> 00:05:27.988
結果が空になる条件として覚えておきましょう。

63
00:05:27.988 --> 00:05:29.992
実務に近い実例を見ます。

64
00:05:29.992 --> 00:05:37.508
年月日がハイフンでつながった日付の文字列を、位置を指定して年と月と日に分解するコードです。

65
00:05:37.508 --> 00:05:41.600
先頭の四文字が年、六文字目から二文字が月、九文字目以降が日になることを、

66
00:05:41.600 --> 00:05:45.692
すべて実機で確認しました。

67
00:05:45.692 --> 00:05:52.373
形式が固定された文字列では、このように決まった位置で切り出すのが簡単で確実です。

68
00:05:52.373 --> 00:05:59.387
区切り文字の位置を数える際は、ハイフン自体も一文字として数える点に注意してください。

69
00:05:59.387 --> 00:06:06.235
逆に、形式がばらばらの入力では、位置がずれて誤った部分を切り出すおそれがあります。

70
00:06:06.235 --> 00:06:10.577
その場合は、先に形式を検証してから切り出しましょう。

71
00:06:10.577 --> 00:06:16.256
ファイル名の接頭辞や、固定長のコードの分解にも同じ考え方が使えます。

72
00:06:16.256 --> 00:06:19.793
よく似たサブストリングとの違いを確認します。

73
00:06:19.793 --> 00:06:22.365
まず、開始と終了が逆の場合です。

74
00:06:22.365 --> 00:06:27.670
スライスは空文字列を返しますが、サブストリングは開始と終了を自動で入れ替えて計算するため、

75
00:06:27.670 --> 00:06:32.975
ビー・シーが返ることを実機で確認しました。

76
00:06:32.975 --> 00:06:34.905
次に、負の数の扱いです。

77
00:06:34.905 --> 00:06:39.808
サブストリングは負数をゼロとして扱いますが、スライスは末尾から数えるため、

78
00:06:39.808 --> 00:06:44.711
マイナス三を指定すると末尾の三文字が得られます。

79
00:06:44.711 --> 00:06:49.052
末尾基準の指定が必要な場面ではスライスが向いています。

80
00:06:49.052 --> 00:06:51.624
どちらも元の文字列は変えません。

81
00:06:51.624 --> 00:06:58.055
名前が似ているため混同しやすいので、負数と入れ替えの二点で区別して覚えましょう。

82
00:06:58.055 --> 00:07:02.556
迷ったら、小さな文字列で両方を試して比べるのが確実です。

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

84
00:07:04.500 --> 00:07:12.922
まず、記事も注意しているように、スライスの位置はユーティーエフ・シックスティーンのコード単位で数えます。

85
00:07:12.922 --> 00:07:23.126
そのため、絵文字のような文字を途中で分断してしまう可能性があり、画面に表示される文字数の制限とは区別して考える必要があります。

86
00:07:23.126 --> 00:07:27.985
表示文字数で切り出したい場合は、別の方法を検討してください。

87
00:07:27.985 --> 00:07:34.950
次に、スライドの例のように、切り出しても元の文字列は変わらず、新しい文字列が返ります。

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

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

90
00:07:47.584 --> 00:07:48.675
まとめです。

91
00:07:48.675 --> 00:07:55.763
スライスは、文字列の指定した範囲を切り出して、新しい文字列を返すメソッドです。

92
00:07:55.763 --> 00:07:58.126
判断のポイントは三つです。

93
00:07:58.126 --> 00:08:05.033
まず、終了位置の文字は結果に含まれず、第2引数を省略すると最後まで返ること。

94
00:08:05.033 --> 00:08:15.030
次に、負の数は末尾から数えた位置になり、ファイル名や日付のような固定形式の文字列を分解するのに向いていること。

95
00:08:15.030 --> 00:08:21.301
そして、開始が終了以上だと空文字列になり、位置はユーティーエフ・シックスティーンのコード単位で数えるため、

96
00:08:21.301 --> 00:08:27.572
絵文字の分断に注意することです。

97
00:08:27.572 --> 00:08:35.933
まずは記事の基本例と境界例を実行し、位置を一つ変えて結果を予測してから確かめてみてください。

98
00:08:35.933 --> 00:08:37.568
お疲れさまでした。

99
00:08:37.568 --> 00:08:42.476
位置で切り出す感覚は、文字列処理全体の土台になります。