SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのString.raw()：バックスラッシュを保って文字列を作るの解説動画

再生時間 8:05動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00今回はジャバスクリプトのストリング・ローを紹介します。
  3. 0:04これは、テンプレートリテラルに書いたバックスラッシュを、エスケープとして解釈せず、
  4. 0:08そのまま残して文字列を作る関数です。
  5. 0:12ウィンドウズ形式のパスや正規表現をコードに書くと、通常はバックスラッシュを二重に書く必要があり、
  6. 0:17読み手がエスケープの段数を数える負担になります。
  7. 0:22ストリング・ローを使えば、見た目に近い形で文字列を書けます。
  8. 0:26ただし、すでに作られた文字列を元の表記へ戻す関数ではありません。
  9. 0:30この区別を、具体例で確認していきましょう。
  10. 0:33この動画では、基本の呼び出し方、通常の関数としての呼び方、パスと正規表現の実例、
  11. 0:37失敗しやすい注意点の順に解説します。
  12. 0:41まず動作環境です。
  13. 0:42ストリング・ローはブラウザー専用の機能ではなく、ジャバスクリプトの組み込み関数です。
  14. 0:49二千十五年九月以降、主要ブラウザーで広く利用できるとされており、現在のクローム、
  15. 0:54エッジ、ファイアフォックス、サファリで使えます。
  16. 0:58ノード・ジェイエスでも、追加パッケージや実験フラグなしで動作します。
  17. 1:04古い環境も対象に含める場合は、タイプオブで関数として存在するかを確認できます。
  18. 1:09ただし、テンプレートリテラル自体を読めない環境では、確認の前に構文エラーになる点には注意してください。
  19. 1:17記事の確認日は二千二十六年十月二十五日で、ノード・ジェイエスの二十二系と二十四系を対象にしています。
  20. 1:25基本の書き方を見ましょう。
  21. 1:27最もよく使うのは、ストリング・ローの直後に、バッククォートで囲んだテンプレートリテラルを書く形式です。
  22. 1:35この呼び方を、タグ付きテンプレートと呼びます。
  23. 1:38スライドの例では、フォルダー名とファイル名の間に、バックスラッシュとエヌが並んでいます。
  24. 1:45通常の文字列なら、これは改行として解釈されます。
  25. 1:49しかしストリング・ローでは、バックスラッシュとエヌの二文字として、そのまま残ります。
  26. 1:56戻り値は文字列で、処理は同期的です。
  27. 1:59非同期の戻り値ではない点も押さえておきましょう。
  28. 2:02通常のテンプレートリテラルとの違いは、固定部分のエスケープを解釈するかどうかだけです。
  29. 2:09通常の文字列との違いを、長さで確かめましょう。
  30. 2:13大文字のエー、バックスラッシュ、エヌ、大文字のビーという並びを考えます。
  31. 2:18通常の文字列では、バックスラッシュとエヌが改行の一文字に変わるため、全体の長さは三になります。
  32. 2:25一方、ストリング・ローではバックスラッシュとエヌが別々の文字として残るため、
  33. 2:29長さは四になります。
  34. 2:32画面の表示だけでは改行と見分けにくい場合でも、長さを調べれば違いがはっきりします。
  35. 2:39文字列の検証では、表示と長さの両方を見る習慣が役立ちます。
  36. 2:43逆に、すでに作られた文字列については、もとの表記がどうだったかを知る方法はありません。
  37. 2:49次に大切なのが、固定部分と埋め込み値の違いです。
  38. 2:53テンプレートの中に値を埋め込むと、その式は評価され、値が文字列へ組み込まれます。
  39. 2:59ただし、ストリング・ローがバックスラッシュを保つのは、固定部分だけです。
  40. 3:05たとえば、改行を含む文字列を埋め込んでも、その改行がバックスラッシュとエヌの並びに戻ることはありません。
  41. 3:12埋め込んだ値に改行が含まれているかどうかは、インクルーズで調べられます。
  42. 3:18固定部分はそのまま、埋め込み値はそのまま。
  43. 3:21この二つの領域を区別することが、ストリング・ローを理解する核心です。
  44. 3:26つまり、値そのものに含まれる文字は、そのまま結果の文字列に現れます。
  45. 3:31ストリング・ローは、通常の関数の形でも呼べます。
  46. 3:35第一引数には、ローというプロパティを持つオブジェクトを渡し、続く引数に、
  47. 3:40各区切りへ挿入する値を渡します。
  48. 3:45スライドの例では、固定部分の配列と、ブックと三という値から、イコールやセミコロンを含む一つの文字列が組み立てられます。
  49. 3:55タグとして呼ぶ場合は、この引数の組み立てをジャバスクリプトのエンジンが自動で行ってくれます。
  50. 4:03通常のアプリでは、固定部分と埋め込み値の対応が読み取りやすい、タグ形式を選ぶのがおすすめです。
  51. 4:11挿入する値が足りない区切りでは、後ろの固定部分がそのまま続き、余った値は使われません。
  52. 4:19実例として、ウィンドウズ形式のパスを組み立てましょう。
  53. 4:23まず、フォルダーまでの部分をストリング・ローで作ります。
  54. 4:28区切りのバックスラッシュは、通常の文字列として別に用意し、ファイル名と連結します。
  55. 4:34結果は、バックスラッシュを一つずつ含む、自然なパスの文字列になります。
  56. 4:40ここで作れるのは、あくまで文字列としてのパスです。
  57. 4:44ファイルが存在するかの確認や、アクセス権の確認までは行いません。
  58. 4:49ブラウザーからローカルファイルを自由に読めるようになる機能でもない点は、
  59. 4:53誤解しないでください。
  60. 4:57複数行で書けば実際の改行も文字列に入りますが、見た目を整えるために付けた行頭の空白も残るため、
  61. 5:03不要な空白が混ざらないよう注意してください。
  62. 5:08もう一つの応用が、正規表現です。
  63. 5:11数字の桁数を引数で受け取り、ストリング・ローでパターンの文字列を組み立てて、
  64. 5:17正規表現オブジェクトを作る関数を考えます。
  65. 5:22固定部分のバックスラッシュはそのまま残るので、二重に書く必要がなく、パターンの構造を読み取りやすくなります。
  66. 5:32桁数に三を指定すれば、アイディー・イチニサンが一致し、桁の足りないものは一致しません。
  67. 5:40記事の実例では、桁数を一から八の整数に限定し、範囲外ならレンジエラーを投げています。
  68. 5:47埋め込む値の検証は、利用側の責任です。
  69. 5:51この検証を省くと、想定外のパターンが作られてしまう恐れがあります。
  70. 5:57注意点を二つ紹介します。
  71. 5:59一つ目は、埋め込み値の扱いです。
  72. 6:01ストリング・ローは、埋め込んだ値を、正規表現やエイチティーエムエル向けに安全な形へ変換しません。
  73. 6:10任意の検索語をそのまま正規表現へ埋め込むと、検索語に含まれる記号が、正規表現の構文として解釈される場合があります。
  74. 6:19固定の文字を探すだけなら、文字列検索を使うなど、目的に合う処理を先に選んでください。
  75. 6:26前の実例で桁数を整数に限定したのも、埋め込む値をアプリ側で管理するためです。
  76. 6:33便利さと安全化は、別の話として切り分けましょう。
  77. 6:37パス文字列を作れたとしても、その先の処理まで安全になるわけではありません。
  78. 6:43二つ目は、テンプレート自体の制約です。
  79. 6:46バッククォートは文字列の終わり、埋め込みの開始記号は埋め込みの開始として解釈されます。
  80. 6:52ストリング・ローを付けても、この構文はなくなりません。
  81. 6:56特に、終わりの直前にバックスラッシュを一つだけ書くと、終わりの合図を打ち消してしまいます。
  82. 7:02末尾にバックスラッシュを置きたい場合は、スライドのように、値を埋め込む方法が使えます。
  83. 7:08また、通常の関数として呼ぶ際に、単なる文字列を渡すと、必要なプロパティがないためタイプエラーになります。
  84. 7:15例外は同期的に起きるので、トライキャッチで処理できます。
  85. 7:19活用場面とまとめです。
  86. 7:20ストリング・ローは、ソースの中に、ウィンドウズ形式のパス例、バックスラッシュを含む説明文、
  87. 7:25動的な正規表現を書く場面で役立ちます。
  88. 7:29導入するときは、通常のテンプレートを一括で置き換えるのではなく、バックスラッシュの多い箇所から少しずつ置き換える方法がおすすめです。
  89. 7:38もともと改行やタブとして使っていた表記の意味まで変わってしまうためです。
  90. 7:43確認するときは、表示だけでなく、長さや改行の有無も併せて調べてください。
  91. 7:48最後に、自分のコードの中でバックスラッシュが重なっている箇所を一つ探し、
  92. 7:53書き換えても意味が変わらないかを、長さで確認してみてください。
  93. 7:58お疲れさまでした。
  94. 7:59ストリング・ローは、固定部分のバックスラッシュを保つ関数だと覚えておいてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

String.raw()でバックスラッシュを保った文字列を作る方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、埋め込み値の扱い、正規表現への応用と制約を学べます。

解説記事・サンプルコードを読む：JavaScriptのString.raw()：バックスラッシュを保って文字列を作る →