対象読者
- 再利用可能な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での開発を簡便にするためのライブラリです。
煩雑な定型文を可能な限り排して便利に使えること（Simple）、軽量・高速であること（Fast）、Web Componentsの仕様に沿って動作すること、の3つが特徴として挙げられています。
利用する際には、通常のWeb Componentsと同様に、JavaScriptのクラス構文でカスタム要素の振る舞いを記述します。特徴的な点としては、クラス構文の中にWeb Componentsを成立させるための全ての要素を記述することが挙げられます。公式ドキュメントのトップページに、Litを使ってカスタム要素を組み上げる場合の好例がありますので、見てみましょう（リスト1）。
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）。
html とバッククォートで囲まれたテンプレートは、テンプレートリテラルと呼ばれる文字列表現です。プレースホルダ記法（ ${変数名} ）で変数を埋め込めるような、特殊な文字列ではありますが、シンタックスハイライト（プログラムを見やすくするために、文法に沿った着色を行う機能）はあくまでもただの文字列として認識するため、 <p> のようなHTMLタグ部分が他の文字列と同じ色になってしまっています。
プログラムを書く側の意識としてはHTMLとして書いているので、エディタ側でHTMLらしい着色をしてほしいところですよね。ご安心ください、Visual Studio CodeやVimといった有名エディタ向けに、シンタックスハイライトのためのプラグインが公開されています。代表的なものを2つ挙げておきます。
これらのプラグインを入れておくことで、テンプレートリテラル内のHTMLにも適切な着色が行われるようになります。Visual Studio Codeに導入した場合は、図3のようになります。
HTMLらしい見た目になりましたね。これなら目が泳がずにプログラムを書き進められそうです。
