タグ付きテンプレート関数
タグ関数でテンプレートの各部分を処理します。
「タグ付きテンプレート関数」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
タグ関数とは
タグ付きテンプレートとは、テンプレートリテラルの直前に関数名を置いて呼び出す形式です。関数はテンプレートを解析した各部分を受け取り、それらを変換できます。
function tag(strings, value) {
return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))文字列配列
タグ関数が受け取る最初の引数は、リテラル文字列の各部分からなる配列です。これはプレースホルダーの間や前後にあるテキストのまとまりです。
function tag(strings) {
return strings.join("|")
}
console.log(tag(["a", "b", "c"]))値
タグ関数は文字列配列に続いて、補間された各値を個別の引数として受け取ります。rest パラメーターを使うと、それらを配列にまとめられます。
function tag(strings, ...values) {
return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))文字列を再構築する
一般的なタグ関数は文字列配列を順に処理し、各部分の間に値を挿入して、任意の変換を施した最終的な文字列を再構築します。
function tag(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] : "")
})
return out
}
console.log(tag(["A", "B", "C"], 1, 2))文字列の長さに関するルール
文字列配列の要素数は、常に値の配列より1つ多くなります。最初のプレースホルダーの前と最後のプレースホルダーの後にもテキストがあるためです。各部分が空の場合も同様です。
function tag(strings, ...values) {
return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))値を変換する
値の挿入方法をタグ関数が制御するため、値を整形できます。ここでは、挿入する前にすべての数値を2倍にしています。
function dbl(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] * 2 : "")
})
return out
}
console.log(dbl(["", " ", ""], 3, 4))文字列以外を返す
タグ関数は文字列を返す必要はありません。テンプレートの各部分から作成したオブジェクトや配列など、任意の値を返せます。
function parts(strings, ...values) {
return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])raw プロパティ
文字列配列には raw プロパティもあり、エスケープシーケンスを処理していない文字列を保持します。String.raw はこの仕組みを利用しています。
console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))埋め込み値を大文字に変換する
タグ関数の一般的な例では、静的なテキストはそのままにして、埋め込まれた値をすべて大文字に変換します。
function loud(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? String(values[i]).toUpperCase() : "")
})
return out
}
console.log(loud(["name is ", "."], "alice"))タグを使う理由
タグ関数を使うと、信頼できない入力のエスケープ、国際化、SQLやクエリの構築、カスタムフォーマットなど、テンプレートの構造に基づく強力な処理を実現できます。
function highlight(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? "[" + values[i] + "]" : "")
})
return out
}
console.log(highlight(["score: ", " pts"], 42))値を無視する
タグ関数は埋め込まれた値を完全に無視し、静的な部分だけに基づいて出力を生成することもできます。これは分析やログ出力に便利です。
function onlyStatic(strings) {
return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))クイックチェック
タグ関数についての知識を確認してみましょう。
まとめ
まとめ：タグ付きテンプレートは、解析済みのテンプレート部分を引数として関数を呼び出します。
- 第1引数はstrings配列です
- 残りの引数は埋め込まれたvaluesです
- stringsの要素数はvaluesより1つ多くなります
- rawプロパティには未処理のテキストが保持されます
function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))よくある質問
「タグ付きテンプレート関数」レッスンは無料ですか？
はい。「タグ付きテンプレート関数」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「タグ付きテンプレート関数」で何を学びますか？
タグ関数でテンプレートの各部分を処理します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「タグ付きテンプレート関数」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 文字列補間の基本
- 複数行文字列
- タグ付きテンプレート関数
- タグ付きテンプレートの実践的な活用例