条件式埋め込みとは何か
テンプレート文字列はバッククォートで囲み、${...}の中に“式”を書いて評価結果を挿入できます。ここが重要です：if/else をそのまま書くのではなく、三項演算子や論理演算子など「式」で条件分岐を表現します。これにより、文字列連結より短く、見た目とロジックをすっきり分けられます。
const ok = true;
const msg = `Status: ${ok ? "OK" : "NG"}`;
console.log(msg); // Status: OK
三項演算子で分岐を“式”として書く
基本形（条件 ? 真の値 : 偽の値）
三項演算子はテンプレート内の条件分岐の主役です。ここが重要です：短い分岐はテンプレート内で完結させ、長い分岐は外で変数にしてから埋め込みます。
const user = { name: "Alice", premium: false };
const badge = `ユーザー: ${user.name} ${user.premium ? "🌟 Premium" : ""}`;
ネストは避けて“外へ出す”
入れ子が増えると読みづらくなります。複雑なら事前に値を用意してから挿入します。
const level = score => score >= 80 ? "A" : score >= 60 ? "B" : "C";
// 読みにくいなら外へ
const lv = level(72);
const text = `成績: ${lv}`;
論理演算子（&& / || / ??）で簡潔な条件
&& で“条件が真なら表示”
ここが重要です：論理積を使うと、真のときだけ右側（文字列）が評価・挿入されます。偽なら空文字になるように設計します。
const isNew = true;
const label = `商品 ${isNew && "(新着)"}`; // "商品 (新着)"
|| で“フォールバック”
左が falsy（空文字や0、null、undefined）なら右を使う。
const nickname = "";
const nameText = `名前: ${nickname || "未設定"}`; // "名前: 未設定"
?? で“null/undefinedだけに既定値”
null または undefined のときだけ既定値。0 や空文字を尊重したいときに有効。
const count = 0;
const cText = `数量: ${count ?? "不明"}`; // "数量: 0"
補助関数で整形を分離（見た目とロジックの分離）
複雑な条件や整形は、テンプレート外の関数に切り出すと可読性が上がります。ここが重要です：テンプレートは“見た目”、関数は“ロジック”。
const statusText = (ok, reason = "") => ok ? "OK" : `NG (${reason})`;
const ok = false;
const reason = "認証失敗";
const line = `結果: ${statusText(ok, reason)}`; // "結果: NG (認証失敗)"
複数行テンプレートでの条件挿入（HTMLやメール本文）
一部の行だけ条件付きで表示
行単位で条件を挿入する場合、空文字と結合を使うと自然に書けます。
const user = { name: "Alice", note: "" };
const html = `
<div class="card">
<h1>${user.name}</h1>
${user.note ? `<p>メモ: ${user.note}</p>` : ""}
</div>
`;
配列と条件の組み合わせ
map と filter を使い、テンプレート内で連結すると読みやすい出力になります。
const rows = [
{ id: 1, active: true, price: 100 },
{ id: 2, active: false, price: 200 },
];
const table = `
<table>
${rows
.filter(r => r.active)
.map(r => `
<tr>
<td>${r.id}</td>
<td>${r.price.toLocaleString("ja-JP")} 円</td>
</tr>`).join("")}
</table>
`;
よくある落とし穴（重要ポイントの深掘り）
バッククォートを忘れる
シングル/ダブルクォートでは ${...} は展開されません。必ずバッククォートで。
const bad = '値: ${1 + 2}'; // そのまま文字
const good = `値: ${1 + 2}`; // "値: 3"
[object Object] の混入
オブジェクトを直接埋め込むと [object Object] になります。必要に応じて文字列化する。
const user = { id: 7, name: "Alice" };
const s = `user=${JSON.stringify(user)}`;
無理な1行化で読みづらい
長い分岐や計算は外へ出してから埋め込む。保守性が最優先。
const discountText = d => d > 0 ? `割引 ${d}%` : "";
const line = `合計: ${total} 円 ${discountText(discount)}`;
例題で理解を固める
// 1) ステータス表示（三項と ?? を組み合わせ）
const statusLine = (ok, user) =>
`Status: ${ok ? "OK" : "NG"} / User: ${user?.name ?? "不明"}`;
console.log(statusLine(false, null)); // "Status: NG / User: 不明"
// 2) 価格ラベル（条件付きバッジ）
const priceLabel = (price, onSale) =>
`${price.toLocaleString("ja-JP")} 円 ${onSale ? "(セール中)" : ""}`;
console.log(priceLabel(123456, true));
// 3) メール本文（行単位の条件）
const makeMail = ({ name, plan, note }) => `
こんにちは、${name} さん
現在のプラン: ${plan}
${note ? `追記: ${note}\n` : ""}
よろしくお願いいたします。
`;
console.log(makeMail({ name: "Alice", plan: "Pro", note: "" }));
// 4) URL のクエリ（条件でパラメータ追加）
const makeUrl = (base, { q, page = 1, sort } = {}) =>
`${base}?q=${encodeURIComponent(q)}&page=${page}${sort ? `&sort=${sort}` : ""}`;
console.log(makeUrl("/search", { q: "JS 入門", sort: "new" }));
まとめ
条件式埋め込みの核心は「${...} に三項演算子や論理演算子を使って“式として”分岐を表現する」ことです。短い分岐はテンプレート内で、複雑な分岐は外で値や関数にしてから埋め込む。null/undefined には ??、簡単な存在チェックは &&、フォールバックは || を使い分ける。見た目はテンプレートに、ロジックは関数へ分離する癖をつければ、初心者でも安全で読みやすいテンプレートが書けます。