JavaScriptにおけるテンプレートリテラルの使い方10選

はじめに
●テンプレートリテラルとは
●テンプレートリテラルの基本的な使い方
- ○サンプルコード1：変数を含む文字列の作成
- ○サンプルコード2：複数行の文字列の作成
●テンプレートリテラルの注意点と対処法
●テンプレートリテラルのカスタマイズ方法
- ○サンプルコード3：タグ付きテンプレートリテラル
●テンプレートリテラルの応用例
●テンプレートリテラルの注意点と対処法
まとめ

はじめに

JavaScriptにおいて、文字列操作を劇的に簡素化する機能として注目を集めているのが、テンプレートリテラルです。

本記事では、テンプレートリテラルの基本的な利用方法から、注意すべきポイント、カスタマイズの手法、そして実践的な10の応用例まで、丁寧に解説していきます。

初心者の方々にも理解しやすいよう、具体例を交えながら説明していきますので、ぜひ最後までお付き合いください。

●テンプレートリテラルとは

テンプレートリテラルとは、JavaScriptにおける文字列リテラルの新しい形式で、バッククォート(“)で囲まれた文字列を表現します。

従来の文字列表現方法と比較して、テンプレートリテラルには、変数や式を直接埋め込める、複数行の文字列を簡単に作成できるといった特徴があります。

結果として、コードの可読性が大幅に向上し、文字列操作が格段に容易になりました。

テンプレートリテラルを活用することで、開発者はより直感的で効率的なコーディングが可能となります。

●テンプレートリテラルの基本的な使い方

テンプレートリテラルの基本的な使い方を、具体的な例を用いて説明していきます。

ここでは、変数を含む文字列の作成と、複数行の文字列の作成という2つの基本的なケースを見ていきましょう。

○サンプルコード1：変数を含む文字列の作成

テンプレートリテラルを使用すると、変数を含む文字列を非常にシンプルに作成できます。

従来の方法では、文字列の連結が必要でしたが、テンプレートリテラルでは${変数名}という形式で直接変数を埋め込むことができます。

次のコードは、テンプレートリテラルを使って変数を含む文字列を作成する例です。

const name = 'Taro';
const message = `Hello, ${name}!`;
console.log(message); // "Hello, Taro!"

このように、テンプレートリテラルを使用すると、コードがより直感的で読みやすくなります。

変数nameの値が直接文字列に埋め込まれているのが分かりますね。

○サンプルコード2：複数行の文字列の作成

テンプレートリテラルのもう一つの大きな利点は、複数行の文字列を簡単に作成できることです。

従来の方法では、改行文字を明示的に挿入する必要がありましたが、テンプレートリテラルでは、そのまま改行を含めることができます。

次のコードは、複数行の文字列をテンプレートリテラルで作成する例です。

const message = `This is a
multiline
string!`;
console.log(message);
// "This is a
// multiline
// string!"

このように、テンプレートリテラルを使用すると、複数行の文字列を直感的に記述できます。

特に、HTMLのテンプレートを作成する際などに、この機能は非常に便利です。

●テンプレートリテラルの注意点と対処法

テンプレートリテラルは非常に便利な機能ですが、使用する際にはいくつかの注意点があります。

特に、バッククォートの扱いには注意が必要です。

テンプレートリテラル内でバッククォートを使用したい場合、エスケープ処理が必要となります。

次のコードは、バッククォートをエスケープする例です。

const message = `This string contains a backquote: \``;
console.log(message); // "This string contains a backquote: `"

このように、バックスラッシュ()を使ってバッククォートをエスケープすることで、テンプレートリテラル内でバッククォートを表現できます。

●テンプレートリテラルのカスタマイズ方法

テンプレートリテラルの機能をさらに拡張するには、タグ付きテンプレートリテラルを使用します。

タグ付きテンプレートリテラルを使用すると、テンプレートリテラルの処理を独自の関数でカスタマイズできます。

○サンプルコード3：タグ付きテンプレートリテラル

タグ付きテンプレートリテラルを使用すると、テンプレートリテラルの処理をカスタマイズできます。

例えば、埋め込まれた変数の値を大文字に変換するといった処理が可能です。

次のコードは、タグ付きテンプレートリテラルを使用して、埋め込まれた変数の値を大文字に変換する例です。

function toUpperCase(strings, ...values) {
  let result = '';
  for (let i = 0, cLen = strings.length; i < cLen; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i].toUpperCase();
    }
  }
  return result;
}

const name = 'Taro';
const message = toUpperCase`Hello, ${name}!`;
console.log(message); // "Hello, TARO!"

このように、タグ付きテンプレートリテラルを使用することで、テンプレートリテラルの処理を自由にカスタマイズすることができます。

●テンプレートリテラルの応用例

テンプレートリテラルの基本的な使い方を理解したところで、より実践的な応用例を見ていきましょう。

ここでは、条件付き文字列の結合、HTMLの生成、ループ処理、関数内での使用、オブジェクトリテラル内での使用、数式の評価、正規表現の作成という7つの応用例を紹介します。

○サンプルコード4：条件付き文字列の結合

テンプレートリテラルを使用すると、条件に応じて異なる文字列を簡単に結合できます。

三項演算子と組み合わせることで、コードがより簡潔になります。

次のコードは、条件に応じて挨拶の文字列を変更する例です。

const isMorning = true;
const greeting = `Good ${isMorning ? 'morning' : 'evening'}!`;
console.log(greeting); // "Good morning!"

このように、テンプレートリテラル内で三項演算子を使用することで、条件分岐を簡潔に表現できます。

○サンプルコード5：HTMLの生成

テンプレートリテラルは、HTMLコードの生成にも非常に適しています。

特に、動的にHTMLを生成する場合に威力を発揮します。

次のコードは、配列からHTMLのリストを生成する例です。

function createList(items) {
  return `<ul>
${items.map(item => `  <li>${item}</li>`).join('\n')}
</ul>`;
}

const items = ['apple', 'banana', 'orange'];
const list = createList(items);
console.log(list);
// "<ul>
//   <li>apple</li>
//   <li>banana</li>
//   <li>orange</li>
// </ul>"

このように、テンプレートリテラルを使用することで、動的なHTMLの生成が非常に簡単になります。

○サンプルコード6：テンプレートリテラルを使ったループ

テンプレートリテラルは、ループ処理と組み合わせることで、反復的な文字列の生成にも活用できます。

次のコードは、指定された文字列を指定回数繰り返す例です。

function repeatString(str, n) {
  return `${str.repeat(n)}`;
}

const result = repeatString('abc', 3);
console.log(result); // "abcabcabc"

このように、repeatメソッドとテンプレートリテラルを組み合わせることで、簡潔にループ処理を表現できます。

○サンプルコード7：関数内でのテンプレートリテラルの使用

テンプレートリテラルは、関数の引数や戻り値としても使用できます。

これにより、動的な文字列生成を関数内で簡単に行うことができます。

次のコードは、名前と年齢を受け取って挨拶のメッセージを生成する関数の例です。

function createGreeting(name, age) {
  return `Hello, ${name}! You are ${age} years old.`;
}

const name = 'Taro';
const age = 25;
const greeting = createGreeting(name, age);
console.log(greeting); // "Hello, Taro! You are 25 years old."

このように、関数内でテンプレートリテラルを使用することで、動的なメッセージ生成が簡単に行えます。

○サンプルコード8：オブジェクトリテラル内でのテンプレートリテラルの使用

テンプレートリテラルは、オブジェクトリテラルのプロパティ値としても使用できます。

これで、オブジェクト内で動的な文字列生成が可能になります。

次のコードは、personオブジェクトのintroduceメソッドで自己紹介メッセージを生成する例です。

const person = {
  name: 'Taro',
  age: 25,
  introduce() {
    return `Hello! My name is ${this.name} and I am ${this.age} years old.`;
  },
};

console.log(person.introduce());
// "Hello! My name is Taro and I am 25 years old."

このように、オブジェクトのメソッド内でテンプレートリテラルを使用することで、オブジェクトのプロパティを簡単に文字列に組み込むことができます。

○サンプルコード9：テンプレートリテラルを使った数式の評価

テンプレートリテラル内では、数式を直接評価することができます。

これで、動的な計算結果を文字列に組み込むことが可能になります。

次のコードは、テンプレートリテラル内で足し算を行う例です。

const a = 5;
const b = 7;
const sum = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(sum);
// "The sum of 5 and 7 is 12."

このように、テンプレートリテラル内で直接数式を評価することができ、計算結果を文字列に組み込むことができます。

○サンプルコード10：テンプレートリテラルを使った正規表現

テンプレートリテラルは、動的な正規表現の作成にも活用できます。

これで、実行時に正規表現のパターンを動的に生成することが可能になります。

次のコードは、テンプレートリテラルを使って動的に正規表現を作成し、文字列の検索に使用する例です。

const searchWord = 'apple';
const regex = new RegExp(`\\b${searchWord}\\b`, 'gi');
const text = 'I love apples. Apples are delicious.';

const result = text.match(regex);
console.log(result);
// ["apple", "Apples"]

このように、テンプレートリテラルを使用することで、動的な正規表現の生成が可能になり、柔軟な文字列検索を行うことができます。