JavaScript：テンプレートリテラルを１分で完全解説

テンプレートリテラル（別名：テンプレート文字列）は、 ECMAScript6から新しく使えるようになった構文で文字列の中に変数や定数を埋め込むことができる便利な仕組みです。

テンプレートリテラルを使用すると、文字列内に変数や式を ${} の中に記述することで直接挿入できます。例えば、以下のコードでは、name と age という変数をテンプレートリテラル内で使用しています。

let name = "山田";
let age = 30;
let greeting = `こんにちは、${name}さん。あなたの年齢は${age}歳です。`;
console.log(greeting);
// 出力: こんにちは、山田さん。あなたの年齢は30歳です。

参考　let（変数宣言）の基本

このページではJavascriptにおけるテンプレートリテラル（テンプレート文字列）の使い方を初心者向けに１からわかりやすく解説します。Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　【JavaScript入門】基本文法/基礎文法を5分で

テンプレートリテラル（テンプレート文字列）とは

テンプレートリテラル（テンプレート文字列）は、JavaScriptで使える特別な文字列の作り方で、普通の文字列と違って、文字列の中に変数や計算結果を埋め込んだりすることができます。

プログラミングをしていると、文字列の中に変数の内容や計算結果を入れたいことがよくあります。テンプレートリテラルを使うと、その作業がすごく簡単になります。バックティック（`）で囲んだ文字列の中に、${}を使って変数名や計算式を書くだけです。

例えば、こんな感じ。

let 名前 = "太郎";
let メッセージ = `こんにちは、${名前}さん！`;
console.log(メッセージ);  

// 出力: こんにちは、太郎さん！

通常の文字列では改行するときに\nを使いますが、テンプレートリテラルではそのまま改行できます。バックティックで囲んだ中で改行すると、その改行が文字列の中にも反映されます。

例えば、こんな風に使います。

let お知らせ = `明日は
お休みです。`;
console.log(お知らせ);

// 出力:
// 明日は
// お休みです。

テンプレートリテラルは文字列を扱うときの手間を大幅に減らしてくれます。変数の値を文字列に入れたり、改行したりするのが簡単になるため、コードが読みやすく、書きやすくなります。初心者の方でも、この機能を覚えると、プログラミングがぐっと楽になります。

ここからはより実践的にテンプレートリテラルの使い方を学んでいきましょう。

テンプレートリテラル（テンプレート文字列）の使い方

テンプレートリテラルの使い方は非常に簡単です。

これまで文字列を「””（ダブルクォーテーション）」もしくは「''（シングルクォーテーション）」で囲んきましたが、テンプレートリテラルでは「``（バックティック）」にするだけです。

console.log(`テンプレートリテラル`) //  `（バックコート）で囲むだけ！

構文は全く難しくありませんので、早速ここからはテンプレートリテラルでできることを見てきましょう。

テンプレートリテラルで「改行」

テンプレートリテラルでの改行はシンプルで便利な機能。普通に文章を書くとき、改行したいところでエンターキーを押すだけで、次の行に移れますよね？ テンプレートリテラルでも、まさにその通りに動作します。普通の文字列を使っているときは、改行したい場所に \n という特別なコード（エスケープ文字）を入れないといけませんでした。でも、テンプレートリテラルを使うと、この\nが不要になります。

たとえば、あなたが「おはよう」と「こんにちは」を改行して書きたいとしましょう。

テンプレートリテラルを使えば、次のように書けます。

let お知らせ = `明日は
お休みです。`;
console.log(お知らせ);

// 出力:
// 明日は
// お休みです。

See the Pen テンプレートリテラル　改行\ by ビズドットオンライン (@BizOnline) on CodePen.

テンプレートリテラルで変数の値を文字列に埋め込む

バックティック（`）で囲んだテンプレートリテラル内で、${}を用いて変数を参照します。

See the Pen テンプレートリテラル―＄変数 by ビズドットオンライン (@BizOnline) on CodePen.

これまでは「+」記号をうまく使って文字列をマニュアルで結合していました。これ結構面倒でしたね。

See the Pen テンプレートリテラルがない場合 by ビズドットオンライン (@BizOnline) on CodePen.

今後は、テンプレートリテラルを利用して変数は直接文字列の中に埋め込むのが主流になっていくはずです。

テンプレートリテラルで式の埋め込み

変数だけではなく、${式}を文字列に埋め込むことも可能です。

See the Pen テンプレートリテラル　式 by ビズドットオンライン (@BizOnline) on CodePen.

// 変数の定義
let name = "山田";
let age = 25;
let hobby = "写真撮影";

// テンプレートリテラルを使用した文字列の生成
let introduction = `私の名前は${name}です。年齢は${age}歳で、趣味は${hobby}です。`;

console.log(introduction);
// 出力: 私の名前は山田です。年齢は25歳で、趣味は写真撮影です。