改行保持とは何か
テンプレート文字列はバッククォートで囲むだけで、書いた改行や空白をそのまま保持します。ここが重要です：'\n' を手書きしなくても、テンプレート内の改行が実際の文字列に含まれるため、HTML断片、メール本文、ログの整形など“見た目どおり”の文字列を直感的に作れます。
const text = `
ライン1
ライン2
ライン3
`;
console.log(text);
/*
（そのまま出力）
ライン1
ライン2
ライン3
*/
基本の書き方と改行の位置
複数行のテンプレートは、始まりと終わりのバッククォートの位置で“先頭・末尾の改行や空白”も含まれます。ここが重要です：最初の行の直後に改行を入れたくない場合、バッククォートの直後を文字から始めます。逆に先頭・末尾の空白を避けたいときは、位置を工夫します。
// 先頭に改行が入るパターン（よくある）
const a = `
A
B`;
console.log(a); // 先頭に空行＋"A\nB"
// 先頭の改行を避ける（バッククォート直後に文字）
const b = `A
B`;
console.log(b); // "A\nB"
// 末尾の改行もそのまま入る
const c = `A
B
`;
console.log(c); // "A\nB\n"
インデントの扱い（視覚的に整えつつ、不要な空白は避ける）
テンプレート内のインデント（スペース・タブ）は文字列に含まれます。ここが重要です：コードの可読性のためにインデントしたい場合でも、出力に不要な空白が入ることがあります。対策として“左端を揃える”“ヘルパーでデデント（インデント除去）”するなどの方法があります。
// インデントがそのまま残る例
const html = `
<div>
<h1>Title</h1>
<p>Body</p>
</div>
`;
console.log(html); // 行頭にスペースを含む
// 左端を揃えるテクニック（やや視認性は落ちる）
const html2 = `<div>
<h1>Title</h1>
<p>Body</p>
</div>`;
デデント（余計なインデントを取り除く）テクニック
タグ付きテンプレートを使うと、文字列と式を受け取って加工できます。ここが重要です：最小インデント幅を検出して前方の空白を削る“デデント関数”を用意すれば、コード側のインデントを保ちつつ、出力は左端に揃えられます。
function dedent(strings, ...vals) {
// 連結
let raw = strings.reduce((out, str, i) => out + str + (vals[i] ?? ""), "");
// 先頭・末尾の空行を適度にトリム
raw = raw.replace(/^\n+/, "").replace(/\n+$/, "\n");
// 行ごとの最小インデント幅を検出
const lines = raw.split("\n");
const indents = lines
.filter(line => line.trim().length)
.map(line => line.match(/^(\s*)/)![1].length);
const min = indents.length ? Math.min(...indents) : 0;
// その分だけ左へ寄せる
return lines.map(line => line.slice(min)).join("\n");
}
const out = dedent`
<div>
<h1>Title</h1>
<p>Body</p>
</div>
`;
console.log(out);
/*
<div>
<h1>Title</h1>
<p>Body</p>
</div>
*/
よくある落とし穴（重要ポイントの深掘り）
改行や空白が“意図せず”混入し、比較やパースに失敗することがあります。ここが重要です：先頭・末尾の改行の有無を意識し、必要なら trim() か独自のトリム処理を挟みます。さらに、HTML のインデントをそのまま入れると、プレーンテキストやプリンタブル出力で見た目がズレることがあるため、用途に合わせてインデントの扱いを選びましょう。
// 先頭・末尾の空白を落とす
const block = `
line1
line2
`;
const clean = block.trim(); // 先頭・末尾の空白・改行を削除
また、バッククォート自体を文字列に入れたい場合は、テンプレート内でエスケープ（“`）が必要です。改行は保持されますが、タブや全角スペースなど“見えにくい空白”が混ざると意図しない整形になるため、編集時に注意します。
const note = `バッククォートはこう書く: \``;
実用例で理解を固める
// 1) メール本文の整形（改行保持）
const user = { name: "Alice", plan: "Pro" };
const mailBody = `
こんにちは、${user.name} さん
ご利用中のプラン: ${user.plan}
ヘルプは以下をご参照ください。
https://example.com/help
よろしくお願いいたします。
`;
console.log(mailBody);
// 2) CLI ヘルプ表示（インデントをデデントで整える）
const help = dedent`
Usage:
cmd [options]
Options:
-h, --help Show help
-v, --version Show version
`;
console.log(help);
// 3) HTML テンプレート（改行・インデントをそのまま）
const items = [{ id: 1, price: 100 }, { id: 2, price: 200 }];
const table = `
<table>
${items.map(r => `
<tr>
<td>${r.id}</td>
<td>${r.price.toLocaleString("ja-JP")} 円</td>
</tr>`).join("")}
</table>
`;
console.log(table);
まとめ
改行保持の核心は「テンプレート文字列に書いた改行・空白が、そのまま文字列に入る」ことです。先頭・末尾の改行やインデントが出力に影響する点を意識し、必要に応じて trim()・タグ付きテンプレートによるデデントで整える。見た目はテンプレート、ロジックや整形は関数に分離して、意図したレイアウトを安定して再現する。これを徹底すれば、初心者でも複数行の文字列やHTML/メール本文を読みやすく、正確に組み立てられます。