先生と生徒の会話形式で理解しよう

生徒

「TypeScriptで文字をつなげるとき、変数が多くなるとごちゃごちゃしてしまいます……」

先生

「文字と変数を一緒に書ける方法があります。テンプレート文字列という仕組みです」

生徒

「テンプレート文字列って、普通の文字と何が違うんですか？」

先生

「バッククォートを使うことで、とても読みやすく安全に文字を作れます。基本から見ていきましょう」

1. テンプレート文字列とは？

TypeScriptのテンプレート文字列とは、文字の中に変数や計算結果をそのまま埋め込める書き方です。キーボードの左上あたりにあるバッククォート（`）で文字を囲むことで使えます。

これまでのJavaScriptやTypeScriptでは、文字をつなげるためにプラス記号をたくさん使う必要がありました。しかしテンプレート文字列を使うと、文章を書く感覚でコードが書けるようになります。

パソコンを使ったことがない方でも、「文章の空いているところに名前を入れる」と考えるとイメージしやすいです。

2. 従来の文字列連結との違い

まずは、テンプレート文字列を使わない場合を見てみましょう。文字と変数をつなげるために、プラス記号を使っています。


let name = "太郎";
let message = "こんにちは、" + name + "さん";
console.log(message);

この書き方でも動きますが、変数が増えるとどこが文字でどこが変数なのか分かりにくくなります。特に初心者の方は、引用符の数を間違えてエラーになりやすいです。

そこで登場するのが、TypeScriptとES6で使えるテンプレート文字列です。

テンプレート文字列では、バッククォートで全体を囲み、変数を${ }の中に書きます。この書き方を式の埋め込みと呼びます。


let name = "太郎";
let message = `こんにちは、${name}さん`;
console.log(message);


こんにちは、太郎さん

文字と変数が自然な順番で書けるため、人が読んでも意味がすぐに分かります。文章の中に名前を差し込む感覚なので、初心者にも理解しやすいのが特徴です。

テンプレート文字列の中では、変数だけでなく計算もそのまま書けます。これはTypeScriptだけでなく、ES6以降のJavaScript共通の便利な機能です。


let price = 120;
let count = 3;
let result = `合計金額は${price * count}円です`;
console.log(result);


合計金額は360円です

電卓で計算した結果を文章に書くようなイメージです。別の変数を作らなくても、その場で計算できるため、コードが短くなります。

テンプレート文字列の大きな特徴として、改行をそのまま書ける点があります。通常の文字列では、改行するために特別な記号を書く必要がありました。


let text = `おはようございます
今日は良い天気ですね
TypeScriptを勉強しましょう`;
console.log(text);


おはようございます
今日は良い天気ですね
TypeScriptを勉強しましょう

このように、見た目通りに文字が出力されます。メール文章や説明文を扱うときに、とても役立つ機能です。

テンプレート文字列は便利ですが、いくつか注意点もあります。まず、必ずバッククォートを使う必要があります。シングルクォートやダブルクォートでは動きません。

また、${ }の中には正しい式を書く必要があります。文字を書いてしまうとエラーになります。TypeScriptでは型チェックがあるため、間違いに気づきやすいのが安心ポイントです。

ES6の機能なので、古い実行環境では動かないこともありますが、現在のTypeScript開発では基本的に問題なく使えます。

テンプレート文字列は、画面に表示するメッセージやログ出力で特に活躍します。文章と数字が混ざる場面では、必ず使うと言っても良い機能です。

最初は「文字の中に変数を入れられる便利な書き方」と覚えておくだけで十分です。慣れてくると、コードの読みやすさが大きく変わったことに気づくでしょう。