高速のテンプレートとウェブ コンポーネント - lit-html と LitElement

本日、2 つの次世代ウェブ開発ライブラリ、lit-htmlLitElement の最初の安定版リリースを発表いたします。

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

プロジェクトをフォローしたことがある方は、lit-html と LitElement についておなじみのはずです(必要に応じて最後までスキップできます)。lit-html と LitElement を初めて使用する場合は、概要をお読みください。

lit-html: HTML テンプレート作成のための小規模で高速なライブラリ

lit-html は、HTML テンプレートを作成するための小さな(3,000 以上のバンドル、圧縮、gzip 圧縮済み)高速な JavaScript ライブラリです。関数型プログラミングのアプローチでうまく機能するため、アプリケーションの 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: 軽量なウェブ コンポーネントの基本クラス

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

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

TypeScript の単純な LitElement コンポーネントを次に示します。

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

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

(また、優れた標準 JavaScript API も提供されています)。

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

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

Web Components をすでにお使いの方には、Chrome、Safari、Firefox でネイティブにサポートされるようになりましたので、ご安心ください。Edge サポートは近日提供予定であり、ポリフィルは従来のブラウザ バージョンでのみ必要です。

Web Components を初めて使用する場合は、ぜひお試しください。ウェブ コンポーネントを使用すると、他のライブラリ、ツール、フレームワークと相互運用する方法で HTML を拡張できます。そのため、大規模な組織内で UI 要素を共有する場合や、ウェブ上の任意の場所で使用するコンポーネントを公開する場合、マテリアル デザインなどの UI デザイン システムを構築する場合に最適です。

カスタム要素は、メイン ドキュメント、CMS、マークダウン内、または React や Vue などのフレームワークで構築されたビュー内で、HTML を使用する場所であればどこでも使用できます。また、LitElement コンポーネントと他のウェブ コンポーネントを組み合わせることもできます。一般的なウェブ コンポーネントには、標準のウェブ テクノロジーで作成されたものでも、Salesforce Lightning Web Components、Ionic の StencilSkateJSPolymer ライブラリのようなツールを使用したものもあります。

使ってみる

lit-html と LitElement では、最初に、LitElement のチュートリアルをご覧ください。

lit-html を単独で使用する場合、または lit-html テンプレートを別のプロジェクトに統合する場合は、lit-html のドキュメントをご覧ください。

ご意見、ご感想をぜひお聞かせください。Slack または Twitter でお問い合わせください。Google のプロジェクトはもちろんオープンソースです。GitHub では、バグの報告、機能リクエストの提出、改善の提案を行うことができます。