このブログ シリーズの目的は、Lit ライブラリを深く掘り下げ、その独自の機能と市場の他のライブラリやフレームワークとの違いを包括的に理解することです。

このシリーズは 3 つのパートに分かれており、 1. lit-html はどのように機能するか? などのトピックを扱います。
2. Lit Element は DOM でバッチ更新をどのように実行しますか?
3. Lit と他のフレームワークおよびライブラリとの比較およびベンチマーク、およびその潜在的な使用例。

この特定のブログでは、lit-html とその内部動作の探索に焦点を当てます。ただし、lit-html について詳しく説明する前に、まず Lit ライブラリ自体の概要を理解しましょう。

リットとは何ですか？

Lit は、約 5KB の小さなフットプリントを備えた軽量の Web コンポーネント ライブラリです。

Web コンポーネント仕様を使用して UI コンポーネントを効率的かつ迅速に開発できるように特別に設計されており、DOM へのバッチ更新を導入することでパフォーマンスがさらに向上します。

実際、によって実施された公開ベンチマークによると、https://krausest.github.io/js-framework-benchmark/index.html, Lit Element は React と比較して高速なパフォーマンスを実証しました。

Lit Element について詳しくは、次の公式 Web サイトをご覧ください。https://lit.dev/。ただし、このシリーズの焦点は、Lit Element がどのように機能し、どのように実装されるかを理解することです。

Lit Element は、テンプレートの作成とバッチ DOM 更新ロジックに使用されるテンプレート ライブラリである lit-html 上に構築されています。Lit Element は、バッチ更新のための追加機能を提供することにより、lit-html を拡張します。

lit-html テンプレートの作成:

lit-html は、ネイティブ JavaScript 機能と Web コンポーネントを活用して、JavaScript タグ付きリテラルとタグ関数を使用してテンプレートを作成できるようにする JavaScript テンプレート ライブラリです。

JSX や他のテンプレート ライブラリとは異なり、lit-html はネイティブ JavaScript 機能を直接利用するため、フレームワーク固有のテンプレートまたは構文をブラウザ互換のテンプレートまたは構文に変換するためのビルド ステップを必要としません。

lit-html ライブラリを使用してテンプレートを作成しましょう。

この例では、lit-html ライブラリから 2 つの関数をインポートします。1
.htmlはタグ関数です。
2. render、テンプレートを DOM にレンダリングするために使用されます。

myTemplate次に、引数を取るという関数を定義しますname。

テンプレートはhtmlタグ関数を使用して定義され、バックティック (``) で囲まれており、HTML スニペットが含まれています<div>Hello, ${name}</div>。

は、${name}関数に渡された引数に基づいて、実行時に動的に値に置き換えられるプレースホルダーですmyTemplate。

タグ関数は、DOM にレンダリングできるテンプレートを表すオブジェクトをhtml返します。TemplateResult

次のセクションでは、JavaScript タグ関数と、html タグ関数が lit-html ライブラリにどのように実装されるかについて説明します。

renderコードの最後の行では、テンプレートをレンダリングするメソッドを呼び出しています。
このrenderメソッドは 2 つの引数を受け入れます:
a)TemplateResultレンダリングされるテンプレートを表すオブジェクト。
b) テンプレートがレンダリングされる DOM 要素への参照。

JavaScript のタグ関数:

注:タグ関数にすでに慣れている場合は、このセクションをスキップできます。

JavaScript のタグ関数は、バックティック (``) で囲まれた文字列であるテンプレート リテラルを処理するために使用できる特殊なタイプの関数です。

タグ関数は、テンプレート リテラルが評価される直前に呼び出され、テンプレート リテラルとその補間値を別の引数として受け取ります。

たとえば、次のコードを考えてみましょう。

var name = "Whatfix";
function sayHello(literalString, ...values) {
    console.log(literalString); //Output: ['Hello, ', '', raw: Array(2)]
    console.log(values); //Output: ['Whatfix']
}
sayHello`Hello, ${name}`;

ａ．テンプレート リテラルの静的部分の配列: literalString。この例では、パラメータ
の値は次のとおりです。literalString['Hello, ', '', raw: Array(2)]

b. タグ付きリテラル内の式の数に対応する 1 つ以上の引数: values。この例では、スプレッド演算子 ( ...) を使用して配列として表しています。その値は で['Whatfix']、テンプレート リテラルで使用される式の値が含まれます。

HTML メソッドの詳細:

htmlリポジトリからのタグ関数の実装は次のとおりですlit-html。https://github.com/lit/lit。(わかりやすくするために不要な部分を削除するなど、コードにいくつかの改良を加えました)。

const html =
  <T extends ResultType>(type: T) =>
  (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult<T> => {
    return {
      ['_$litType$']: type,
      strings,
      values,
    };
  };

次に、 というオブジェクトをTemplateResult3 つのパラメータで形成し、それを返します。

の 3 つのパラメータには、TemplateResult_$litType$、strings、values[] が含まれます。

ａ．_$litType$ パラメータにはタイプが含まれます。
b. strings パラメーターは、リテラルの静的部分の配列を保持します。
c. value[] パラメータには、リテラルの動的部分の値が含まれます。

前の例 (テンプレート — A) では、myTemplate("whatfix”)メソッドは次を返します。

{
  _$litType$: 1,
  strings: ["<div>Hello, ", "</div>", raw: Array(2)],
  values: ["whatfix"]
}

render メソッドについて詳しく説明します。

lit-html の render メソッドは、UI でコンポーネントをレンダリングする役割を果たします。
3 つの引数を受け入れます。

ａ．value —TemplateResult前のセクションで説明したように、html タグ関数によって生成されるA。

b. コンテナ — テンプレートがレンダリングされる DOM 要素への参照。

c. オプション — プロセスをよりよく理解するために、簡素化のためにこの引数を無視できます。

フローチャートを利用することで、この例の render メソッドの動作を視覚的に理解できます。

次に、前述のフローチャートを使用して、サンプル コンポーネントであるテンプレート A を処理しましょう。前のセクションで説明したように、html タグ関数を使用してオブジェクトをすでに生成しているためTemplateResult、レンダリング プロセスに進むことができます。

サンプル コンポーネントのオブジェクトTemplateResultであるテンプレート A は、次の構造になります。

<template>次のステップでは、オブジェクトから要素を生成しますTemplateResult。
この例のコンポーネントであるテンプレート A では、 で表される動的部分が含まれており{name}、9 桁のランダムな数値を生成し、それを の代わりにコメント ノードとして追加しています{name}。
その結果、<template>要素は次のように表示されます。