【JavaScript】変数の値を埋め込んで文字列を結合するモダンな実装パターン

2026年1月24日

概要

ユーザー入力の連結やAPIリクエストURLの構築など、複数の文字列や変数を一つにまとめる処理はプログラミングの基礎です。本記事では、従来の + 演算子による結合に加え、可読性と保守性に優れたES6の機能「テンプレートリテラル（Template Literals）」を使用した文字列結合の実装方法を解説します。

仕様（入出力）

入力: 「部署名」と「氏名」の2つのテキストフィールド。
出力: 2つの入力を結合し、フォーマットされた「表示名（Display Name）」をリアルタイムに生成して画面表示する。
動作:
- ユーザーが文字を入力するたびに結合処理を実行する。
- 部署名が入力されている場合は、角括弧 [] で囲んで強調表示する。

基本の使い方

JavaScriptで文字列を結合するには、主に2つの方法があります。現在はバッククォート（`）を使用するテンプレートリテラルが推奨されます。

const greet = "Hello";
const target = "World";

// 1. テンプレートリテラル（推奨）
// 変数を ${} で埋め込むことができ、改行もそのまま記述可能です。
const modern = `${greet} ${target}`; 

// 2. プラス演算子（従来）
// 結合箇所が多いと引用符の管理が複雑になりがちです。
const classic = greet + " " + target;

コード全文（HTML / JavaScript）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Concatenation Demo</title>
    <style>
        body { font-family: sans-serif; padding: 20px; max-width: 600px; }
        .input-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input { padding: 8px; width: 100%; box-sizing: border-box; }
        .preview-box {
            background-color: #e3f2fd;
            padding: 15px;
            border-left: 5px solid #2196f3;
            border-radius: 4px;
            margin-top: 20px;
        }
        .preview-label { font-size: 0.8em; color: #555; margin-bottom: 5px; }
        .preview-text { font-size: 1.2em; font-weight: bold; min-height: 1.2em; }
    </style>
</head>
<body>

    <h2>社員証表示名プレビュー</h2>

    <div class="input-group">
        <label for="deptInput">部署名</label>
        <input type="text" id="deptInput" placeholder="例: 開発部">
    </div>

    <div class="input-group">
        <label for="nameInput">氏名</label>
        <input type="text" id="nameInput" placeholder="例: 山田 太郎">
    </div>

    <div class="preview-box">
        <div class="preview-label">生成された表示名:</div>
        <div id="displayName" class="preview-text"></div>
    </div>

    <script src="app.js"></script>
</body>
</html>

JavaScript

/**
 * HTML要素の参照を取得
 */
const deptInput = document.getElementById("deptInput");
const nameInput = document.getElementById("nameInput");
const displayName = document.getElementById("displayName");

/**
 * 入力値を結合してプレビューを更新する関数
 */
const updatePreview = () => {
    // フォームの値を取得（前後の空白を除去）
    const dept = deptInput.value.trim();
    const name = nameInput.value.trim();

    // テンプレートリテラルを使用して文字列を結合
    // 部署名がある場合のみ [] で囲み、スペースを入れる条件分岐
    // 三項演算子を使って埋め込む値を制御
    const formattedDept = dept ? `[${dept}] ` : "";
    
    // 最終的な結合文字列を作成
    // 例: "[開発部] 山田 太郎"
    const fullName = `${formattedDept}${name}`;

    // 結果を描画
    displayName.textContent = fullName;
};

// リアルタイム反映のために 'input' イベントを使用
// (keyupだと日本語変換確定前の挙動が不安定になるため input を推奨)
deptInput.addEventListener("input", updatePreview);
nameInput.addEventListener("input", updatePreview);

カスタムポイント

数値の計算: テンプレートリテラル内の ${} では計算式も記述できます。 税込価格: ${price * 1.1}円 のように、結合と同時に計算を行う実装も可能です。
改行の扱い: テンプレートリテラルはソースコード上の改行をそのまま文字列として保持します。長いメッセージやHTMLテンプレート（文字列として扱う場合）を作成する際に非常に便利です。

注意点

数値と文字列の結合: + 演算子を使用する場合、数値と文字列を足すと文字列結合として扱われます（例: 10 + "20" === "1020"）。意図しない型変換バグを防ぐため、数値計算と文字列結合を明確に区別するか、テンプレートリテラルの使用を徹底してください。
undefined / null の表示: 変数が undefined や null の状態で結合すると、そのまま文字列の “undefined”, “null” として表示されてしまいます。コード例のように trim() や三項演算子を使用して、値が存在しない場合の空文字フォールバック（代替処理）を実装することが重要です。

応用

配列要素の結合 (join)

配列に格納された複数の文字列を特定の区切り文字で結合したい場合は、join() メソッドを使用します。タグリストやCSV生成などで役立ちます。

const tags = ["JavaScript", "HTML", "CSS"];

// カンマとスペースで結合
const tagList = tags.join(", "); 

console.log(tagList); // "JavaScript, HTML, CSS"

まとめ

文字列の結合には、可読性が高くミスが発生しにくいテンプレートリテラル（バッククォート）の使用が現代のスタンダードです。特に変数の埋め込みや改行を含むテキスト操作においてその真価を発揮します。ただし、undefined などの予期せぬ値がそのまま文字列として出力されないよう、入力値の検証や正規化処理を組み合わせた堅牢な実装を心がけてください。

よかったらシェアしてね！