0Pricing
JavaScript Academy · レッスン

タグ付きテンプレートの実践的な活用例

タグを使って安全な HTML とスタイル付き文字列を作成します。

「タグ付きテンプレートの実践的な活用例」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

実際に使われるタグ

タグ付きテンプレートは、HTMLのエスケープ、styled components、GraphQLクエリ、i18nなど、多くのライブラリで利用されています。共通する考え方は、埋め込まれた値を受け取り、安全に処理することです。

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

エスケープの必要性

ユーザー入力からHTMLを構築すると、小なり記号などの特殊文字によってマークアップを挿入される可能性があります。タグ関数を使えば、埋め込まれた値に含まれるこれらの文字だけを自動的にエスケープできます。

const danger = "<script>"
console.log("raw: " + danger)

エスケープヘルパー

まず、危険な文字を安全なHTMLエンティティに置き換えるヘルパーを定義します。

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

安全なHTMLタグ

次に、埋め込まれた値はすべてエスケープし、静的なテンプレート部分はそのままにするタグを作成します。静的な部分は信頼できる開発者が記述したものだからです。

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

静的な部分をそのままにする理由

信頼できないユーザーデータは、埋め込まれた値だけです。リテラルのテンプレート部分は開発者が記述したものなので、意図したマークアップが機能するよう、エスケープせずに残します。

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

装飾付き出力タグ

別のパターンとして、埋め込まれた値をフォーマット用のマーカーで囲む方法があります。たとえば、レポート内の数値を強調できます。

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

クエリ文字列を構築する

タグ関数を使ってURL用に値をエンコードできます。埋め込まれた各部分をエスケープすることで、静的な構造を保ちながらデータを安全にエンコードできます。

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

複数形への対応

タグ関数は値を調べて、単数形または複数形の表現を選ぶなど、周囲のテキストを調整できます。

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

インデントを削除する

タグ関数を使うと、各行の先頭にあるインデントを削除して複数行のテンプレートを整形し、読みやすい出力にできます。

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

タグを組み合わせる

1つのタグ関数からヘルパーを呼び出すことで、処理を重ねることができます。ここでは、値を囲むと同時に強調しています。

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

タグを使わない場合

単純な文字列であれば、通常のテンプレートリテラルで十分です。エスケープやローカライズなど、埋め込まれた値を一貫して変換する必要がある場合にだけ、タグ関数を使います。

const name = "Lee"
console.log("Welcome, " + name)

クイックチェック

タグ関数の実践的な知識を確認してみましょう。

まとめ

まとめ：タグ付きテンプレートを使うと、安全で整形された出力を生成できます。

  • HTMLの安全性のため、埋め込まれた値だけをエスケープします
  • 静的な部分は信頼できるものとして、そのままにします
  • スタイル設定、エンコード、複数形への対応にはタグを使います
  • 変換が必要ない場合は、通常のリテラルを使います
function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))

よくある質問

「タグ付きテンプレートの実践的な活用例」レッスンは無料ですか？

はい。「タグ付きテンプレートの実践的な活用例」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「タグ付きテンプレートの実践的な活用例」で何を学びますか？

タグを使って安全な HTML とスタイル付き文字列を作成します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「タグ付きテンプレートの実践的な活用例」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 文字列補間の基本
  2. 複数行文字列
  3. タグ付きテンプレート関数
  4. タグ付きテンプレートの実践的な活用例
← JavaScript Academyに戻る