超高速テンプレートとWebコンポーネント：lit-htmlとLitElement

本日、次世代のWeb開発ライブラリであるlit-htmlとLitElementの最初の安定版リリースを発表できることを嬉しく思います。

lit-htmlは、HTMLテンプレート用の小さく、高速で表現力豊かなライブラリです。LitElementは、lit-htmlテンプレートを使用してWebコンポーネントを作成するためのシンプルな基本クラスです。

これらのプロジェクトをフォローしてきた方なら、lit-htmlとLitElementがどのようなものかご存知でしょう（必要であれば最後までスキップできます）。lit-htmlとLitElementを初めて使う方は、概要についてお読みください。

lit-htmlは、HTMLテンプレート用の小さく（バンドル、縮小、gzip圧縮でわずか3k強）、高速なJavaScriptライブラリです。lit-htmlは、関数型プログラミングのアプローチとうまく連携し、アプリケーションのUIをその状態の関数として宣言的に表現できます。

const myTemplate = (name) => html`
  <div>
    Hi, my name is ${name}.
  </div>
`;

lit-htmlテンプレートのレンダリングは簡単です。

render(myTemplate('Ada'), document.body);

テンプレートの再レンダリングでは、変更されたデータのみが更新されます。

render(myTemplate('Grace'), document.body);

lit-htmlは効率的で表現力豊かで拡張可能です。

• 効率的。lit-htmlは非常に高速です。データが変更された場合、lit-htmlは差分を計算する必要がありません。代わりに、テンプレート内の式を挿入した場所を記憶し、これらの動的な部分のみを更新します。

• 表現力豊か。lit-htmlは、JavaScriptの完全な機能、宣言的なUI、関数型プログラミングパターンを提供します。lit-htmlテンプレートの式は単なるJavaScriptであるため、カスタム構文を学習する必要はなく、言語のすべての表現力を自由に利用できます。lit-htmlは、文字列、DOMノード、配列など、多くの種類の値をネイティブにサポートしています。テンプレート自体は、計算、関数への受け渡し、ネストが可能な値です。

• 拡張可能：lit-htmlはカスタマイズおよび拡張も可能であり、あなた自身のテンプレート構築キットです。ディレクティブは値の処理方法をカスタマイズし、非同期値、効率的なキー付き反復、エラー境界などを可能にします。lit-htmlには、すぐに使えるディレクティブがいくつか含まれており、独自のディレクティブを簡単に定義できます。

多くのライブラリとプロジェクトがすでにlit-htmlを組み込んでいます。これらのライブラリの一部は、GitHubのawesome-lit-htmlリポジトリで確認できます。

テンプレートのみが必要な場合は、lit-htmlドキュメントからすぐに開始できます。アプリで使用したり、チームと共有したりするためのコンポーネントを構築したい場合は、読み進めてください。

LitElementは、Webコンポーネントの構築と共有をこれまでになく簡単にする軽量の基本クラスです。

LitElementはlit-htmlを使用してコンポーネントをレンダリングし、リアクティブなプロパティと属性を宣言するためのAPIを追加します。要素は、プロパティが変更されると自動的に更新されます。また、差分計算なしで高速に更新されます。

これがシンプルなLitElementコンポーネントです。

@customElement('name-tag')
class NameTag extends LitElement {
  @property()
  name = 'a secret';

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}

class NameTag extends LitElement {
  static properties = {
    name: {},
  };

  constructor() {
    super();
    this.name = 'a secret';
  }

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}
customElements.define('name-tag', NameTag);

これにより、通常のHTML要素を使用する場所ならどこでも使用できる要素が作成されます。

<name-tag name="Ida"></name-tag>

すでにWebコンポーネントを使用している場合は、Chrome、Safari、Firefoxでネイティブにサポートされるようになったことを嬉しく思うでしょう。Edgeのサポートは近日中に提供され、ポリフィルはレガシーブラウザバージョンでのみ必要です。

Webコンポーネントを初めて使用する場合は、ぜひ試してみてください。Webコンポーネントを使用すると、他のライブラリ、ツール、フレームワークと相互運用可能な方法でHTMLを拡張できます。これにより、大規模な組織内でUI要素を共有したり、Web上のどこでも使用できるコンポーネントを公開したり、マテリアルデザインのようなUIデザインシステムを構築したりするのに理想的です。

カスタム要素は、メインドキュメント、CMS、Markdown、またはReactやVueのようなフレームワークで構築されたビューなど、HTMLを使用する場所ならどこでも使用できます。また、LitElementコンポーネントを、バニラウェブテクノロジーを使用して作成されたか、Salesforce Lightning Web Components、IonicのStencil、SkateJS、またはPolymerライブラリのようなツールを使用して作成されたかに関わらず、他のWebコンポーネントと組み合わせて使用することもできます。

lit-htmlとLitElementを試してみませんか？まず、LitElementチュートリアルから始めるのがおすすめです。

• LitElementを試す

lit-html単体で使用したり、lit-htmlテンプレートを別のプロジェクトに統合したりすることに興味がある場合は、lit-htmlドキュメントを参照してください。

• lit-htmlドキュメント

いつものように、ご意見をお聞かせください。DiscordまたはTwitterでお問い合わせいただけます。私たちのプロジェクトはオープンソース（もちろん！）であり、GitHubでバグを報告したり、機能リクエストを送信したり、改善点を提案したりできます。

• GitHubのlit-html
• GitHubのLitElement