本日、2 つの次世代ウェブ開発ライブラリ（lit-html と LitElement）の最初の安定版をリリースすることをお知らせします。
lit-html は、HTML テンプレート用の小型で高速で表現力豊かなライブラリです。LitElement は、lit-html テンプレートを使用してウェブ コンポーネントを作成する単純なベースクラスです。
これらのプロジェクトをフォローしている場合は、lit-html と LitElement についてご存じでしょう（必要に応じて最後までスキップできます）。lit-html と LitElement を初めて使用する場合は、概要をご覧ください。
lit-html: HTML テンプレート用の小型で高速なライブラリ
lit-html は、HTML テンプレート用の小さな（バンドル、圧縮、gzip で 3,000 強）高速な 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: 軽量なウェブ コンポーネントのベースクラス
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>
すでにウェブ コンポーネントを使用している場合は、Chrome、Safari、Firefox でネイティブにサポートされていることをご存じでしょうか。Edge のサポートは近日提供予定です。ポリフィルは以前のブラウザ バージョンでのみ必要です。
ウェブ コンポーネントを初めて使用する場合は、ぜひお試しください。ウェブ コンポーネントを使用すると、他のライブラリ、ツール、フレームワークと相互運用する方法で HTML を拡張できます。そのため、大規模な組織内で UI 要素を共有したり、ウェブ上のどこでも使用できるようにコンポーネントを公開したり、マテリアル デザインなどの UI デザイン システムを構築したりするのに適しています。
カスタム要素は、HTML を使用するすべての場所で使用できます。メインドキュメント、CMS、Markdown、React や Vue などのフレームワークで構築されたビューで使用できます。また、LitElement コンポーネントを他のウェブ コンポーネントと組み合わせて使用することもできます。これらのコンポーネントは、標準のウェブ技術を使用して記述することも、Salesforce Lightning Web Components、Ionic の Stencil、SkateJS、Polymer ライブラリなどのツールを使用して作成することもできます。
使ってみる
lit-html と LitElement を試してみたい場合は、最初に LitElement チュートリアルを参照することをおすすめします。
lit-html を単独で使用する場合や、lit-html テンプレートを別のプロジェクトに統合する場合は、lit-html のドキュメントをご覧ください。
いつもご協力いただきありがとうございます。ご意見やご感想をお寄せください。Slack または Twitter からお問い合わせください。プロジェクトは（もちろん）オープンソースです。バグの報告、機能リクエスト、改善案の提案は GitHub で行うことができます。