JavaScript

文字列がこんなに簡単に！JavaScriptテンプレートリテラルの使い方

JavaScriptのテンプレートリテラル（バッククォート）を初心者向けに完全解説。従来の文字列連結との違いから実践的な活用方法まで、わかりやすいサンプルで学べます。

Learning Next 運営
約 18 分で読めます
JavaScriptテンプレートリテラル文字列バッククォートES6初心者

みなさん、文字列を作るときに困ったことはありませんか？

「変数を文字列に入れるのが面倒」「改行がうまくいかない」「+記号がたくさんで読みにくい」

こんな悩みは、JavaScriptを書いているとよくあることですよね。 実は、ES6で追加されたテンプレートリテラルを使うことで、これらの問題がすべて解決できるんです。

この記事では、テンプレートリテラルの基本的な使い方から実践的な活用例まで初心者向けに分かりやすく解説します。 従来の文字列作成との違いも含めて、一緒に学んでいきましょう！

テンプレートリテラルって何？基本を知ろう

新しい文字列の書き方

テンプレートリテラルとは、バッククォート（`）で囲んで書く新しい文字列の記法です。

簡単に言うと、「変数を簡単に文字列に埋め込める便利な機能」なんです。 従来のシングルクォート（'）やダブルクォート（"）よりも、ずっと使いやすくなっています。

// 従来の方法
let message = "Hello, World!";


// テンプレートリテラル
let templateMessage = `Hello, World!`;


console.log(templateMessage); // Hello, World!

見た目はほとんど同じですが、バッククォートを使うことで特別な機能が使えるようになります。

どこにバッククォートがあるの？

バッククォート（`）は、キーボードの左上、数字の1の左隣にあります。

// このマークです → `
let example = `これがテンプレートリテラルです`;

シフトキーを押しながら押すと、チルダ（~）になるので注意してくださいね。

変数を簡単に埋め込もう

基本的な変数の埋め込み

テンプレートリテラルの最大の特徴は、${変数名}で変数を直接埋め込めることです。

let name = "田中";
let age = 25;


// 従来の方法（面倒で読みにくい）
let introduction1 = "私の名前は" + name + "です。年齢は" + age + "歳です。";


// テンプレートリテラル（簡潔で読みやすい）
let introduction2 = `私の名前は${name}です。年齢は${age}歳です。`;


console.log(introduction2); // 私の名前は田中です。年齢は25歳です。

${}の中に変数名を書くだけで、自動的に値が文字列に変換されて埋め込まれます。 +記号を使った連結と比べて、とても読みやすくなりますね。

計算結果も埋め込める

変数だけでなく、計算式や関数の結果も埋め込むことができます。

let price = 1000;
let quantity = 3;
let taxRate = 0.1;


// 計算結果を直接埋め込み
let total = `合計金額は${price * quantity}円です。`;
console.log(total); // 合計金額は3000円です。


// 複雑な計算も可能
let withTax = `税込み価格は${Math.round(price * quantity * (1 + taxRate))}円です。`;
console.log(withTax); // 税込み価格は3300円です。

${}の中では、JavaScriptの式なら何でも書くことができます。

関数の呼び出し結果も使える

関数を呼び出して、その結果を埋め込むこともできます。

function getGreeting() {
    let hour = new Date().getHours();
    if (hour < 12) {
        return "おはようございます";
    } else if (hour < 18) {
        return "こんにちは";
    } else {
        return "こんばんは";
    }
}


let message = `${getGreeting()}！今日も一日頑張りましょう。`;
console.log(message); // こんにちは！今日も一日頑張りましょう。（時間による）

この例では、現在の時刻に応じて適切な挨拶を表示しています。

複数行の文字列を簡単に作ろう

改行が自然にできる

テンプレートリテラルでは、改行をそのまま文字列に含めることができます。

// 従来の方法（改行がとても面倒）
let poem1 = "春の風
" +
            "桜の花びら
" +
            "舞い散りて";


// テンプレートリテラル（自然な改行）
let poem2 = `春の風
桜の花びら
舞い散りて`;


console.log(poem2);
// 春の風
// 桜の花びら
// 舞い散りて

エディターで改行した通りに、文字列でも改行されます。 とても直感的で分かりやすいですね。

HTMLを書くときに便利

Web開発では、HTMLを文字列として作ることがよくあります。

let userName = "山田太郎";
let userAge = 30;
let userEmail = "yamada@example.com";


// HTMLテンプレートの作成
let userCard = `
    <div class="user-card">
        <h2>${userName}</h2>
        <p>年齢: ${userAge}歳</p>
        <p>メール: ${userEmail}</p>
    </div>
`;


console.log(userCard);

HTMLの構造が一目で分かり、変数も簡単に埋め込めます。 従来の文字列連結と比べて、圧倒的に読みやすくなりますね。

実際に使える便利なパターン

メッセージテンプレートを作ろう

よく使うメッセージのテンプレートを関数で作ってみましょう。

function createWelcomeMessage(user) {
    return `
        ${user.name}さん、ようこそ！
        
        あなたのアカウント情報：
        - ユーザーID: ${user.id}
        - 登録日: ${user.registeredDate}
        - レベル: ${user.level}
        
        今日も素敵な一日をお過ごしください。
    `;
}


let user = {
    name: "佐藤花子",
    id: "U12345",
    registeredDate: "2024-01-15",
    level: "ゴールド"
};


console.log(createWelcomeMessage(user));

この関数を使うことで、ユーザー情報に応じたメッセージを簡単に作ることができます。

APIのURLを動的に作ろう

Web APIを呼び出すときのURL作成にも便利です。

function createApiUrl(baseUrl, endpoint, params) {
    // パラメータをクエリ文字列に変換
    let queryParams = Object.entries(params)
        .map(([key, value]) => `${key}=${value}`)
        .join('&');
    
    return `${baseUrl}/${endpoint}?${queryParams}`;
}


// 使用例
let apiUrl = createApiUrl(
    'https://api.example.com',
    'users',
    { page: 1, limit: 10, sort: 'name' }
);


console.log(apiUrl);
// https://api.example.com/users?page=1&limit=10&sort=name

パラメータの数が変わっても、自動的に適切なURLが作られます。

ログメッセージを見やすく作ろう

システムのログメッセージも、テンプレートリテラルで見やすく作れます。

function createLog(level, message, timestamp = new Date()) {
    let formattedTime = timestamp.toLocaleString('ja-JP');
    
    return `
[${level.toUpperCase()}] ${formattedTime}
メッセージ: ${message}
---
    `;
}


// 使用例
console.log(createLog('info', 'アプリケーションが正常に起動しました'));
console.log(createLog('error', 'データベース接続に失敗しました'));

レベルや時刻が自動的に付加された、見やすいログが作成できます。

従来の方法と比較してみよう

文字列連結の比較

同じ内容を従来の方法とテンプレートリテラルで比較してみましょう。

let firstName = "太郎";
let lastName = "田中";
let department = "開発部";
let position = "エンジニア";


// 従来の方法（読みにくい）
let profile1 = lastName + " " + firstName + "さんは" + 
              department + "の" + position + "として働いています。";


// テンプレートリテラル（読みやすい）
let profile2 = `${lastName} ${firstName}さんは${department}の${position}として働いています。`;


console.log(profile2); // 田中 太郎さんは開発部のエンジニアとして働いています。

テンプレートリテラルの方が、文章の流れが自然で読みやすいですね。

HTMLテンプレートの比較

HTML要素を作る場合の違いも見てみましょう。

let product = {
    name: "ノートパソコン",
    price: 89800,
    inStock: true,
    rating: 4.5
};


// 従来の方法（複雑で間違いやすい）
let html1 = "<div class=\"product\">" +
            "<h3>" + product.name + "</h3>" +
            "<p>価格: ¥" + product.price.toLocaleString() + "</p>" +
            "<p>在庫: " + (product.inStock ? "あり" : "なし") + "</p>" +
            "<p>評価: " + product.rating + "点</p>" +
            "</div>";


// テンプレートリテラル（直感的で美しい）
let html2 = `
    <div class="product">
        <h3>${product.name}</h3>
        <p>価格: ¥${product.price.toLocaleString()}</p>
        <p>在庫: ${product.inStock ? 'あり' : 'なし'}</p>
        <p>評価: ${product.rating}点</p>
    </div>
`;


console.log(html2);

HTMLの構造が一目で分かり、変数の埋め込みも自然に行えます。

条件分岐を含む高度なパターン

条件に応じてメッセージを変える

${}の中で三項演算子を使って、条件に応じた表示ができます。

function createStatusMessage(user) {
    let lastLoginTime = new Date(user.lastLogin);
    let now = new Date();
    let timeDiff = now - lastLoginTime;
    let isRecentLogin = timeDiff < 5 * 60 * 1000; // 5分以内
    
    return `
        ユーザー: ${user.name}
        ステータス: ${isRecentLogin ? 'オンライン🟢' : 'オフライン🔴'}
        最終ログイン: ${lastLoginTime.toLocaleString('ja-JP')}
        
        ${isRecentLogin ? 
          '現在アクティブです！' : 
          'しばらく非アクティブです。'}
    `;
}


let user = {
    name: "山田花子",
    lastLogin: new Date(Date.now() - 2 * 60 * 1000) // 2分前
};


console.log(createStatusMessage(user));

条件に応じて表示内容を動的に変更できます。

配列の内容を一覧表示

配列の要素を使って、リスト形式の文字列を作ることもできます。

function createShoppingList(items) {
    return `
        お買い物リスト 📝
        
        ${items.map((item, index) => 
            `${index + 1}. ${item.name} (${item.quantity}個) - ¥${item.price}`
        ).join('
        ')}
        
        合計: ¥${items.reduce((total, item) => total + item.price * item.quantity, 0)}
    `;
}


let shoppingItems = [
    { name: "りんご", quantity: 3, price: 150 },
    { name: "パン", quantity: 1, price: 200 },
    { name: "牛乳", quantity: 2, price: 180 }
];


console.log(createShoppingList(shoppingItems));

配列の内容を使って、見やすい一覧表示を作ることができます。

気をつけたいポイント

セキュリティに注意しよう

ユーザーが入力した内容をそのまま埋め込むのは危険な場合があります。

// 危険な例（ユーザー入力をそのまま使用）
let userInput = "<script>alert('悪意のあるコード')</script>";
let dangerousHtml = `<div>${userInput}</div>`;


// 安全な例（入力内容をエスケープ）
function escapeHtml(text) {
    return text
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}


let safeHtml = `<div>${escapeHtml(userInput)}</div>`;
console.log(safeHtml); // <div>&lt;script&gt;alert('悪意のあるコード')&lt;/script&gt;</div>

ユーザー入力を扱う場合は、必ず適切なエスケープ処理を行いましょう。

複雑すぎる式は避けよう

${}の中に複雑すぎる処理を書くと、読みにくくなってしまいます。

let user = { name: "田中", score: 85, level: 3 };


// 複雑すぎて読みにくい
let bad = `${user.name}さんは${user.score > 80 ? user.level > 2 ? '上級者' : '中級者' : '初心者'}です`;


// 読みやすく分割
let userLevel = user.score > 80 ? 
    (user.level > 2 ? '上級者' : '中級者') : 
    '初心者';
let good = `${user.name}さんは${userLevel}です`;


console.log(good); // 田中さんは上級者です

複雑な処理は事前に変数に格納して、読みやすさを保ちましょう。

どのブラウザで使えるの？

テンプレートリテラルは、比較的新しい機能です。

対応ブラウザは以下の通りです。

  • Chrome 41以降 ✅
  • Firefox 34以降 ✅
  • Safari 9以降 ✅
  • Edge 12以降 ✅
  • Internet Explorer ❌（対応なし）

古いブラウザをサポートする必要がある場合は、Babelなどのツールで変換してから使用しましょう。

まとめ

テンプレートリテラルは、JavaScriptの文字列操作を劇的に改善してくれる素晴らしい機能です。

主なメリットをおさらいしましょう。

  • 変数や式の埋め込みがとても簡単
  • 複数行の文字列を自然に書ける
  • 従来の+連結よりもずっと読みやすい
  • HTMLテンプレートの作成が楽になる

使用時の注意点も覚えておきましょう。

  • ユーザー入力を扱う時はセキュリティに注意
  • 古いブラウザでは動作しない
  • 複雑すぎる式は可読性を損なう

実践で役立つテクニックも身につきました。

  • メッセージテンプレートの作成
  • API URL の動的生成
  • ログメッセージの整形
  • 条件分岐を含む表示制御

現代のJavaScript開発では欠かせない機能となっているので、ぜひ積極的に使ってみてください。 従来の文字列連結から移行することで、コードの読みやすさと保守性が大幅に向上しますよ！

関連記事

JavaScriptの難易度は？文系・未経験でも理解できる学習ステップ

文系出身や未経験者でもJavaScriptを習得できる？難易度と効率的な学習方法を詳しく解説。挫折しないための具体的なステップを紹介します。

2025年7月6日
12分

【初心者向け】JavaScriptとは？30分でわかる基本概念と学習の始め方

プログラミング初心者にもわかりやすく、JavaScriptの基本概念から学習方法まで30分で理解できる完全ガイド。今すぐプログラミングの世界に飛び込みましょう。

2025年7月6日
14分

【2025年版】JavaScriptとは？初心者向けに5分でわかりやすく解説

JavaScriptとは何かを初心者向けに5分で理解できるよう解説。歴史、特徴、学習方法まで2025年最新情報でわかりやすく紹介します。

2025年7月6日
9分