Web Componentsを簡単に便利に扱うライブラリ「Lit」とは？【うまく活用する方法を紹介】

再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ 第3回

　Web Componentsの各種APIを扱って運用することはもちろん可能ですが、簡便に扱うためのライブラリも開発されています。そのうちの一つとして、今回はLitについて解説します。すっきりと整理されたAPIでWeb Componentsを扱える様子を見ていきましょう。

対象読者

• 再利用可能なHTMLやCSSを整備したいJavaScriptエンジニア

前提環境

　筆者の検証環境は以下の通りです。

• macOS Monterey 12.6
• Google Chrome 106.0.5249.119
• Lit 2.4.0

Web Componentsの要素技術をまとめて扱いたい

　前回は、Web Componentsの要素技術をひと通り確認しました。カスタム要素、シャドウDOM、テンプレートという3つの要素技術を組み合わせることで、再利用可能なHTMLタグを自作できます。

　これまで学んできた内容でも、ある程度は活用できそうですが、少し煩雑さは否めません。特に、テンプレートとシャドウDOMを連携させる部分については、文書構造とデータ処理を離れた場所に定義することになることもあり、見通しが悪くなりがちです。また、ユーザー操作によって動的に表示を切り替える方法も、あまり直感的ではありませんでした。

　こういった課題を解決するために、Web Componentsを簡便に扱えるライブラリが作られました。今回は、導入の簡単さを鑑みて、Google製のLitというライブラリを例に挙げて、Web Components煩雑さを抑えつつ、活用する方法について解説していきます。

Litとは

　Lit（リット）は、Googleが開発している、Web Componentsでの開発を簡便にするためのライブラリです。

• https://lit.dev/

図1：LitのWebページ

　煩雑な定型文を可能な限り排して便利に使えること（Simple）、軽量・高速であること（Fast）、Web Componentsの仕様に沿って動作すること、の3つが特徴として挙げられています。

　利用する際には、通常のWeb Componentsと同様に、JavaScriptのクラス構文でカスタム要素の振る舞いを記述します。特徴的な点としては、クラス構文の中にWeb Componentsを成立させるための全ての要素を記述することが挙げられます。公式ドキュメントのトップページに、Litを使ってカスタム要素を組み上げる場合の好例がありますので、見てみましょう（リスト1）。

［リスト1］Litのサンプル

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement { // (1) LitElementを継承する
  // (3) シャドウDOM内で有効なCSSをstaticプロパティとして定義できる
  static styles = css`p { color: blue }`;

  // (4) UIの更新に利用できるパラメータ
  static properties = {
    name: {type: String},
  };

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

  render() {
    // (5) 宣言的なテンプレート
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

// (2) LitElementで作成したクラスはカスタム要素である
customElements.define('simple-greeting', SimpleGreeting);

　素のAPIでカスタム要素を作る場合は HTMLElement を継承したクラスを加工していましたが、Litでカスタム要素を作る場合は（1）のように LitElement を継承したクラスを操作していくことになります。 LitElement は完全に独自のものではなく HTMLElement を継承しており、本物のカスタム要素として振る舞うので、（2）のように customElements.define() でブラウザに登録できます。

　クラスの登録方法は素のAPIと同じですが、クラス内の実装は大きく異なります。まず、カスタム要素内だけで使えるCSS（Scoped CSS）が、（3）のように styles という名前のstaticプロパティとして定義できます。

　次に、UIを更新するためのパラメータは、（4）のように properties というstaticプロパティで定義します。 properties を定義すると、カスタム要素を使うときに <simple-greeting name="World"></simple-greeting> の name のような属性として利用できます。そして最後に、 LitElement の最大の特徴として、（5）のように render() メソッドでテンプレートを定義できる、という機能があります。 render() の戻り値として記述したテンプレートがそのままUIになるので、UIの更新は、テンプレートにどんな値を埋め込むかを意識しながら処理していくことになります。

　このように、 HTMLElement よりも簡潔にカスタム要素を定義できるのが、Litを使うメリットの一つです。

開発の前に準備すること

　さて、これからLitを実際に動かしながら体験していただきますが、その前に、可能であれば準備しておいてほしいことがあります。それは、エディタへのプラグイン導入です。Litで開発作業を行うために必要なものの大部分は、JavaScriptの文法の知識です。しかし、一箇所だけ、エディタを標準の挙動のままにしておくと困る部分があります。それは、 render() の戻り値にしている、テンプレート部分の記述です（図2）。

図2：テンプレートにはシンタックスハイライトが効かない

　html とバッククォートで囲まれたテンプレートは、テンプレートリテラルと呼ばれる文字列表現です。プレースホルダ記法（ ${変数名} ）で変数を埋め込めるような、特殊な文字列ではありますが、シンタックスハイライト（プログラムを見やすくするために、文法に沿った着色を行う機能）はあくまでもただの文字列として認識するため、 <p> のようなHTMLタグ部分が他の文字列と同じ色になってしまっています。

　プログラムを書く側の意識としてはHTMLとして書いているので、エディタ側でHTMLらしい着色をしてほしいところですよね。ご安心ください、Visual Studio CodeやVimといった有名エディタ向けに、シンタックスハイライトのためのプラグインが公開されています。代表的なものを2つ挙げておきます。

• Visual Studio Code
• Vim

　これらのプラグインを入れておくことで、テンプレートリテラル内のHTMLにも適切な着色が行われるようになります。Visual Studio Codeに導入した場合は、図3のようになります。

図3：シンタックスハイライトが効くようになった

　HTMLらしい見た目になりましたね。これなら目が泳がずにプログラムを書き進められそうです。