タグ関数についてまとめてみた
タグ関数とは
HTMLのテンプレートを引数に渡す目的で実装された関数のことです。
以下のコードでは、tagFunction がタグ関数に該当します。
const view = tagFunction`
<div>${hoge}と${fuga}</div>
`;
function tagFunction(strings, ...values) {
console.log(strings);
console.log(...values);
}
タグ関数について調べた背景
JSPrimerでタグ関数を学習していた際、
上記のようなタグ関数の引数をコンソールに出力した際に、配列が出力された
第一引数(strings) の出力結果
0: "↵ <div>
1: "と"
2: "</div>↵"
第二引数(...values) の出力結果
hoge fuga
この時
Q. どういうルールで、第一引数に入る配列が作成されるのか
Q. タグ関数を呼び出す際、引数にはHTMLテンプレート1つしか渡していないのに、第二引数に値が入るのはなぜか
という疑問を持ったので、調べてみました。
タグ関数の呼び出し方
タグ関数を呼び出す時は、通常の関数と違い
関数`テンプレート`;
という書き方をします。
一般的な関数呼び出しは
関数(引数);
と書きます。
使い方
実際のコードだと以下のように使います。
escapeHTML がタグ関数に該当します。
const view = escapeHTML`
<h4>${userInfo.name} (@${userInfo.login})</h4>
<img src="${userInfo.avatar_url}" alt="${userInfo.login}" height="100">
<dl>
<dt>Location</dt>
<dd>${userInfo.location}</dd>
<dt>Repositories</dt>
<dd>${userInfo.public_repos}</dd>
</dl>
`;
function escapeHTML(strings, ...values) {
return strings.reduce((result, str, i) => {
const value = values[i - 1];
if (typeof value === "string") {
return result + escapeSpecialChars(value) + str;
} else {
return result + String(value) + str;
}
});
}
userInfoの定義
githubのユーザ情報が格納されており、各プロパティの詳細は以下の通りです。
userInfo.name:ユーザ名
userInfo.login:ログイン名
userInfo.avatar_url:プロフィール画像
userInfo.location:住んでいる国名
userInfo.public_repos:パブリックリポジトリの数
それでは、背景で書いた疑問の解答を書いていきます。
疑問1つ目
Q. どういうルールで、HTMLのテンプレートが区切られて、配列へ格納されるのか
A. テンプレートリテラル内の${value}
が区切りとなり、それぞれが一要素として配列へ格納されます
配列をコンソールに出力すると、以下が表示されました。
(7) ["↵ <h4>", " (@", ")</h4>↵ <img src="", "" alt="", "" height="100">↵ <dl>↵ <dt>Location</dt>↵ <dd>", "</dd>↵ <dt>Repositories</dt>↵ <dd>", "</dd>↵ </dl>↵ ", raw: Array(7)]
0: "↵ <h4>"
1: " (@"
2: ")</h4>↵ <img src=""
3: "" alt=""
4: "" height="100">↵ <dl>↵ <dt>Location</dt>↵ <dd>"
5: "</dd>↵ <dt>Repositories</dt>↵ <dd>"
6: "</dd>↵ </dl>↵ "
疑問2つ目
Q. タグ関数を呼び出す際、引数にはHTMLテンプレート1つしか渡していないのに、第二引数に値が入るのはなぜか
A. valuesには、テンプレートリテラル内の${value}
の実際の値が格納された配列が入るため
第二引数(...values) もコンソールに出力すると、以下が表示されました。
null "bita-kodai" "プロフィール画像のURL" "bita-kodai" null 17
終わりに
最後までご覧頂きありがとうございます。
何か補足や疑問点、フィードバック等々ございましたら、コメント欄への記載をお願いします。
Discussion