JavaScript - タグ付けされたテンプレート

こんにちは、未来のJavaScript魔法使いたち！今日は、タグ付けされたテンプレートの世界への興奮的な旅を始めます。以前聞いたことがないとしても心配しないでください - このレッスンが終わるまでに、プロのようにテンプレートをタグ付けできるようになるでしょう！

タグ付けされたテンプレートとは？

タグ付けされたテンプレートは、ES6（ECMAScript 2015）で導入された強力な機能で、テンプレートリテラルを関数でパースすることができます。これは少し威圧的な響きがあるかもしれませんが、テンプレートストリングにスーパーパワーを与える thing と考えてください！

よりシンプルに言えば、タグ付けされたテンプレートは、テンプレートストリングが最終的にレンダリングされる前に処理することを許可します。これは、メッセージを送信する前にメッセージを修正してくれるパーソナルアシスタントを持つようなものです。

基本的な構文

まず、基本的な構文を見てみましょう：

function myTag(strings, ...values) {
// あなたの魔法はここに
}

const result = myTag`Hello, ${name}!`;

この例では、myTagは私たちのテンプレートタグ関数です。それは以下の2つの種類の引数を受け取ります：

1. 文字列リテラルの配列
2. 組み込み値（${}の中のもの）

タグ付けされたテンプレートを使う理由

タグ付けされたテンプレートを使う理由に悩んでいるかもしれません。「なぜこんなものを使うべきなのか？」と。ちょっとした話を聞かせましょう。

昔々、若い開発者アレックスがいたんですね。アレックスはメッセージングアプリを構築していて、誰も危害を及ぼすHTMLをメッセージで送信できないようにしたいと思っていました。タグ付けされたテンプレートが助け became! アレックスはユーザーの入力をサニタイズして、潜在的なセキュリティリスクを防ぐためにそれを使いました。

タグ付けされたテンプレートは以下のような用途に非常に有用です：

• ユーザー入力のサニタイズ
• 国際化（i18n）
• スタイリング（Reactのstyled-componentsなど）
• その他多くの用途！

タグ付けされたテンプレートの例

タグ付けされたテンプレートの実際の使用例を見てみましょう！

例1: シンプルな挨拶

function greet(strings, ...values) {
return `${strings[0]}${values[0].toUpperCase()}${strings[1]}`;
}

const name = "alice";
console.log(greet`Hello, ${name}!`);
// 出力: Hello, ALICE!

この例では、私たちのgreet関数は名前を大文字に変換します。strings配列には["Hello, ", "!"]が含まれ、values配列には["alice"]が含まれます。

例2: HTMLエスケープ

function safeHtml(strings, ...values) {
const escapeHtml = (str) => {
return str.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
};

return strings.reduce((result, string, i) => {
return result + string + (values[i] ? escapeHtml(values[i]) : '');
}, '');
}

const userInput = '<script>alert("XSS attack!")</script>';
console.log(safeHtml`User input: ${userInput}`);
// 出力: User input: &lt;script&gt;alert(&quot;XSS attack!&quot;)&lt;/script&gt;

この例では、タグ付けされたテンプレートを使って有害なHTMLをエスケープする方法を示しています。私たちのsafeHtml関数は、特別な文字をHTMLエンティティに置き換えます。

例3: タグ付けされたテンプレートでのスタイリング

function css(strings, ...values) {
return strings.reduce((result, string, i) => {
return result + string + (values[i] || '');
}, '');
}

const color = 'red';
const fontSize = '20px';

const styles = css`
color: ${color};
font-size: ${fontSize};
`;

console.log(styles);
// 出力:
//   color: red;
//   font-size: 20px;

この例では、タグ付けされたテンプレートを使ってスタイリングする方法を示しています。Reactのstyled-componentsなどのライブラリと同様に使用されます。

タグ付けされたテンプレートの高度な使用法

タグ付けされたテンプレートにはメソッドもアタッチできます。例を見てみましょう：

function currency(strings, ...values) {
const result = strings.reduce((acc, str, i) => {
return acc + str + (values[i] || '');
}, '');

return {
toString() {
return result;
},
USD() {
return '$' + result;
},
EUR() {
return '€' + result;
}
};
}

const amount = 100;
const formatted = currency`${amount}`;

console.log(formatted.toString()); // 出力: 100
console.log(formatted.USD()); // 出力: $100
console.log(formatted.EUR()); // 出力: €100

この例では、私たちのcurrencyタグはオブジェクトを返し、柔軟なフォーマットオプションを提供します。

結論

タグ付けされたテンプレートは、複雑な文字列操作と処理を可能にするJavaScriptの強力な機能です。単なる文字列を結合する方法以上のものです - より安全で柔軟で表現力豊かなコードを作成するための可能性を開きます。

記憶に留めておいてください、どんな強力なツールでも、慎重に使うべきです。サニタイズ、国際化、またはドメイン固有の言語を作成するなどの特定の用途には非常に良いですが、単純な文字列挿入には通常のテンプレートリテラルが十分です。

今度はあなた自身でタグ付けされたテンプレートを作成してみませんか？まずは簡単なフォーマット関数から始めて、徐々に複雑な用途に挑戦してみてください。未来のJavaScriptの達人たち、ハッピーコーディング！

Credits: Image by storyset