@tenoriin

SvelteでWeb Componentsを作ろう

Last updated at 2024-08-01Posted at 2024-07-30

viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方はこちらまで。

Web Componentsって何？

Web Componentsは、再利用可能なカスタム要素を作成するための一連の技術です。

主に「Custom elements」「Shadow DOM」「HTML templates」から成り、それらを組み合わせてカスタム要素を作成します。

これらの技術はW3Cで標準化されており、コンポーネント化されたカスタム要素はライブラリに依存せず利用できます。

Web Componentsを利用するメリット

Web Componentsを使う上で、以下のようなメリットがあります。

ライブラリに依存しない
- Web Componentsはライブラリに依存せず利用できる
- ライブラリの流行り廃りに依存しないので将来性がある
再利用性が高い
- 依存性が低いため、他のプロジェクトでも利用しやすい
互換性が高い
- Web Componentsは標準化されているため、ブラウザ間の互換性が高い
- ポリフィルを使うことで古いブラウザでも利用できる
保守性が高い
- Web Componentsはカプセル化されているため、他のコンポーネントに影響を与えにくい
- コンポーネントごとにファイルを分割することで保守性が高まる

最小限の実装でWeb Componentsを作る

Web Componentsの実装を理解するために、最小限の実装でWeb Componentsを作ってみます。

以下の例では、<hello-world>というWeb Componentsを作成します。

<hello-world></hello-world>

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.textContent = "Hello, World!";
  }
}

customElements.define("hello-world", MyElement);

See the Pen Web Component Example1 by tenori (@tenorichan) on CodePen.

HTMLElementを継承したclassを用意
constructorメソッドでカスタム要素の初期化
this.textContentでカスタム要素にテキストを追加
customElements.defineメソッドでカスタム要素とclassを紐付ける

以上の手順で、Hello, World!と表示されるだけの<hello-world>コンポーネントを作成できました

このように、Web Componentsは簡単な実装でカスタム要素を作成できます。

一方で動的な値を扱ったり複雑なUIを実装する場合に、これらの生APIを用いて実装をすると、途端にコードが複雑になります。

そのため、Web Componentsをより簡単に実装するために、フレームワークやライブラリを利用するのが一般的です。

代表的なライブラリとしては、LitやStencilがあります。どちらもAngularのような書き心地で、classベースのAPIとデコレータを用いてWeb Componentsを作成できます。

他にも、オススメの選択肢としてSvelteを用いたWeb Components開発があります。

Svelteで作るWeb Components

Svelteは、記述量が少なくシンプルな構文でWebアプリケーションを作成できるフレームワーク（もしくはコンパイラー）です。

Svelteで記述したコンポーネントはWeb Componentsとして出力できます。また、Svelteのコアランタイムは非常に軽量で、バンドルサイズも小さいため、Web Componentsとして提供する際にも適しています。

ここからは、Svelteを使ってWeb Componentsを作成する手順を紹介します。

環境準備

セットアップはViteのテンプレートを使って行います。以下のコマンドを実行して、プロジェクトを作成します。

npm create vite@latest my-web-components -- --template svelte-ts
cd my-web-components

コンポーネントを作成

今回はViteでテンプレートを利用した際に存在するsrc/lib/Counter.svelteを使って、Web Componentsを作成します。

このコンポーネントは、クリック数を記録する変数があり、クリックされるたびにカウントアップします。

src/lib/Counter.svelte

<script lang="ts">
  let count: number = 0
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  count is {count}
</button>

SvelteでWeb Componentsを作る場合、<svelte:options>タグを追加し、customElement属性でコンポーネントのタグ名を指定します。

src/lib/Counter.svelte

<svelte:options customElement="my-counter" />

<script lang="ts">
  let count: number = 0
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  count is {count}
</button>

SvelteコンポーネントをWeb Componentsとして扱う為のコンポーネント側の設定は、これで終わりです。

Web Componentsとして出力

次に、ビルド設定を変更します。

アプリを構成する諸々の設定は不要なので、src/main.tsの記述を削除して、Counter.svelteのみをエクスポートするようにします。

src/main.ts

export * from "./lib/Counter.svelte";

次にsvelte.config.jsのcompilerOptions.customElementをtrueに設定します。

svelte.config.js

import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

export default {
	preprocess: vitePreprocess(),
	compilerOptions: {
		customElement: true,
	},
};

最後にViteライブラリモードを使ってWeb Componentsを単一のjsファイルとして出力します。

vite.config.tsを以下のように設定します。

vite.config.ts

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
	build: {
		lib: {
			entry: "./src/main.ts",
			name: "my-components",
			fileName: (format) => `my-components.${format}.js`,
		},
	},
  plugins: [svelte()],
})

これで、npm run buildを実行すると、以下のファイルが出力されます。

dist/my-components.es.js
dist/my-components.umd.js

Web Componentsを利用

前項で出力したjsファイルをHTMLファイルで読み込み、Web Componentsとして利用してみます。

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte + TS</title>
  </head>
  <body>
    <my-counter></my-counter>
    <script src="/dist/my-components.umd.js"></script>
  </body>
</html>