JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのタグ付きテンプレートリテラルとは？使い方を実例で解説

テンプレートリテラルには、タグ付きテンプレートリテラル（tagged template literal）と呼ばれる応用形があります。タグ付きリテラルは関数定義に似た仕組みで、テンプレートリテラルを自由に解析・加工できるのが大きな特徴です。

通常の関数呼び出しとは異なり、タグ付きリテラルでは括弧 () を使用しません。テンプレートリテラルの直前にタグ関数名を置くだけで呼び出しが行われ、タグ関数の第1引数には文字列リテラルの配列が渡されます。その後、テンプレート内の ${} で埋め込まれた式の評価結果が、残りの引数として順番に渡されていきます。

タグ関数に渡される引数の構成

  • 第1引数：テンプレートを分割した文字列リテラルの配列（strings.raw プロパティを使えば、エスケープ処理前の生文字列にもアクセスできます）
  • 第2引数以降：${} 内に記述した式の評価結果（埋め込み値）

この仕組みを活用すると、HTMLのエスケープ処理、多言語化（i18n）、スタイルの注入など、文字列を安全かつ柔軟に組み立てる処理を実装できます。

JavaScriptでの実装例

以下は、タグ付きテンプレートリテラルをJavaScriptで実装するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptのタグ付きテンプレートリテラル</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、タグ付きテンプレートリテラルを使ってテンプレート文字列がsampleTag()関数に渡されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    // タグ関数：第1引数に文字列の配列、第2引数以降に埋め込み値を受け取る
    function sampleTag(strings, name, age, rollNo) {
        let section;
        if (rollNo > 50) {
            section = "A";
        } else {
            section = "B";
        }
        return `${name} roll no: ${rollNo} age :${age} is in section ${section}`;
    }
    let name = "Rohan",
    age = 16,
    rollNo = 22;
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = sampleTag`${name} aged ${age} and roll no ${rollNo} is new in the school`;
    });
</script>
</body>
</html>

出力結果

コードを実行すると、次のような画面が表示されます。

JavaScriptのタグ付きテンプレートリテラルとは？使い方を実例で解説

「CLICK HERE」ボタンをクリックすると −

JavaScriptのタグ付きテンプレートリテラルとは？使い方を実例で解説

この例では、タグ関数 sampleTag() が文字列リテラルの配列と、name・age・rollNo の3つの埋め込み値を受け取ります。出席番号（rollNo）が50より大きい場合は「A」組、50以下であれば「B」組に振り分けられるロジックになっているため、ボタンをクリックすると「Rohan roll no: 22 age :16 is in section B」という結果が画面に表示されます。

  1. JavaScriptのテンプレート文字列を使ってフォーマット済み文字列を作成する方法

    JavaScriptでは、テンプレート文字列（テンプレートリテラル）を使用することで、変数や式を埋め込んだフォーマット済み文字列を簡単かつ直感的に作成できます。通常のシングルクォートやダブルクォートの代わりに、バッククォート（`）で文字列を囲み、${ } の中に変数名や式を記述するだけで、その評価結果が自動的に文字列へ挿入されます。従来の文字列連結（+ 演算子）と比べると、コードが読みやすくなり、複雑な文字列の組み立てもミスなく行えるのが大きなメリットです。以下は、テンプレート文字列を使ってオブジェクトの値を埋め込んだフォーマット済み文字列を作成するコード例です。サンプルコード<!DOC

  2. JavaScriptでテンプレート文字列をネストする方法

    JavaScriptのES6で導入されたテンプレート文字列（テンプレートリテラル）は、バッククォート（`）で囲むことで文字列の中に変数や式を埋め込める便利な機能です。実は、この${}（プレースホルダー）の中に、さらに別のテンプレート文字列を入れ子（ネスト）として記述することもできます。テンプレート文字列のネストとは${}の中には任意のJavaScript式を書けるため、その中で再度バッククォートを使ったテンプレート文字列を評価することが可能です。これにより、関数呼び出しの引数として動的に生成した文字列を渡すなど、柔軟な文字列組み立てが行えます。コード例以下は、ボタンをクリックすると、ネストされ