JavaScriptの「生」に触れる：`String.raw()` でエスケープ地獄を回避する技術
フロントエンドの現場で、バックエンドから返ってきたパス文字列や、正規表現を動的に生成するコードに頭を抱えた経験はないだろうか？
「あれ、なんでバックスラッシュが消えてるんだ？」
「ログに出すと改行コードが勝手に解釈されてレイアウトが崩れる……」
そう、JavaScriptの文字列リテラルは、デフォルトで`\n`（改行）や`\t`（タブ）、そして`\uXXXX`（Unicode）といったエスケープシーケンスを律儀に解釈してしまう。これが便利である反面、パス文字列や生のデータを取り扱うときには、この「親切心」が仇となる。
そんなとき、我々プロが迷わず使う武器が `String.raw()` だ。今日はこの「文字列の加工を一切許さない」孤高のタグ付きテンプレートについて、現場視点で深く掘り下げていく。
—
1. なぜ `String.raw()` なのか？ブラウザの裏側を覗く
まず、JavaScriptのエンジンが文字列をどう見ているかを知る必要がある。通常、テンプレートリテラルでバックスラッシュを書き込むと、エンジンは「これはエスケープの始まりだな」と解析し、即座に変換を試みる。
しかし、`String.raw` はタグ付きテンプレート関数として定義されており、その第一引数には「生の文字列の断片（raw strings）」が渡される。これはブラウザが解釈を試みる前の、ソースコードに書かれたままの「生データ」だ。
// 普通のテンプレートリテラル
const normal = `C:\\Users\\admin\\docs`;
console.log(normal);
// 出力: “C:\Users\admin\docs”
// ※バックスラッシュがパス区切りとして解釈される(環境によっては警告が出ることも)
// String.raw を使った場合
const raw = String.raw`C:\Users\admin\docs`;
console.log(raw);
// 出力: “C:\Users\admin\docs”
// ※バックスラッシュはただの文字としてそのまま保持される
この「解釈させない」という仕様が、特にWindowsのファイルパスや、正規表現のパターン構築において絶大な威力を発揮する。
—
2. 実務での活用シーン：正規表現の「二重エスケープ」にサヨナラを
中級者のエンジニアが一度は苦しむのが、正規表現内でのバックスラッシュの多重管理だ。`new RegExp()` に文字列を渡す際、バックスラッシュをエスケープするためにさらにバックスラッシュを重ねる……という不毛な作業をしたことはないだろうか？
`String.raw` を使えば、脳内の混乱を最小限に抑えられる。
/
- 現場でよくある、特定のディレクトリ配下のファイルパスを抽出する正規表現
- String.raw を使えば、「バックスラッシュをエスケープするためのバックスラッシュ」が不要になる
/
const targetDir = “src/components”;
const regex = new RegExp(String.raw`^${targetDir}\\.\.tsx$`);
console.log(regex);
// 出力: /^src\/components\\.\.tsx$/
// これでコードの可読性が格段に向上する
このように、テンプレートリテラルの補間（`${}`）と `String.raw` を組み合わせることで、動的にパスやパターンを生成する際も、記述を極めてクリーンに保てるのだ。
—
3. 注意点：タグ付きテンプレート以外の使い方は少し特殊
注意してほしいのは、`String.raw` は通常の関数として呼び出すこともできるが、その際の引数の渡し方は少し特殊だということだ。
// 第一引数に「生の文字列の断片を持つオブジェクト(rawプロパティ)」を渡す必要がある
// 現場でわざわざ関数として呼ぶことは稀だが、仕様の理解として持っておこう
const manual = String.raw({ raw: [“Hello”, “World”] }, ” “);
console.log(manual); // 出力: “Hello World”
基本的には、`String.raw` は `String.raw` + “ `テンプレートリテラル` “ という形で使うのがベストプラクティスだ。これ以外の呼び出し方は、コードの意図が不明瞭になりやすく、チーム開発では避けるべきだ。
—
4. シニアアーキテクトからのアドバイス
実務でコードレビューをしていると、「とりあえず何でも `String.raw` に入れておけば安全」という勘違いをしているケースを見かける。しかし、`String.raw` は魔法の杖ではない。
- HTMLの自動エスケープはしてくれない:
XSS対策として使うものではない。もしユーザー入力を扱うなら、必ずライブラリ等によるサニタイズを優先すること。
- 用途を限定する:
「バックスラッシュをそのまま扱いたい」「改行コードが邪魔をする」といった、明確な技術的課題があるときだけ引き出しから出すこと。無闇矢鱈に使うと、逆にコードの意図が読み取りづらくなる。
まとめ
- `String.raw` はJavaScriptの「親切心（エスケープ解釈）」を無効化するツールである。
- ファイルパス、正規表現、改行を含む文字列の定義で絶大な力を発揮する。
- テンプレートリテラルと組み合わせることで、コードの見た目とメンテ性が劇的に向上する。
JavaScriptの泥臭い仕様と仲良くなることは、より堅牢で美しいフロントエンドを構築するための第一歩だ。皆さんのコードから無駄なエスケープの嵐が消え去ることを祈っている。
何かあれば、またいつでも相談してくれ。技術の深淵はまだまだ先にあるぞ。
コメント