JavaScriptバッククォート活用法5選!初心者も簡単に使える!

JavaScriptバッククォートを使った便利なテクニックを紹介 JS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスはSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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歳ですね。"

●注意点と対処法

バッククォートを使用する際には、次の注意点があります。

  1. エスケープシーケンスの扱い

    バッククォート内では、\を使用してエスケープシーケンスを表現できますが、バッククォート自体をエスケープする際には注意が必要です。
const escapedString = `これはバックスラッシュを含む文字列です: \\。そしてこれはバッククォートです: \`。`;
console.log(escapedString);
// "これはバックスラッシュを含む文字列です: \。そしてこれはバッククォートです: `。"
  1. セキュリティ上の懸念

    バッククォートを使ってユーザー入力を文字列に埋め込む場合、クロスサイトスクリプティング(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>歳ですね。"

まとめ

この記事では、JavaScriptのバッククォートについて徹底解説しました。

バッククォートを使うことで、文字列の埋め込みや式の評価、複数行の文字列やタグ付きテンプレートリテラルなどの機能が利用できます。

注意点や対処法、カスタマイズ方法も紹介しましたので、ぜひ参考にしてください。