はじめる
lit-htmlとは
lit-htmlは、JavaScript用のシンプルでモダンな、安全で軽量高速なHTMLテンプレートライブラリです。
HTMLテンプレートを扱うにはJavaScript評価式を埋め込んだテンプレートリテラル(template literals)を使います。内部的にはJavaScriptのテンプレートからHTMLの<template>
要素を生成することで、評価式の結果をどこに追加・更新するか正確に知ることができています。
テンプレート
テンプレートは、タグ付きのテンプレートリテラル(tagged template literals)です。単純なJavaScript文字列のように見えますが、引用符(“)ではなくバッククォート(`
)で囲まれ、lit-htmlのhtml
タグが使用されます:
html`<h1>こんにちは ${name}</h1>`
ほとんどの場合で、特定のデータを使ってDOMを更新することになるので、引数を渡して加工したテンプレートを返す関数を書くことになるでしょう。この関数は他でも繰り返し利用することができます:
let myTemplate = (data) => html`
<h1>${data.title}</h1>
<p>${data.body}</p>`;
lit-htmlで描画(レンダリング)は 遅延(lazily) 実行されます。この関数が呼び出されると、html
タグを使ってテンプレートリテラル(template literal)が評価され、TemplateResult
(文字列やデータを描画する部分記録されたオブジェクト)が返されます。TemplateResults
は生成するのが非常に軽く、実際にDOMに 描画 されるまで実際には何も起こりません。
描画について
TemplateResult
を実際に描画するには、使用する値と描画先のDOMコンテナを指定してrender()
関数を呼び出します。
const result = myTemplate({title: 'こんにちわ', body: 'lit-htmlは素敵です'});
render(result, document.body);
自分で試してみたいですか? はじめるへ進んでください。