テンプレートリテラル（Template Literal）

JavaScriptでよく「バッククォート（`、grave accent）」と呼ばれるテンプレートリテラルを使って、文字列を操作する方法を紹介します。複数行の文字列、変数や式の埋め込み、動的なURL生成など、さまざまな使い方を具体的な例とともに解説します。テンプレートリテラルを効果的に活用できるように丁寧に説明していきます。

テンプレートリテラルの使い方

テンプレートリテラル（Template literals）は、ES6（ES2015）で導入されたJavaScriptの新しい文字列リテラルの記法で、文字列をより便利に記述・操作できるように設計されています。従来のシングルクォート（'）やダブルクォート（"）の代わりにバッククォート（`）で文字列を囲むのが主な特徴で、通常の文字列と異なり複数行にわたって記述できるほか変数や式を埋め込むこともできるため、文字列の操作をより柔軟かつ効率的に行うことができます。

テンプレートリテラルが提供する主な機能は以下のとおりです。

  1. 複数行文字列（Multi-line strings）
  2. 式の埋め込み（Expression interpolation）

複数行文字列（Multi-line strings）

テンプレートリテラルを使うと、複数行にわたって文字列を記述できます。追加の改行文字やエスケープ文字を使用する必要はありません。

JavaScriptの従来の文字列方式 従来の文字列方式による複数行文字列の生成例です 
// 従来の方法で複数行文字列を作成
const multilineString = "1行目\n" +
  "2行目\n" +
  "3行目";
console.log(multilineString);
// 出力:
// "1行目"
// "2行目"
// "3行目"

上記のコードでは、バックスラッシュと改行文字（\n）を使って各行をつなげています。この方法は、文字列を複数行にわたって記述する際に追加の処理が必要となるため、不便さがあります。

一方、テンプレートリテラルを使って複数行文字列を作成する場合は、バッククォート（`）を使用して簡単に記述できます。以下はテンプレートリテラルで複数行文字列を生成する例です。

JavaScriptのテンプレートリテラル方式 テンプレートリテラルを使った複数行文字列の生成例です 
// テンプレートリテラルを使った複数行文字列の作成
const multilineString = `1行目
2行目
3行目`;
console.log(multilineString);
// 出力:
// "1行目"
// "2行目"
// "3行目"

テンプレートリテラルを使うと、改行のために追加の処理をする必要がなく、簡単に複数行文字列を作成できます。複数行を記述する際の可読性が向上し、コードの記述も便利になります。したがって、テンプレートリテラルは複数行文字列を作成するための手軽な方法を提供し、従来のJavaScriptよりも文字列操作がより便利になります。

式の埋め込み（Expression interpolation）

テンプレートリテラルには式を埋め込むことができます。式を埋め込むには、$記号を使い、式を波括弧で囲みます。例えば、以下のコードはname変数の値をテンプレートリテラルに挿入しています。

テンプレートリテラルに埋め込める式は以下の通りです。

  • 変数
  • 演算子
  • 関数呼び出し
  • オブジェクトのプロパティ
  • 配列の要素

変数を式に埋め込む

JavaScriptの従来の文字列方式 従来の文字列方式による変数と文字列の結合 
let name = "山田 太郎";
const message = "ようこそ、" + name + " さん";

console.log(message);
// 出力: "ようこそ、山田 太郎 さん"
JavaScriptのテンプレートリテラル方式 リテラル文字列内に変数を${expression}の形式で式として埋め込みます 
let name = "山田 太郎";
const message = `ようこそ、${name} さん!`;

console.log(message);
// 出力: "ようこそ、山田 太郎 さん!"

演算子を式に埋め込む

JavaScriptのテンプレートリテラル方式 リテラル文字列内に演算子を${expression}の形式で式として埋め込みます 
const x = 10;
const y = 5;
const result = `${x} + ${y} = ${x + y}`;
console.log(result);
// 出力: 10 + 5 = 15

関数呼び出しを式に埋め込む

JavaScriptのテンプレートリテラル方式 リテラル文字列内に関数呼び出しを${expression}の形式で式として埋め込みます 
function greet(name) {
    return `こんにちは、${name} さん!`;
}

const userName = "ジョン";
const message = `挨拶メッセージ: ${greet(userName)}`;

console.log(message);
// 出力: "挨拶メッセージ: こんにちは、ジョン さん!"

オブジェクトのプロパティを式に埋め込む

JavaScriptのテンプレートリテラル方式 リテラル文字列内にオブジェクトのプロパティを${expression}の形式で式として埋め込みます 
const person = {
    name: "ジョン",
    age: 30,
    greet() {
        return `こんにちは、私は${this.name}で、年齢は${this.age}歳です。`;
    }
};

const greeting = person.greet();
console.log(greeting);
// 出力: "こんにちは、私はジョンで、年齢は30歳です。"

配列の要素を式に埋め込む

JavaScriptのテンプレートリテラル方式 リテラル文字列内に配列の要素を${expression}の形式で式として埋め込みます 
const fruits = ["りんご", "バナナ", "オレンジ"];
const message = `私の好きな果物は${fruits[0]}、${fruits[1]}、${fruits[2]}です。`;
console.log(message);
// 出力: "私の好きな果物はりんご、バナナ、オレンジです。"

テンプレートリテラルは式を埋め込める便利な機能です。これにより、JavaScriptのコードをより簡潔で読みやすくできます。

テンプレートリテラルの実践例

テンプレートリテラルをいくつかの実践例を通して扱ってみましょう。

  1. 動的なURL生成の例コード
  2. HTMLテンプレート生成の例コード
  3. HTMLログメッセージのフォーマット例コード

動的なURL生成の例コード

JavaScript 
const baseURL = "https://api.example.com";

// 1. 基本的なURLのテンプレートリテラルの使用
const endpoint1 = `${baseURL}/users`;
console.log(endpoint1); // 出力: "https://api.example.com/users"

// 2. URLに変数を埋め込む
const userId = 123;
const endpoint2 = `${baseURL}/users/${userId}`;
console.log(endpoint2); // 出力: "https://api.example.com/users/123"

// 3. URLパラメータの取り扱い
const userId = 123;
const postId = 456;
const endpoint3 = `${baseURL}/users/${userId}/posts/${postId}`;
console.log(endpoint3); // 出力: "https://api.example.com/users/123/posts/456"

// 4. クエリ文字列の生成
const params = {
    category: "books",
    limit: 10,
    sort: "desc"
};
const queryString = Object.entries(params)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join("&");
const endpoint4 = `${baseURL}/search?${queryString}`;
console.log(endpoint4); // 出力: "https://api.example.com/search?category=books&limit=10&sort=desc"

上記の例コードでは、さまざまな動的なURL生成の方法を扱っています。基本的なURLのテンプレートリテラルの使用から、URLへの変数の埋め込み、URLパラメータの取り扱い、クエリ文字列の生成まで、多様なケースを含んでいます。

実際には baseURL や変数の値、パラメーター、クエリ文字列などは、該当するプロジェクトや API に合わせて変更する必要があります。しかし、上記の例を参考にすることで、動的な URL 生成の概念と方法を理解し、活用できるようになるでしょう。

HTMLテンプレート生成の例コード

JavaScript 
// 1. 基本的な HTML テンプレートリテラルの使用
const title = "Welcome!";
const content = "Hello, world!";
const htmlTemplate1 = `
    <div class="container">
        <h1>${title}</h1>
        <p>${content}</p>
    </div>
`;

console.log(htmlTemplate1);

// 2. 動的なデータの挿入
const user = {
    name: "John",
    age: 30,
    email: "john@example.com"
};
const htmlTemplate2 = `
    <div class="user-profile">
        <h2>${user.name}</h2>
        <p>Age: ${user.age}</p>
        <p>Email: ${user.email}</p>
    </div>
`;

console.log(htmlTemplate2);

// 3. 繰り返し処理を活用したリスト生成
const todos = [
    {id: 1, title: "Buy groceries"},
    {id: 2, title: "Do laundry"},
    {id: 3, title: "Clean the house"}
];
const todoList = `
    <ul>
        ${todos.map(todo => `<li>${todo.title}</li>`).join("")}
    </ul>
`;
console.log(todoList);

// 4. 条件文を活用した動的な HTML 生成
const isAuthenticated = true;
const loginMessage = `
    ${isAuthenticated ? `<p>Welcome back, ${user.name}!</p>` : `<p>Please log in.</p>`}
`;

console.log(loginMessage);

上記のサンプルコードでは、さまざまな方法で HTML テンプレートの生成を扱っています。基本的な HTML テンプレートリテラルの使用から、動的なデータの挿入、繰り返し処理を用いたリスト生成、条件文を活用した動的な HTML 生成まで、幅広いケースを含んでいます。

実際には変数の値やデータ、繰り返し処理を適用する対象などは、該当するプロジェクトや状況に合わせて変更する必要があります。しかし、上記の例を参考にすることで、HTML テンプレート生成の概念と方法を理解し、活用できるようになるでしょう。

HTMLログメッセージのフォーマット例コード

JavaScript 
// 1. 基本的なログメッセージのテンプレートリテラル使用
const message1 = "Something happened";
console.log(`[INFO] ${message1}`);

// 2. ログレベルとタイムスタンプの追加
function formatLog(level, message) {
    const timestamp = new Date().toLocaleString();
    return `[${level}] ${timestamp} - ${message}`;
}

const message2 = "An error occurred";
console.log(formatLog("ERROR", message2));

// 3. 動的なデータの挿入
function formatLog(level, message, data) {
    const timestamp = new Date().toLocaleString();
    return `[${level}] ${timestamp} - ${message} - ${JSON.stringify(data)}`;
}

const user = {id: 123, name: "John"};
console.log(formatLog("DEBUG", "User logged in", user));

上記のサンプルコードでは、さまざまな方法でログメッセージのフォーマットを扱っています。基本的なログメッセージのテンプレートリテラル使用から、ログレベルやタイムスタンプの追加、動的なデータの挿入まで、幅広いケースを含んでいます。

実際にはログメッセージやログレベル、タイムスタンプなどは、該当するプロジェクトや状況に応じて変更する必要があります。例を参考にすることで、ログメッセージのフォーマットに関する概念と方法を理解し、望む形式でログメッセージを構成できるようになるでしょう。

仕様書

JavaScriptテンプレートリテラルの仕様書
仕様書
Template literals ECMAScript Language Specification
#sec-template-literals

ブラウザ互換性

JavaScriptテンプレートリテラルのブラウザ対応状況
Syntax
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
Template literals 41 12 34 9

caniuse.comで詳しい情報をご確認ください。

参考資料