JavaScriptのバッククォート活用する方法5選！初心者も簡単に使える驚きの方法を紹介！

はじめに
●バッククォートとは
- ○テンプレートリテラルの基本
●バッククォートの使い方
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、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, "&lt;").replace(/>/g, "&gt;");
}

const userInput = "<script>alert('XSS');</script>";
const safeMessage = `こんにちは、${sanitize(userInput)}さん！`;
console.log(safeMessage); // "こんにちは、&lt;script&gt;alert('XSS');&lt;/script&gt;さん！"

●カスタマイズ方法

バッククォートを使って、さまざまなカスタマイズを行うことができます。

例えば、文字列のスタイルを変更する関数を作成することができます。

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>歳ですね。"