JavaScript | ES6+ 文法：テンプレート文字列 – 可読性向上パターン

JavaScript
スポンサーリンク

可読性向上パターンの考え方

テンプレート文字列は“見た目をコードにそのまま表せる”のが強みです。ここが重要です：見た目（レイアウト）とロジック（計算・整形）を分離し、式の埋め込みは短く保つことで、初心者でも無理なく読めるテンプレートにできます。

// NG：テンプレート内に長い計算や分岐がベタ書き
const s1 = `
<p>合計: ${(list.filter(x => x.active).reduce((s, x) => s + x.price, 0) * 1.1).toFixed(0)} 円</p>
`;

// OK：ロジックは外へ、テンプレートは見た目だけ
const sumActive = rows => rows.filter(r => r.active).reduce((s, r) => s + r.price, 0);
const yen = n => `${Math.round(n).toLocaleString("ja-JP")} 円`;
const s2 = `<p>合計: ${yen(sumActive(list) * 1.1)}</p>`;
JavaScript

補助関数の導入（見た目とロジックの分離）

整形用の小さな関数を用意する

数値・日付・文字列の整形は、短い補助関数へ切り出すとテンプレートがすっきりします。ここが重要です：テンプレートの ${...} に入るのは“意味の分かる一語”にする。

const yen = n => `${n.toLocaleString("ja-JP")} 円`;
const pad2 = n => String(n).padStart(2, "0");
const time = d => `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;

const now = new Date();
const html = `
<section>
  <p>現在時刻: ${time(now)}</p>
  <p>価格: ${yen(123456)}</p>
</section>
`;
JavaScript

条件は短く、複雑なら事前計算

三項演算子や論理演算子は短いときだけ使い、複雑な判定は変数にして埋め込む。

const isSale = price => price > 100000;
const badge = isSale(123456) ? '<span class="badge">SALE</span>' : '';
const row = `<td>123,456 円 ${badge}</td>`;
JavaScript

改行とインデントの整え方（構造を見せる）

余計な空白を避けつつ、構造は保つ

テンプレート文字列は改行・空白を保持します。ここが重要です：先頭・末尾の空白は trim() で落とす、インデントは“見た目の整合性”を優先し、必要に応じてデデント（左寄せ）を使います。

const block = `
  <ul>
    <li>A</li>
    <li>B</li>
  </ul>
`.trim();
JavaScript

デデントでコードはインデント、出力は左端

タグ付きテンプレートでインデントを取り除くと、コードも出力も見やすく保てます。

function dedent(strings, ...vals) {
  let text = strings.reduce((o, s, i) => o + s + (vals[i] ?? ""), "");
  text = text.replace(/^\n+/, "").replace(/\n+$/, "\n");
  const lines = text.split("\n");
  const min = Math.min(...lines.filter(l => l.trim()).map(l => l.match(/^(\s*)/)[1].length));
  return lines.map(l => l.slice(min)).join("\n");
}

const card = dedent`
  <div class="card">
    <h2>Title</h2>
    <p>Body</p>
  </div>
`;
JavaScript

配列との相性を活かす（リスト・テーブルの量産）

map と join を定型化する

ここが重要です：要素テンプレートを小さく分け、map(...).join("") で連結。ネストは“部分テンプレート”に分割して読みやすく。

const yen = n => `${n.toLocaleString("ja-JP")} 円`;
const rowHtml = r => `
<tr class="${r.active ? "on" : "off"}">
  <td>${r.id}</td>
  <td>${r.name.trim()}</td>
  <td>${yen(r.price)}</td>
</tr>
`;

const tableHtml = rows => `
<table>
  <thead><tr><th>ID</th><th>商品名</th><th>価格</th></tr></thead>
  <tbody>${rows.map(rowHtml).join("")}</tbody>
</table>
`;
JavaScript

長いテンプレートは“部品化”して合成

大きなページはヘッダ・ボディ・フッタなどに分け、最終テンプレートで組み合わせる。

const header = title => `<header><h1>${title}</h1></header>`;
const footer = () => `<footer>© 2025</footer>`;
const page = (title, body) => `
${header(title)}
<main>${body}</main>
${footer()}
`;
JavaScript

変数名と式の“読みやすさ”を設計する

意味が伝わる名前にしてから埋め込む

ここが重要です：${...} に直接計算を書く代わりに、意味のある変数へ代入してから挿入すると、初学者にも意図が伝わります。

const total = 123456;
const totalLabel = `${total.toLocaleString("ja-JP")} 円`;
const summary = `合計: ${totalLabel}`;
JavaScript

オブジェクトは文字列化してから埋め込む

そのままだと [object Object] になります。JSON か独自フォーマットに。

const user = { id: 7, name: "Alice" };
const info = `user=${JSON.stringify(user)}`;
JavaScript

安全性と可読性の両立（最低限の防御）

ユーザー入力はサニタイズを標準化

テンプレートは“見た目”だけに集中するため、埋め込む前に必ずエスケープしておくと可読性と安全性を同時に満たします。

const escapeHtml = s => String(s).replace(/[&<>"']/g, c => ({
  "&": "&", "<": "<", ">": ">", '"': """, "'": "'"
}[c]));

const safeName = escapeHtml(`<Alice>`);
const card = `
<div class="card"><h2>${safeName}</h2></div>
`;
JavaScript

DOM API でテキスト・属性を扱う

innerHTML で混ぜない設計にすると、テンプレートは構造のみに専念できます。

const el = document.createElement("p");
el.textContent = `ようこそ、${safeName} さん`;
document.body.appendChild(el);
JavaScript

実用例で理解を固める

// 1) カード一覧：部品化＋補助関数
const yen = n => `${n.toLocaleString("ja-JP")} 円`;
const card = ({ id, name, price }) => `
<div class="card" data-id="${id}">
  <h2>${name.trim()}</h2>
  <p>価格: ${yen(price)}</p>
</div>
`;
const listHtml = items => `
<div class="cards">
  ${items.map(card).join("")}
</div>
`;

// 2) 明細：事前計算＋短い式埋め込み
const sum = rows => rows.reduce((s, r) => s + r.price, 0);
const detail = rows => {
  const total = sum(rows);
  const totalLabel = `${total.toLocaleString("ja-JP")} 円`;
  return `
  <section>
    <h3>明細</h3>
    ${tableHtml(rows)}
    <p>合計: ${totalLabel}</p>
  </section>
  `;
};

// 3) デデントで読みやすい HTML を出力
const page = title => dedent`
  <!doctype html>
  <html lang="ja">
    <body>
      ${header(title)}
      <main>
        ${listHtml([{ id: 1, name: "Apple", price: 100 }])}
      </main>
      ${footer()}
    </body>
  </html>
`;
JavaScript

まとめ

可読性向上の核心は「テンプレートは見た目、ロジックは補助関数へ。式の埋め込みは短く、意味のある名前で事前計算する」ことです。改行・インデントは意図的に整え、必要ならデデントで左寄せ。配列は部品テンプレート＋map/join、長いテンプレートは部品化して合成。オブジェクトは文字列化、ユーザー入力は標準化されたサニタイズを通す。これらを徹底すれば、初心者でも読みやすく安全で保守しやすいテンプレート文字列を書けます。

スポンサーリンク
タイトルとURLをコピーしました