はじめる

• lit-htmlとは
• テンプレート
• 描画について

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);

自分で試してみたいですか? はじめるへ進んでください。