IE サポート終了でWeb Componentsもいよいよ実用フェーズかと Web Components 開発用ライブラリLitのドキュメントに目を通していて、これはDenoを使えばお手軽なのでは?とひらめき試してみたところあっけなく成功したので共有。
Deno をインストール
まず Deno をインストールしていなければインストールします。 Windows なら Windows パッケージ マネージャー(winget) でインストールできればお手軽なのですが、残念ながらまだ存在しません(Release Builds on WinGet Pkgs · Issue #5640 · denoland/deno)。私はChocolateyでインストールしています。 ドキュメントを参考に、お好みのやりかたでどうぞ。
2023-09-24(Sun)追記: Windows パッケージ マネージャー(winget)でもインストールできるようになったので記述を更新しました。
Packup をインストール
次にゼロコンフィグのフロントエンド開発ツールPackupをインストールします。ドキュメントにしたがって作業すればよいですが、Windows だとパスの追加が自動では行われないようなのでその点だけ注意が必要です(インストールのログ、ぼんやりと眺めていただけなので危うく気づき損ねるところでした……)。
Lit で Web Components を定義
準備が整ったので、Lit で Web Components を定義した TypeScript ファイルを作成します。Lit のインポート先はesm.shにしてみました。
// @deno-types="https://esm.sh/v94/[email protected]/es2022/lit.d.ts"
import { LitElement, html } from 'https://esm.sh/[email protected]'
// @deno-types="https://esm.sh/v94/[email protected]/es2022/decorators.d.ts"
import { customElement } from 'https://esm.sh/v94/[email protected]/decorators'
@customElement('simple-lit-component')
export class SimpleLitComponent extends LitElement {
render() {
return html`<p>Welcome to Lit!</p>`
}
}
HTML を作成
最後に定義した Web Components をマークアップで利用する HTML ファイルを作成します。
<html>
<head>
<script type="module" src="components.ts"></script>
<title>Web components</title>
</head>
<body>
<h1>Web components</h1>
<simple-lit-component />
</body>
</html>
<simple-lit-component /> は Lit で定義した Web Components カスタム要素です。Web Components が機能しなければ無視されます(=何も表示されない)。
表示してみる
作成した HTML ファイルを Packup の開発サーバー機能で表示すると、バンドルと実行の結果<simple-lit-component />でマークアップした箇所に Welcome to Lit! と表示されます。
これだけ
本格的な Web アプリケーション開発でテストコードも書くとなるとやること・考えることはまだまだたくさんありますが、基本的には静的な Web サイトでこまかい要素をちょっと共通化したいみたいなユースケースならこれで十分ではないかという気がします。皆様これを機にお気軽に Web Components の利用をはじめてみてはいかがでしょうか。