【JavaScript】テンプレートリテラルとは？文字列の扱い方を初心者向けにわかりやすく解説
はじめに
皆さんは、JavaScriptで文字列を結合したり、改行を含めたメッセージを作成したりするときにどのような方法を使っているでしょうか。
多くの方は + 演算子で文字列をつなげたり、特殊文字で改行を表現してみたりと、いろいろな工夫をされているかもしれません。
しかし、より簡潔に書ける方法があります。
それが テンプレートリテラル です。
テンプレートリテラルを使うことで、複数行にわたる文字列や変数の埋め込みがとてもスムーズになります。
本記事では、そんなテンプレートリテラルの使い方や実務での活用例などを細かく紹介していきます。
初心者の方にも理解しやすいよう、丁寧かつ具体的に解説していきますので、ぜひ最後まで読んでみてください。
この記事を読むとわかること
- テンプレートリテラルの基本的な書き方と構文
- 改行や変数埋め込みを活用した文字列操作のポイント
- 実務でどのようなシーンでテンプレートリテラルが役立つか
- タグ付きテンプレートリテラルの概要と活用例
- 従来の文字列操作方法との比較とメリット
- よくある落とし穴や注意点
テンプレートリテラルの基本
テンプレートリテラルとは、バッククォート ( ` ) で囲んだ文字列の記法のことを指します。
ここでは、なぜこの記法が便利なのかを改めて確認していきます。
テンプレートリテラルの記法
テンプレートリテラルは、次のようにバッククォートで囲んで記述します。
const name = "Taro"; const message = `こんにちは、${name}さん！`; console.log(message); // 出力: こんにちは、Taroさん！
"..." や '...' を使う場合と異なり、${変数や式} の部分でJavaScriptの変数や式をそのまま埋め込むことができます。
また、文字列結合のために + を使わなくてよいので、可読性も高まりやすいです。
埋め込み表現の書き方
テンプレートリテラルの中でJavaScriptの値を埋め込むには、${ } を使います。
例えば、数値の計算結果をメッセージに反映するときも簡単です。
const price = 2500; const taxRate = 0.1; const total = `合計金額は、税込みで${price + price * taxRate}円になります。`; console.log(total); // 出力: 合計金額は、税込みで2750円になります。
このように、関数の呼び出しやオブジェクトのプロパティ参照など、さまざまな式を埋め込むことができます。
複数行文字列と特殊文字
テンプレートリテラルは複数行にわたる文字列を簡単に表現できる点も魅力です。
改行を含むメッセージを作成したいときなどは、ぜひ活用してみてください。
複数行文字列
従来の文字列リテラルで改行を入れる場合は、\n といった特殊文字を使う必要がありました。
しかしテンプレートリテラルなら、バッククォートの中でそのまま改行を書けばOKです。
const multilineMessage = `これは1行目 これは2行目 これは3行目`; console.log(multilineMessage);
実行すると、改行がそのまま出力されます。
何かのログやレポートを出力したいときに、とても便利です。
特殊文字の扱い
テンプレートリテラル内であっても、\t や \n といったエスケープシーケンスは使えます。
ただし、テンプレートリテラルでは改行自体が文字列に含まれるため、\n を明示的に書かなくてもいいケースが多いです。
一方で、変数に含まれる文字列が改行やタブを持つ場合などは、テンプレートリテラル側でさらに可読性を高める工夫をするとよいでしょう。
実務での活用シーン
テンプレートリテラルの強みは、文字列の動的な組み立てが簡単にできる という点です。
ここでは、実際の開発プロジェクトや日々のコーディングでの例を考えてみましょう。
動的なHTML生成
フロントエンドの開発では、JavaScriptからHTML要素を生成することがよくあります。
テンプレートリテラルを使うと、複雑なHTML文字列でも作りやすくなります。
const title = "商品一覧"; const items = ["りんご", "みかん", "バナナ"]; const html = ` <div class="container"> <h1>${title}</h1> <ul> ${items.map(item => `<li>${item}</li>`).join('')} </ul> </div> `; document.body.innerHTML = html;
map や join を組み合わせることで、配列の要素をリストに変換するときのコードもシンプルになります。
文字列結合が減り、コードが読みやすくなるはずです。
ログ出力の効率化
サーバーサイドJavaScriptやデバッグ用のコードを書くとき、複数の情報を一度にログへ出力したいシーンがあります。
そんなときにもテンプレートリテラルは便利です。
function logUserAction(userId, action) { console.log(`ユーザーID: ${userId}, 行動: ${action}, 時刻: ${new Date().toLocaleString()}`); } logUserAction(101, "ページ閲覧"); // 出力: ユーザーID: 101, 行動: ページ閲覧, 時刻: 20XX/YY/ZZ HH:mm:ss
このように、変数や日時などをまとめて文字列に埋め込むことができるため、ログを一目で読みやすい形式に仕上げることができます。
タグ付きテンプレートリテラル
テンプレートリテラルの機能の中でも、やや高度な機能として タグ付きテンプレートリテラル があります。
これは文字列や埋め込み式を、指定した関数で加工してから出力したい場合に活用できます。
基本的な使い方
タグ付きテンプレートリテラルを使うときは、テンプレートリテラルの直前に関数名を置きます。
function format(strings, ...values) { // strings: テンプレート中の静的文字列部分が配列として入る // values: ${} の部分が順に入る return strings.map((str, i) => { const val = values[i] !== undefined ? values[i] : ""; // ここで何らかの加工をする場合もある return str + val; }).join(""); } const name = "Hanako"; const age = 29; const result = format`名前: ${name}, 年齢: ${age}`; console.log(result); // 出力: 名前: Hanako, 年齢: 29
上記のように、文字列部分と埋め込み部分をそれぞれ受け取り、自由に加工できるのが特徴です。
文字のエスケープや数値の書式設定などを行うユーティリティ関数を作成すると、より複雑な文字列生成がやりやすくなります。
便利な利用例
実務でタグ付きテンプレートリテラルを使うケースとして、SQLクエリのエスケープ や 国際化対応 (i18n) などがあります。
たとえば、ユーザー入力を含むSQLを組み立てるときは、SQLインジェクションを避けるためにエスケープ処理が欠かせません。
タグ付きテンプレートリテラルを活用すると、テンプレートリテラルに含まれる変数を自動的にエスケープしてくれる仕組みを実装できます。
function safeSQL(strings, ...values) { // values を安全な形に変換 const escaped = values.map(val => { // 仮に "'" を "''" に置き換えるような簡易エスケープを行う return String(val).replace(/'/g, "''"); }); // 置き換え後に結合 return strings.map((str, i) => str + (escaped[i] || "")).join(""); } const userInput = "O'Reilly"; const query = safeSQL`SELECT * FROM books WHERE publisher = '${userInput}'`; console.log(query); // 出力: SELECT * FROM books WHERE publisher = 'O''Reilly'
このように、タグ付きテンプレートリテラルを使うと、文字列生成時に特定のロジックを介在させやすくなります。
文字列操作のベストプラクティス
テンプレートリテラルは便利ですが、闇雲に使えばよいわけではありません。
場面に応じた使い分けや、チームでのコーディング方針を考える必要もあります。
テンプレートリテラルを活用するメリット
テンプレートリテラルの主なメリットとしては、以下のようなものが挙げられます。
コードの可読性 が向上する
変数埋め込みが直感的に書けるため、文字列連結のミスを減らしやすいです。
複数行文字列 を自然に表現できる
HTMLのように行数が多い文字列を扱う場合でも、そのまま改行を含めて記述できます。
タグ付きテンプレートリテラル による高度な加工
SQLやログなど、特定のフォーマットに合わせた文字列生成が柔軟にできます。
デバッグのしやすさ
どこが変数でどこが定数なのかが、コードを見ただけでわかりやすい構造になります。
テンプレートリテラルと従来の文字列操作の比較
従来の文字列操作は、主に + 演算子や String.concat() を用いたアプローチが一般的でした。
テンプレートリテラルを使うことで、以下のような差異が見られます。
記述量の削減
文字列の結合記号 + を多用するよりも、${ } に変数や式を直接書く方がコンパクトです。
エラーの減少
引数の並び順やスペースを入れ忘れるなどのヒューマンエラーを抑制しやすくなります。
可読性の向上
文字列の中に変数がどの位置にどのように埋め込まれているかを、ひと目で把握できます。
一方、短い文字列結合程度なら + でも十分という意見もあります。
最終的には、プロジェクトのコーディング規約や個人の好みに合わせて選択するとよいでしょう。
よくある落とし穴
テンプレートリテラルは便利ですが、いくつか注意点があります。
ここでは、初心者の方が陥りがちな代表的なミスを取り上げます。
バッククォートの入力ミス
テンプレートリテラルを示すバッククォート ( ` ) は、シングルクォート ( ' ) と形が似ています。
慣れないうちはうっかり ' ' や " " を使ってしまい、思ったように埋め込みが動作しないことがあります。
記号をよく確認するクセをつけましょう。
改行コードが混在する場合の注意点
テンプレートリテラルをそのまま複数行で書いた場合、その改行コードが文字列に含まれます。
もし実行環境が異なるOS（Windows、macOS、Linuxなど）だと、改行コードの種類が異なる場合があります。
他の人と共同作業する際は、改行コードに起因する差異を把握しておくことも重要です。
テンプレートリテラルを使うときは、開発環境での改行コードやリントの設定を統一しておくとトラブルを減らしやすいです。
テンプレートリテラルとパフォーマンス
JavaScriptで文字列を扱う際、パフォーマンスが気になるケースがあります。
たとえば、大量の文字列結合や複数の変数を埋め込む場面などです。
大規模プロジェクトでの事例
テンプレートリテラルは、読みやすさ・書きやすさに優れている一方、大量の連結処理や複雑なタグ関数を多用すると、実行速度に多少の影響が出る場合があります。
ただし、多くのケースではテンプレートリテラルによるパフォーマンス問題は目立ちにくいと考えられます。
実務で文字列処理のボトルネックが発生するのは、数万行〜数十万行といった極端なデータ量を取り扱うケースが中心です。
実務で気をつけること
パフォーマンスを意識するなら、以下の点を押さえると安心です。
- 大規模な連結処理を行う場合、ループの中でやたらとテンプレートリテラルを繰り返さない
- 必要に応じて、文字列操作専用のユーティリティ関数を導入する
- タグ付きテンプレートリテラルで重い処理をしすぎない
それでも通常の規模のWebアプリケーションでは、テンプレートリテラルによる利便性の方がメリットが大きいでしょう。
テンプレートリテラルを活用したサンプル例
ここでは、実務でも利用できそうな実例を少しまとめてみます。
実際に使ってみると、テンプレートリテラルの便利さが体感しやすいかもしれません。
// APIレスポンスを解析してユーザー向けのメッセージを作成 function createUserMessage(data) { // data: { userName: string, lastLogin: string, loginCount: number } と仮定 return ` ユーザー情報 ------------ ユーザー名 : ${data.userName} 最終ログイン: ${data.lastLogin} ログイン回数: ${data.loginCount}回 またのアクセスをお待ちしています！ `; } const userData = { userName: "Makoto", lastLogin: "2025-02-15 10:25", loginCount: 42 }; console.log(createUserMessage(userData));
上記のように、ある程度まとまったテキストを生成する場合にも役立つはずです。
改行やスペースが視覚的にもわかりやすいので、他の人がソースコードを読んだときの理解もしやすくなるでしょう。
テンプレートリテラルでは、変数名やオブジェクトのプロパティがひと目で分かるため、バグを見つけやすくなるメリットもあります。
まとめ
テンプレートリテラルを活用すると、JavaScriptの文字列操作はよりスッキリとわかりやすくなります。
従来の + 演算子による結合に比べ、可読性や保守性が向上しやすい点が魅力です。
さらに、タグ付きテンプレートリテラルを使うことで、HTML生成やエスケープ処理など、多岐にわたるシーンに柔軟に対応できます。
初心者の方は、まずはシンプルな埋め込み表現や複数行文字列から試してみるとよいでしょう。
実務では、ログ出力やユーザー向けメッセージ、動的なHTML生成など、テンプレートリテラルの利用シーンがたくさんあります。
今まで複雑になりがちだった文字列生成ロジックが簡潔に書けるようになるかもしれません。
皆さんも、この機会にぜひテンプレートリテラルを使いこなして、開発をさらに効率的に進めてみてはいかがでしょうか。