はじめに
この記事を読めば、JavaScriptのバッククォートを使った便利なテクニックが身に付きます。
初心者でも簡単に使える方法を5つ紹介し、サンプルコードと共に解説していきます。
●バッククォートとは
○テンプレートリテラルの基本
バッククォート(`)は、JavaScriptでテンプレートリテラルと呼ばれる文字列を扱うための記法です。
シングルクォート(‘)やダブルクォート(“)と同様に文字列を囲む役割を果たしますが、バッククォートを使うことで様々な便利な機能が利用できます。
●バッククォートの使い方
○サンプルコード1:文字列の埋め込み
バッククォートを使って、文字列の中に変数を埋め込むことができます。
この例では、名前と年齢を文字列に埋め込んでいます。
const name = "太郎";
const age = 20;
const message = `こんにちは、${name}さん。あなたは${age}歳ですね。`;
console.log(message); // "こんにちは、太郎さん。あなたは20歳ですね。"
○サンプルコード2:式の評価
バッククォートを使って、式を評価し、その結果を文字列に埋め込むことができます。
この例では、2つの数値を足した結果を文字列に埋め込んでいます。
const num1 = 10;
const num2 = 20;
const sumMessage = `合計は${num1 + num2}です。`;
console.log(sumMessage); // "合計は30です。"
○サンプルコード3:複数行の文字列
バッククォートを使用することで、複数行の文字列を簡単に作成することができます。
この例では、複数行の文字列を定義しています。
const multiline = `これは
複数行の
文字列です。`;
console.log(multiline);
// 出力:
// これは
// 複数行の
// 文字列です。
○サンプルコード4:タグ付きテンプレートリテラル
タグ付きテンプレートリテラルを使用することで、テンプレートリテラルを関数に渡して、カスタマイズされた文字列を作成できます。
この例では、入力された文字列を大文字に変換する関数を作成しています。
function upper(strings, ...values) {
return strings.map((str, i) => str + (values[i] || "").toUpperCase()).join("");
}
const name = "太郎";
const greeting = upper`こんにちは、${name}さん!`;
console.log(greeting); // "こんにちは、太郎さん!"
○サンプルコード5:関数内でのバッククォート
関数内でバッククォートを使用して、動的に文字列を作成することができます。
この例では、引数に応じて異なるメッセージを返す関数を作成しています。
function createMessage(name, age) {
return `こんにちは、${name}さん。あなたは${age}歳ですね。`;
}
console.log(createMessage("太郎", 20)); // "こんにちは、太郎さん。あなたは20歳ですね。"
●注意点と対処法
バッククォートを使用する際には、次の注意点があります。
- エスケープシーケンスの扱い
バッククォート内では、\
を使用してエスケープシーケンスを表現できますが、バッククォート自体をエスケープする際には注意が必要です。
const escapedString = `これはバックスラッシュを含む文字列です: \\。そしてこれはバッククォートです: \`。`;
console.log(escapedString);
// "これはバックスラッシュを含む文字列です: \。そしてこれはバッククォートです: `。"
- セキュリティ上の懸念
バッククォートを使ってユーザー入力を文字列に埋め込む場合、クロスサイトスクリプティング(XSS)などの脆弱性が発生することがあります。
ユーザー入力をサニタイズすることで、この問題を軽減できます。
function sanitize(str) {
return str.replace(/</g, "<").replace(/>/g, ">");
}
const userInput = "<script>alert('XSS');</script>";
const safeMessage = `こんにちは、${sanitize(userInput)}さん!`;
console.log(safeMessage); // "こんにちは、<script>alert('XSS');</script>さん!"
●カスタマイズ方法
バッククォートを使って、さまざまなカスタマイズを行うことができます。
例えば、文字列のスタイルを変更する関数を作成することができます。
function styled(strings, ...values) {
return strings
.map((str, i) => str + `<span style="color: red;">${values[i] || ""}</span>`)
.join("");
}
const name = "太郎";
const age = 20;
const styledMessage = styled`こんにちは、${name}さん。あなたは${age}歳ですね。`;
console.log(styledMessage);
// "こんにちは、<span style="color: red;">太郎</span>さん。あなたは<span style="color: red;">20</span>歳ですね。"
まとめ
この記事では、JavaScriptのバッククォートについて徹底解説しました。
バッククォートを使うことで、文字列の埋め込みや式の評価、複数行の文字列やタグ付きテンプレートリテラルなどの機能が利用できます。
注意点や対処法、カスタマイズ方法も紹介しましたので、ぜひ参考にしてください。