JavaScriptでCSS識別子エスケープ！CSS.escape()関数の使い方

JavaScriptでHTML要素のIDやクラス名に特殊文字が含まれている場合、querySelector()などのDOM操作メソッドで直接指定すると予期せぬエラーが発生することがあります。このような問題を解決するためには、CSS.escape()関数を使用してCSSセレクタを適切にエスケープする必要があります。

CSS.escape()関数とは

CSS.escape()は、文字列をCSSセレクタとして安全に使用できるようにエスケープする関数です。特殊文字や予約文字を含む文字列を、CSSセレクタとして有効な形式に変換します。

使用例

// 特殊文字を含むID
const id = "user.name@example.com";

// エスケープなしの場合（エラーが発生する可能性あり）
document.querySelector("#" + id);

// CSS.escape()を使用した安全な方法
document.querySelector("#" + CSS.escape(id));

具体的な変換例

CSS.escape()関数は以下のような変換を行います：

CSS.escape("hello.world") // "hello\.world"
CSS.escape("#headline") // "\#headline"
CSS.escape("123") // "\31 23"
CSS.escape("@user") // "\@user"

ブラウザサポート

CSS.escape()関数は比較的新しいAPI機能ですが、現在では主要なモダンブラウザで広くサポートされています：

• Chrome 49以降

• Firefox 31以降

• Safari 10以降

• Edge 79以降

ポリフィル

古いブラウザをサポートする必要がある場合は、以下のようなポリフィルを使用できます：

if (!window.CSS || !window.CSS.escape) {
  window.CSS = window.CSS || {};
  CSS.escape = function(value) {
    return value.replace(/[\s!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\$&");
  };
}

実践的な使用例

実際のアプリケーションでの使用例を見てみましょう：

// メールアドレスをIDとして使用する場合
const email = "user.name@example.com";
const element = document.querySelector("#" + CSS.escape(email));

// 動的に生成された要素のIDを安全に取得
function getElementByDynamicId(id) {
  return document.querySelector("#" + CSS.escape(id));
}

まとめ

CSS.escape()関数を使用することで、特殊文字を含むセレクタを安全に扱うことができます。これにより、DOMの操作をより堅牢に行うことが可能になります。特に動的なコンテンツを扱う場合や、ユーザー入力に基づいてDOM要素を操作する場合には、必ずCSS.escape()を使用することをお勧めします。

この機能を適切に活用することで、JavaScriptアプリケーションのセレクタ関連のバグを防ぎ、より信頼性の高いコードを書くことができます。