SvelteKitでWebコンポーネントを作成する：ステップバイステップの完全ガイド

SvelteKitを使ってWebコンポーネントを作成する

SvelteKitでWebコンポーネントを作成するには、新しいプロジェクトを初期化します：

npx sv create example-webcomponent
cd example-webcomponent
npm run dev

プロジェクトの設定

インストール時に、次のオプションを選択します：

• 最小限のSvelteKit
• TypeScript
• PrettierとESLint（推奨）
• npm

ローカルでプロジェクトを起動する

インストールが完了したら、次のアドレスでブラウザを開きます：

http://localhost:5173/

ページが正しく表示されれば、あなたのSvelteKitプロジェクトはWebコンポーネントを作成する準備が整いました。

SvelteKitにSCSSをインストールする

SvelteKitプロジェクトでSCSSを使用するには、Sassコンパイラを開発依存関係としてインストールする必要があります：

npm install -D sass-embedded

インストールが完了すると、SvelteKitは自動的に.svelteファイル内の<style lang="scss">タグを通じてSCSSを検出します。

SvelteKitでWebコンポーネントを作成する

これからSvelteKitを使って最初のWebコンポーネントを作成します。まず、src/libフォルダーにファイルを作成してください：

touch src/lib/my-web-component.svelte

次に、以下のコードを追加します：

<svelte:options customElement="my-web-component" />

<script lang="ts">
</script>

<p>こんにちは、世界</p>

<style lang="scss">
  p {
    color: red;
  }
</style>

👉 属性customElement="my-web-component"は、あなたのWebコンポーネントの名前を定義します。この名前は必ずハイフンを含む必要があります（例：my-component）HTMLで有効であるためには。

SvelteKit を Web コンポーネントに設定する

SvelteKit で Web コンポーネントの作成を有効にするには、svelte.config.js ファイルを編集し、customElement オプションを有効にする必要があります。

次の設定を追加してください：

compilerOptions: {
  customElement: true
}

こちらが設定の完全な例です：

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },
  vitePlugin: {
    dynamicCompileOptions: ({ filename }) =>
      filename.includes('node_modules') ? undefined : { runes: true }
  },
  compilerOptions: {
    customElement: true
  }
};

export default config;

👉 customElement: true オプションを使用すると、SvelteKit はコンポーネントをネイティブ Web コンポーネントにコンパイルし、任意の環境で使用できるようになります。

Viteを使ったウェブコンポーネントのビルドの設定

再利用可能なウェブコンポーネントを生成するには、Viteを使って特定のビルドを設定する必要があります。これにより、任意のプロジェクトで使用できるJavaScriptファイルとしてコンポーネントをエクスポートできます。

専用の設定ファイルを作成します：

touch vite.config.webcomponent.js

次の設定を追加します：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { name, version } from './package.json';

export default defineConfig({
  plugins: [svelte()],
  publicDir: 'playground',
  build: {
    lib: {
      entry: './src/lib/my-web-component.svelte',
      fileName: `${name}-${version}`,
      name,
      formats: ['es']
    },
    outDir: 'static/webcomponent',
    minify: 'esbuild'
  }
});

ビルドスクリプトを追加する

次のスクリプトをpackage.jsonファイルに追加します：

"build:wc": "vite build -c vite.config.webcomponent.js"

次に、以下のコマンドでウェブコンポーネントを生成できます：

npm run build:wc

SvelteKitでWebコンポーネントをテストする

ビルドが生成されると、SvelteKitプロジェクト内でWebコンポーネントを直接テストできます。

スクリプトのインポート

+page.svelteファイルで、<svelte:head>タグ内に生成されたスクリプトを追加します：

<svelte:head>
  <script type="module" src="/webcomponent/example-webcomponent-0.0.1.js"></script>
</svelte:head>

Webコンポーネントの使用

次に、テンプレート内にあなたのコンポーネントを追加します：

<my-web-component></my-web-component>

完全な例

<svelte:head>
  <script type="module" src="/webcomponent/example-webcomponent-0.0.1.js"></script>
</svelte:head>

<h1>SvelteKitへようこそ</h1>
<p>
  ドキュメントを読むには <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> を訪れてください
</p>

<my-web-component></my-web-component>

プロジェクトを実行する

次のコマンドを実行してください：

npm run build:wc
npm run dev

すべてが正しく設定されていれば、あなたのWebコンポーネントがページに表示されるはずです。

SvelteKitのWebコンポーネントにプロパティ（props）を追加する

プロパティ（props）を渡すことで、Webコンポーネントを動的にすることができます。

コンポーネントでのプロパティの定義

あなたのファイル my-web-component.svelte の中で：

let { name = 'World' } = $props();

テンプレートでのプロパティの使用

<p>Hello {name}</p>

完全なコンポーネント

<svelte:options customElement="my-web-component" />

<script lang="ts">
  let { name = 'World' } = $props();
</script>

<p>Hello {name}</p>

<style lang="scss">
  p {
    color: red;
  }
</style>

HTMLでのプロパティの使用

HTMLから直接値を渡すことができます：

<my-web-component name="Bryan"></my-web-component>

👉 表示されるテキストは次のようになります： Hello Bryan

WebコンポーネントでJavaScriptのメソッド（API）を公開する

外部（JavaScript、フレームワーク、またはHTML）からWebコンポーネントと対話するために、JavaScriptのメソッドを公開できます。

この例では、プロパティnameを操作するためのゲッターとセッターを作成します。

メソッドを作成する

const getName = (): string => {
  return name;
};

const setName = (newName: string) => {
  name = newName;
};

Webコンポーネントを介してメソッドを公開する

$host()を使用してDOM要素にメソッドをアタッチします：

$effect(() => {
  const host = $host();

  Object.assign(host, {
    getName,
    setName
  });
});

完全なコンポーネント

<svelte:options customElement="my-web-component" />

<script lang="ts">
  let { name = 'World' } = $props();

  const getName = (): string => {
    return name;
  };

  const setName = (newName: string) => {
    name = newName;
  };

  $effect(() => {
    const host = $host();

    Object.assign(host, {
      getName,
      setName
    });
  });
</script>

<p>こんにちは {name}</p>

<style lang="scss">
  p {
    color: red;
  }
</style>

JavaScriptからメソッドを使用する

外部スクリプトからWebコンポーネントと対話できるようになりました：

const el = document.querySelector('my-web-component');

// 値を変更する
el.setName('Bryan');

// 値を取得する
console.log(el.getName());

👉 このアプローチにより、Webコンポーネントに対する真のJavaScript APIを作成できます。

SvelteKitからWebコンポーネントとインタラクションする

SvelteKitからJavaScriptのリファレンスを介してWebコンポーネントのメソッドに直接アクセスすることができます。

コンポーネントへのリファレンスを宣言する

let wc: HTMLElement;

Webコンポーネントをバインドする

bind:thisを使用して、コンポーネントへのリファレンスを取得します：

<my-web-component bind:this={wc} name="User"></my-web-component>

TypeScriptの型を追加する（推奨）

IDE内でのエラーを回避するために、公開されたメソッドに型を付けることができます：

let wc: HTMLElement & {
  getName: () => string;
  setName: (newName: string) => void;
};

コンポーネントとのインタラクション

その後、onMountライフサイクル内でメソッドを呼び出すことができます：

import { onMount } from 'svelte';

onMount(() => {
  console.log('現在の名前:', wc.getName());

  setTimeout(() => {
    console.log('== 名前を変更 ==');
    wc.setName('Admin');
    console.log('現在の名前:', wc.getName());
  }, 1000);
});

完全な例

<script lang="ts">
  import { onMount } from 'svelte';

  let wc: HTMLElement & {
    getName: () => string;
    setName: (newName: string) => void;
  };

  onMount(() => {
    console.log('現在の名前:', wc.getName());

    setTimeout(() => {
      console.log('== 名前を変更 ==');
      wc.setName('Admin');
      console.log('現在の名前:', wc.getName());
    }, 1000);
  });
</script>

<svelte:head>
  <script type="module" src="/webcomponent/example-webcomponent-0.0.1.js"></script>
</svelte:head>

<h1>SvelteKitへようこそ</h1>
<p>
  ドキュメントを読むには<a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a>をご覧ください
</p>

<my-web-component bind:this={wc} name="User"></my-web-component>

コンソールの結果

現在の名前: User
== 名前を変更 ==
現在の名前: Admin

👉 Webコンポーネントは動的に更新され、変更はDOMとコンソールの両方に表示されます。

SvelteKitのWebコンポーネントでスロットを使用する

スロットは、外部からHTMLコンテンツをWebコンポーネントに注入することを可能にします。これは、コンポーネントを柔軟で再利用可能にするために重要です。

コンポーネントにスロットを追加する

あなたのファイルmy-web-component.svelteに、単に追加してください：

<slot />

テンプレートを修正する

例えば、次のように置き換えます：

<p>Hello {name}</p>

以下のように：

<p>Before Hello {name}</p>
<slot />
<p>After Hello {name}</p>

完全なコンポーネント

<svelte:options customElement="my-web-component" />

<script lang="ts">
  let { name = 'World' } = $props();

  const getName = (): string => {
    return name;
  };

  const setName = (newName: string) => {
    name = newName;
  };

  $effect(() => {
    const host = $host();

    Object.assign(host, {
      getName,
      setName
    });
  });
</script>

<p>Before Hello {name}</p>
<slot />
<p>After Hello {name}</p>

<style lang="scss">
  p {
    color: red;
  }
</style>

SvelteKitのページからコンテンツを渡す

これで、Webコンポーネントに直接コンテンツを注入できるようになりました：

<my-web-component bind:this={wc} name="User">
  <p>新しいコンテンツ</p>
</my-web-component>

SvelteKitでの完全な例

<script lang="ts">
  import { onMount } from 'svelte';

  let wc: HTMLElement & {
    getName: () => string;
    setName: (newName: string) => void;
  };

  onMount(() => {
    console.log('現在の名前:', wc.getName());

    setTimeout(() => {
      console.log('== 名前を変更 ==');
      wc.setName('Admin');
      console.log('現在の名前:', wc.getName());
    }, 1000);
  });
</script>

<svelte:head>
  <script type="module" src="/webcomponent/example-webcomponent-0.0.1.js"></script>
</svelte:head>

<h1>SvelteKitへようこそ</h1>
<p>
  ドキュメントを読むには<a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a>を訪れてください
</p>

<my-web-component bind:this={wc} name="User">
  <p>新しいコンテンツ</p>
</my-web-component>

👉 Webコンポーネントのタグ間に渡されたコンテンツは、<slot />の場所に注入されます。

SvelteKitでWebコンポーネントに画像を追加する

SvelteKitを使用してWebコンポーネントに画像を統合するには、直接staticフォルダーを使用することはできません。画像をモジュールとしてインポートする必要があり、ビルドに正しく含まれるようにします。

画像をインポートする

あなたのコンポーネントmy-web-component.svelteで：

import logo from './assets/favicon.svg';

テンプレートで画像を使用する

<img src={logo} alt="SvelteKitロゴ" />

完全なコンポーネント

<svelte:options customElement="my-web-component" />

<script lang="ts">
  import logo from './assets/favicon.svg';

  let { name = 'World' } = $props();

  const getName = (): string => {
    return name;
  };

  const setName = (newName: string) => {
    name = newName;
  };

  $effect(() => {
    const host = $host();

    Object.assign(host, {
      getName,
      setName
    });
  });
</script>

<img src={logo} alt="SvelteKitロゴ" />

<p>Helloの前 {name}</p>
<slot />
<p>Helloの後 {name}</p>

<style lang="scss">
  p {
    color: red;
  }
</style>

👉 画像は自動的に最適化され、Webコンポーネントの最終バンドルに含まれます。

スヴェルトキットのウェブコンポーネントのイベントをリスニングする

ウェブコンポーネントからアプリケーションに通信するために、カスタムイベント（CustomEvent）を発行し、クライアント側でリスニングすることができます。

コンポーネント内でイベントを作成する

コンポーネントにボタンと関数を追加します：

<button on:click={handleClick}>テスト</button>

const handleClick = () => {
  const event = new CustomEvent('test', {
    detail: {
      name
    }
  });

  $host().dispatchEvent(event);
};

イベントをリスニングするためのAPIを作成する

イベントをリスニングするために、onメソッドを公開することができます：

const on = (event: string, callback: Function) => {
  $host().addEventListener(event, (e: any) => callback(e.detail));
};

メソッドを公開する

$effect(() => {
  const host = $host();

  Object.assign(host, {
    getName,
    setName,
    on
  });
});

スヴェルトキット側での型更新

let wc: HTMLElement & {
  getName: () => string;
  setName: (newName: string) => void;
  on: (event: string, callback: Function) => void;
};

ページ内でイベントをリスニングする

wc.on('test', (detail: { name: string }) => {
  console.log(detail);
});

スヴェルトキットの完全な例

<script lang="ts">
  import { onMount } from 'svelte';

  let wc: HTMLElement & {
    getName: () => string;
    setName: (newName: string) => void;
    on: (event: string, callback: Function) => void;
  };

  onMount(() => {
    wc.on('test', (detail: { name: string }) => {
      console.log(detail);
    });
  });
</script>

<svelte:head>
  <script type="module" src="/webcomponent/example-webcomponent-0.0.1.js"></script>
</svelte:head>

<my-web-component bind:this={wc} name="Admin"></my-web-component>

結果

{ name: 'Admin' }

👉 このアプローチにより、ウェブコンポーネントがシンプルで効果的なイベント駆動型APIを通じて任意のアプリケーションと通信できるようになります。

結論

これで、SvelteKitを使用してWebコンポーネントを作成し、Viteでビルドし、任意のプロジェクトに統合する方法がわかりました。

• SvelteKitを使用してWebコンポーネントを作成
• Viteで設定およびビルド
• 任意の環境（HTML、React、WordPress…）に統合
• プロパティ、メソッド、スロット、イベントを管理

👉 Webコンポーネントは、SaaS、埋め込みスクリプト、またはマルチプラットフォームプラグインなど、再利用可能なウィジェットを作成するための強力なソリューションです。

SvelteKitを使用すれば、軽量で効率的、完全にクライアントサイドのフレームワークに依存しないコンポーネントを作成できます。

🚀 これで、独自のウィジェットを作成し、ランディングページ、CMS、Webアプリケーション、クライアントプロジェクトなど、どこにでも統合できます。

さらに進む

プロジェクトや企業のためにカスタムWebコンポーネントを作成したいですか？

どのプラットフォーム（WordPress、Shopify、SaaSなど）にも統合可能な高性能ウィジェットを開発するためのカスタマイズされたソリューションを提供します。