WEBVTT

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

2
00:00:00.819 --> 00:00:04.503
今回はジャバスクリプトのストリング・ローを紹介します。

3
00:00:04.503 --> 00:00:08.529
これは、テンプレートリテラルに書いたバックスラッシュを、エスケープとして解釈せず、

4
00:00:08.529 --> 00:00:12.554
そのまま残して文字列を作る関数です。

5
00:00:12.554 --> 00:00:17.467
ウィンドウズ形式のパスや正規表現をコードに書くと、通常はバックスラッシュを二重に書く必要があり、

6
00:00:17.467 --> 00:00:22.379
読み手がエスケープの段数を数える負担になります。

7
00:00:22.379 --> 00:00:26.473
ストリング・ローを使えば、見た目に近い形で文字列を書けます。

8
00:00:26.473 --> 00:00:30.840
ただし、すでに作られた文字列を元の表記へ戻す関数ではありません。

9
00:00:30.840 --> 00:00:33.705
この区別を、具体例で確認していきましょう。

10
00:00:33.705 --> 00:00:37.663
この動画では、基本の呼び出し方、通常の関数としての呼び方、パスと正規表現の実例、

11
00:00:37.663 --> 00:00:41.620
失敗しやすい注意点の順に解説します。

12
00:00:41.620 --> 00:00:42.977
まず動作環境です。

13
00:00:42.977 --> 00:00:49.312
ストリング・ローはブラウザー専用の機能ではなく、ジャバスクリプトの組み込み関数です。

14
00:00:49.312 --> 00:00:54.138
二千十五年九月以降、主要ブラウザーで広く利用できるとされており、現在のクローム、

15
00:00:54.138 --> 00:00:58.965
エッジ、ファイアフォックス、サファリで使えます。

16
00:00:58.965 --> 00:01:04.093
ノード・ジェイエスでも、追加パッケージや実験フラグなしで動作します。

17
00:01:04.093 --> 00:01:09.975
古い環境も対象に含める場合は、タイプオブで関数として存在するかを確認できます。

18
00:01:09.975 --> 00:01:17.667
ただし、テンプレートリテラル自体を読めない環境では、確認の前に構文エラーになる点には注意してください。

19
00:01:17.667 --> 00:01:25.208
記事の確認日は二千二十六年十月二十五日で、ノード・ジェイエスの二十二系と二十四系を対象にしています。

20
00:01:25.208 --> 00:01:27.263
基本の書き方を見ましょう。

21
00:01:27.263 --> 00:01:35.324
最もよく使うのは、ストリング・ローの直後に、バッククォートで囲んだテンプレートリテラルを書く形式です。

22
00:01:35.324 --> 00:01:38.959
この呼び方を、タグ付きテンプレートと呼びます。

23
00:01:38.959 --> 00:01:45.913
スライドの例では、フォルダー名とファイル名の間に、バックスラッシュとエヌが並んでいます。

24
00:01:45.913 --> 00:01:49.707
通常の文字列なら、これは改行として解釈されます。

25
00:01:49.707 --> 00:01:56.345
しかしストリング・ローでは、バックスラッシュとエヌの二文字として、そのまま残ります。

26
00:01:56.345 --> 00:01:59.190
戻り値は文字列で、処理は同期的です。

27
00:01:59.190 --> 00:02:02.984
非同期の戻り値ではない点も押さえておきましょう。

28
00:02:02.984 --> 00:02:09.780
通常のテンプレートリテラルとの違いは、固定部分のエスケープを解釈するかどうかだけです。

29
00:02:09.780 --> 00:02:13.241
通常の文字列との違いを、長さで確かめましょう。

30
00:02:13.241 --> 00:02:18.659
大文字のエー、バックスラッシュ、エヌ、大文字のビーという並びを考えます。

31
00:02:18.659 --> 00:02:25.732
通常の文字列では、バックスラッシュとエヌが改行の一文字に変わるため、全体の長さは三になります。

32
00:02:25.732 --> 00:02:29.343
一方、ストリング・ローではバックスラッシュとエヌが別々の文字として残るため、

33
00:02:29.343 --> 00:02:32.955
長さは四になります。

34
00:02:32.955 --> 00:02:39.125
画面の表示だけでは改行と見分けにくい場合でも、長さを調べれば違いがはっきりします。

35
00:02:39.125 --> 00:02:43.489
文字列の検証では、表示と長さの両方を見る習慣が役立ちます。

36
00:02:43.489 --> 00:02:49.960
逆に、すでに作られた文字列については、もとの表記がどうだったかを知る方法はありません。

37
00:02:49.960 --> 00:02:53.576
次に大切なのが、固定部分と埋め込み値の違いです。

38
00:02:53.576 --> 00:02:59.604
テンプレートの中に値を埋め込むと、その式は評価され、値が文字列へ組み込まれます。

39
00:02:59.604 --> 00:03:05.029
ただし、ストリング・ローがバックスラッシュを保つのは、固定部分だけです。

40
00:03:05.029 --> 00:03:12.864
たとえば、改行を含む文字列を埋め込んでも、その改行がバックスラッシュとエヌの並びに戻ることはありません。

41
00:03:12.864 --> 00:03:18.289
埋め込んだ値に改行が含まれているかどうかは、インクルーズで調べられます。

42
00:03:18.289 --> 00:03:21.453
固定部分はそのまま、埋め込み値はそのまま。

43
00:03:21.453 --> 00:03:26.577
この二つの領域を区別することが、ストリング・ローを理解する核心です。

44
00:03:26.577 --> 00:03:31.700
つまり、値そのものに含まれる文字は、そのまま結果の文字列に現れます。

45
00:03:31.700 --> 00:03:35.913
ストリング・ローは、通常の関数の形でも呼べます。

46
00:03:35.913 --> 00:03:40.477
第一引数には、ローというプロパティを持つオブジェクトを渡し、続く引数に、

47
00:03:40.477 --> 00:03:45.041
各区切りへ挿入する値を渡します。

48
00:03:45.041 --> 00:03:55.398
スライドの例では、固定部分の配列と、ブックと三という値から、イコールやセミコロンを含む一つの文字列が組み立てられます。

49
00:03:55.398 --> 00:04:03.473
タグとして呼ぶ場合は、この引数の組み立てをジャバスクリプトのエンジンが自動で行ってくれます。

50
00:04:03.473 --> 00:04:11.724
通常のアプリでは、固定部分と埋め込み値の対応が読み取りやすい、タグ形式を選ぶのがおすすめです。

51
00:04:11.724 --> 00:04:19.272
挿入する値が足りない区切りでは、後ろの固定部分がそのまま続き、余った値は使われません。

52
00:04:19.272 --> 00:04:23.668
実例として、ウィンドウズ形式のパスを組み立てましょう。

53
00:04:23.668 --> 00:04:28.226
まず、フォルダーまでの部分をストリング・ローで作ります。

54
00:04:28.226 --> 00:04:34.901
区切りのバックスラッシュは、通常の文字列として別に用意し、ファイル名と連結します。

55
00:04:34.901 --> 00:04:40.599
結果は、バックスラッシュを一つずつ含む、自然なパスの文字列になります。

56
00:04:40.599 --> 00:04:44.669
ここで作れるのは、あくまで文字列としてのパスです。

57
00:04:44.669 --> 00:04:49.879
ファイルが存在するかの確認や、アクセス権の確認までは行いません。

58
00:04:49.879 --> 00:04:53.705
ブラウザーからローカルファイルを自由に読めるようになる機能でもない点は、

59
00:04:53.705 --> 00:04:57.531
誤解しないでください。

60
00:04:57.531 --> 00:05:03.147
複数行で書けば実際の改行も文字列に入りますが、見た目を整えるために付けた行頭の空白も残るため、

61
00:05:03.147 --> 00:05:08.764
不要な空白が混ざらないよう注意してください。

62
00:05:08.764 --> 00:05:11.672
もう一つの応用が、正規表現です。

63
00:05:11.672 --> 00:05:17.033
数字の桁数を引数で受け取り、ストリング・ローでパターンの文字列を組み立てて、

64
00:05:17.033 --> 00:05:22.394
正規表現オブジェクトを作る関数を考えます。

65
00:05:22.394 --> 00:05:32.207
固定部分のバックスラッシュはそのまま残るので、二重に書く必要がなく、パターンの構造を読み取りやすくなります。

66
00:05:32.207 --> 00:05:40.021
桁数に三を指定すれば、アイディー・イチニサンが一致し、桁の足りないものは一致しません。

67
00:05:40.021 --> 00:05:47.654
記事の実例では、桁数を一から八の整数に限定し、範囲外ならレンジエラーを投げています。

68
00:05:47.654 --> 00:05:51.107
埋め込む値の検証は、利用側の責任です。

69
00:05:51.107 --> 00:05:57.104
この検証を省くと、想定外のパターンが作られてしまう恐れがあります。

70
00:05:57.104 --> 00:05:59.145
注意点を二つ紹介します。

71
00:05:59.145 --> 00:06:01.867
一つ目は、埋め込み値の扱いです。

72
00:06:01.867 --> 00:06:10.033
ストリング・ローは、埋め込んだ値を、正規表現やエイチティーエムエル向けに安全な形へ変換しません。

73
00:06:10.033 --> 00:06:19.730
任意の検索語をそのまま正規表現へ埋め込むと、検索語に含まれる記号が、正規表現の構文として解釈される場合があります。

74
00:06:19.730 --> 00:06:26.874
固定の文字を探すだけなら、文字列検索を使うなど、目的に合う処理を先に選んでください。

75
00:06:26.874 --> 00:06:33.339
前の実例で桁数を整数に限定したのも、埋め込む値をアプリ側で管理するためです。

76
00:06:33.339 --> 00:06:37.422
便利さと安全化は、別の話として切り分けましょう。

77
00:06:37.422 --> 00:06:43.716
パス文字列を作れたとしても、その先の処理まで安全になるわけではありません。

78
00:06:43.716 --> 00:06:46.341
二つ目は、テンプレート自体の制約です。

79
00:06:46.341 --> 00:06:52.280
バッククォートは文字列の終わり、埋め込みの開始記号は埋め込みの開始として解釈されます。

80
00:06:52.280 --> 00:06:56.010
ストリング・ローを付けても、この構文はなくなりません。

81
00:06:56.010 --> 00:07:02.226
特に、終わりの直前にバックスラッシュを一つだけ書くと、終わりの合図を打ち消してしまいます。

82
00:07:02.226 --> 00:07:08.165
末尾にバックスラッシュを置きたい場合は、スライドのように、値を埋め込む方法が使えます。

83
00:07:08.165 --> 00:07:15.348
また、通常の関数として呼ぶ際に、単なる文字列を渡すと、必要なプロパティがないためタイプエラーになります。

84
00:07:15.348 --> 00:07:19.216
例外は同期的に起きるので、トライキャッチで処理できます。

85
00:07:19.216 --> 00:07:20.743
活用場面とまとめです。

86
00:07:20.743 --> 00:07:25.186
ストリング・ローは、ソースの中に、ウィンドウズ形式のパス例、バックスラッシュを含む説明文、

87
00:07:25.186 --> 00:07:29.630
動的な正規表現を書く場面で役立ちます。

88
00:07:29.630 --> 00:07:38.794
導入するときは、通常のテンプレートを一括で置き換えるのではなく、バックスラッシュの多い箇所から少しずつ置き換える方法がおすすめです。

89
00:07:38.794 --> 00:07:43.792
もともと改行やタブとして使っていた表記の意味まで変わってしまうためです。

90
00:07:43.792 --> 00:07:48.791
確認するときは、表示だけでなく、長さや改行の有無も併せて調べてください。

91
00:07:48.791 --> 00:07:53.442
最後に、自分のコードの中でバックスラッシュが重なっている箇所を一つ探し、

92
00:07:53.442 --> 00:07:58.094
書き換えても意味が変わらないかを、長さで確認してみてください。

93
00:07:58.094 --> 00:07:59.343
お疲れさまでした。

94
00:07:59.343 --> 00:08:05.036
ストリング・ローは、固定部分のバックスラッシュを保つ関数だと覚えておいてください。