Web コンポーネントを記述する従来の方法は、SSR (サーバー サイド レンダリング) にあまり適していません。この投稿では、SSR および任意の JavaScript フレームワーク (Vue、React、Svelte、Solid、Brisa) または Vanilla JS で動作するリアクティブ Web コンポーネントを構築する方法を説明します。

• 導入
• Brisa を使用して Web コンポーネントを作成する
• Web コンポーネントの構築
• Vanilla JS プロジェクトへの Web コンポーネントのロード
• WebコンポーネントのSSR
• ブリサについてもっと教えてください...お願いします...
• Web コンポーネント ライブラリ作成者向けのメモ
• 例
• 結論

導入

Brisa Web Component Compiler を使用します。 Brisa は、Next.js や Nuxt.js などの他のフレームワークに似ていることに加えて、JSX や SSR を使用して、リアクティブ性のシグナルを操作するリアクティブな Web コンポーネントを構築できる Web フレームワークです。

これを行うには、Web コンポーネントを作成するときに Brisa の構文を知っているだけで済みます。 Brisa は現在 v0.1 ルートマップの 95.48% にあるため、まだ公開されていませんが、1 か月以内にリリースの準備が整い、誰もがアクセスできるようになると推定しています。ただし、まったく公開されていない場合でも、それを使用して独自の Web コンポーネント ライブラリを作成することができます。

Brisa を使用した Web コンポーネントの作成

例として、いつものように、古典的な例であるカウンターの Web コンポーネントを作成します。

カウンター-wc.tsx

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

Brisa はファイル名を使用してセレクターを認識します。ここではセレクターは counter-wc になります。

ヒント: Brisa はまだ公開されていませんが、TypeScript タイプを使用して Web コンポーネントの作成方法をガイドできます。

上記の例では、state を使用してシグナルを作成し、.value を使用して JSX 内でシグナルをリアクティブにします。 props は読み取り専用であるため、特別なシグナルでもあります。.value は、使いやすくし、デフォルト値をより簡単に定義するために使用されません。これは、React が機能するのと同様に、ビルド時の最適化によって行われます。彼らがシグナルを使用していれば、その逆の場合。

CSS テンプレート リテラルにより、この場合の color プロパティのリアクティブな変更に反応できるようになります。この例以外の CSS テンプレート リテラルは、リアクティブ アニメーションを簡単に作成するのに非常に役立ちます。 Web コンポーネントは Shadow DOM で動作するため、CSS はページの残りの部分には影響を与えないことを覚えておくことが重要です。

Web コンポーネントの構築

Web コンポーネントをビルドするには、次のコマンドを実行する必要があります:

brisa build -w counter-wc.tsx

このコマンドは 2 つのファイルを生成します:

[ wait ]  ? building your standalone components...
[ info ]
[ info ]   Standalone components:
[ info ]   - build/counter-wc.client.js (670.00 B)
[ info ]   - build/counter-wc.server.js (842.00 B)
[ info ]
[ info ]   ✨  Done in 42.20ms.

これらのファイルは Web コンポーネントではありません。ビルド時に可能な限り軽くなるように最適化された Web コンポーネントのレンダリング機能にすぎません (出力されるバイトは gzip なしです).

それでは、Web コンポーネントをロードするにはどうすればよいでしょうか?

Vanilla JS プロジェクトへの Web コンポーネントのロード

これを行うには、brisa/client を使用して HTML に importmap を追加し、counter-wc.client.js ファイルをインポートする必要があります。

ここでは、レンダリング部分のみが各 Web コンポーネント ファイルに移植されますが、それらはすべてインポートマップで定義された同じ Brisa ラッパーを使用します。これは、シグナルとシャドウ DOM を含む Web コンポーネントの作成を担当します。

WebコンポーネントのSSR

宣言型シャドウ DOM のおかげで、Web コンポーネントの SSR を実行できるようになりました。 counter-wc.server.js ファイルはすでにこの動作を使用してコンパイルされているため、サーバーにインポートして HTML にレンダリングし、サーバー フレームワークに適応させるだけで済みます。

JSX を使用せずに Bun.js または Node.js を使用した例を次に示します:

ssr.js

import { renderToString } from "brisa/server";
import { jsx } from "brisa/jsx-runtime";
import CustomCounter from "counter-wc/server";

const html = `


    
    
    
    
    
    
    
    
        ${await renderToString(jsx(CustomCounter, { start: 10 }))}
    

`;

console.log(html);

次に、bun run ssr.js を実行すると、宣言型 Shadow DOM を使用してレンダリングされた Web コンポーネントを含む HTML が表示されます。

ブリサについてもっと教えてください...お願いします...

これらの Web コンポーネント ライブラリと Brisa の統合は、構成ファイルを通じて行われます:

import type { WebComponentIntegrations } from "brisa";

export default {
  "custom-counter": {
    client: "./path/to/web-component.client.js",
    server: "./path/to/web-component.server.js",
    types: "./path/to/web-component.types.d.ts",
  },
} satisfies WebComponentIntegrations;

このようにして、SSR および TypeScript タイプがプロジェクトに自動的に統合されます。また、Web コンポーネントは、任意のサーバー コンポーネントまたは別の Web コンポーネント内で使用できます。

さらに詳しく知りたい場合は、Brisa ニュースレターを購読して、Brisa に関する最新ニュースと更新情報を受け取ることをお勧めします。 9 月末までには発売の準備が整うと予想しています。

Web コンポーネント ライブラリ作成者向けの注意事項

Brisa を試して独自の Web コンポーネント ライブラリを作成することをお勧めします。 「made with Brisa」バッジを付けると、Brisa ページにあなたのライブラリへのリンクが貼られます。

例

この記事で説明したカウンターの例の GitHub リポジトリを参照して、独自の作成の参考として使用できます。

• https://github.com/aralroca/counter-wc

結論

この投稿では、SSR および任意の JavaScript フレームワークまたは Vanilla JS で動作するリアクティブ Web コンポーネントを構築する方法を説明しました。 Brisa を使用して Web コンポーネントを構築し、それを Vanilla JS プロジェクトにロードする方法と、それを使用して SSR を実行する方法を見てきました。

この投稿を楽しんでいただき、何か新しいことを学んでいただければ幸いです。ご質問がございましたら、以下のコメント欄でお気軽にお問い合わせください。喜んでお手伝いさせていただきます。

コーディングを楽しんで、残りの夏も楽しんでください! ??