SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ

Web ComponentsのイベントやスロットをReactで扱う

再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ 第8回

  • X ポスト
  • このエントリーをはてなブックマークに追加

Web Components内のスロットにReact由来のUIを流し込む

 次は、子要素を扱う方法を見てみましょう。

 Web Componentsで子要素を扱う方法といえば、スロット要素を使うことが一般的です。スロット要素を使うと、カスタム要素の内部に、外部から渡されたUIを挿入することができます。その一方で、Reactでは children という特別なプロパティを使って、外部で定義されたUIを子要素として扱うことができます。

 これらはほとんと同じ目的のために使われるものですが、それぞれの仕組みが異なるため、React側で定義されたUIをカスタム要素の内部にそのまま挿入することはできません。そこで、@lit/react を使って、React側で定義されたUIをカスタム要素の内部に挿入する方法を解説します。

 まずは、シンプルな例を考えてみましょう。リスト3のように、カスタム要素を作成します。

[リスト3]src/slot/my-slottable-element.js
import { LitElement, html, css } from "lit";

const styles = css`
  /* divとslotに太い枠線をつける */
  div,
  slot {
    border: 4px solid #343434;
    display: block;
    padding: 8px;
  }

  /* slotの枠線は青くする */
  slot {
    border-color: cornflowerblue;
  }
`;

export class MySlottableElement extends LitElement {
  static styles = styles;

  render() {
    return html`
      <div>
        <h3>これはスロットによって差し込まれたUIです</h3>
        <slot></slot><!-- (1) -->
      </div>
    `;
  }
}

customElements.define("my-slottable-element", MySlottableElement);

 リスト3のカスタム要素は、(1)の slot 要素を使って、外部から渡されたUIを挿入することができるようになっています。では、リスト3のカスタム要素に、React側で定義されたUIを挿入してみましょう。リスト4のように、@lit/react を使ってReactコンポーネントを作成します。

[リスト4]src/slot/Slottable.jsx
import React from 'react';
import { createComponent } from '@lit/react';
import { MySlottableElement } from './my-slottable-element';

export const SlottableElementComponent = createComponent({
  tagName: 'my-slottable-element',
  elementClass: MySlottableElement,
  react: React,
})

export const Slottable = () => {
  return (
    <SlottableElementComponent>
      <p>子要素として渡された要素</p>{/* (1) */}
    </SlottableElementComponent>
  )
}

 実際に動かしてみましょう。ブラウザで http://localhost:5173/ を開くと、図2のように表示されます。

図2:スロットに挿入されたUI
図2:スロットに挿入されたUI

 リスト4の(1)でReactコンポーネントの子要素、つまり children として与えたUIが、図2では内側の青い枠で囲まれた部分に挿入されていることがわかりますね。

 @lit/reactcreateComponent を用いて作られたReactコンポーネントは、children として与えられたUIを、カスタム要素内の slot 要素に挿入することができるのです。

名前を指定してスロットに挿入する

 第2回でも触れましたが、HTMLテンプレートで用いられる slot 要素には name 属性があり、外側からどのスロットに挿入するのかを指定できます。この挙動は @lit/react でもサポートされており、React側から名前を指定してスロットに挿入できます。この機能を利用するには、リスト5のようにカスタム要素を作成します。

[リスト5]src/slot/my-named-slottable-element.js
import { LitElement, html, css } from "lit";

const styles = css`
  /* divとslotに太い枠線をつける */
  div,
  slot {
    border: 4px solid #343434;
    display: block;
    padding: 8px;
  }
  /* slotの枠線は青くする */
  slot {
    border-color: cornflowerblue;
  }
  /* 段落の間は空ける */
  p {
    margin-bottom: 2px;
  }
`;

export class MyNamedSlottableElement extends LitElement {
  static styles = styles;

  render() {
    return html`
      <div>
        <p>先頭スロット</p>
        <slot name="head"></slot><!-- (1) -->
        <p>デフォルトスロット</p>
        <slot></slot><!-- (3) -->
        <p>末尾スロット</p>
        <slot name="tail"></slot><!-- (2) -->
      </div>
    `;
  }
}

customElements.define("my-named-slottable-element", MyNamedSlottableElement);

 リスト5のカスタム要素は、(1)と(2)の slot 要素に name 属性を指定して、それぞれのスロットに名前をつけています。(3)はリスト4と同じ役割のスロットで、便宜上デフォルトスロットと呼ぶことにします。では、リスト5のカスタム要素に、React側で定義されたUIを挿入してみましょう。リスト6のように、@lit/react を使ってReactコンポーネントを作成します。

[リスト6]src/slot/NamedSlottable.jsx
import React from 'react';
import { createComponent } from '@lit/react';
import { MyNamedSlottableElement } from './my-named-slottable-element';

export const NamedSlottableElementComponent = createComponent({
  tagName: 'my-named-slottable-element',
  elementClass: MyNamedSlottableElement,
  react: React,
})

export const NamedSlottable = () => {
  return (
    <NamedSlottableElementComponent>
      <p slot="head">この文章は「head」スロットに入ります。</p>{/* (1) */}
      <p slot="tail">この文章は「tail」スロットに入ります</p>{/* (2) */}
      <div slot="tail">{/* (4) */}
        <Hoge />{/* (5) */}
      </div>
      <p>{/* (3) */}
        nameを未設定の場合はデフォルトスロットに入ります。
      </p>
    </NamedSlottableElementComponent>
  )
}

const Hoge = () => (
  <p>Reactコンポーネントも挿入できます</p>
)

 <NamedSlottableElementComponent> 要素の children として、いくつかのパターンで要素を渡しています。Reactコンポーネントの属性として slot 属性を指定することで、名前を指定したスロットに挿入できます。

 どの要素がカスタム要素のどこに挿入されるのか、先に予想してみましょう。(1)や(2)の要素は、それぞれの名前を持つスロットに挿入されそうですね。(3)には name 属性を指定しなかったので、デフォルトスロットに挿入されそうです。さて、それでは(3)より上に定義されていて、slot="tail" になっている(4)は、(3)より上に来るでしょうか下に来るでしょうか。また、(5)のようなReactコンポーネントも挿入できるのでしょうか。

 答え合わせです。実際に動かしてみましょう。ブラウザで http://localhost:5173/ を開くと、図3のように表示されます。

図3:名前を指定してスロットに挿入されたUI
図3:名前を指定してスロットに挿入されたUI

 予想通り、(1)や(2)の要素はそれぞれの名前を持つスロットに挿入されています。また、(3)はデフォルトスロットに挿入されていますね。さて、問題の(4)は、指定通り name="tail" の末尾スロット内に配置されており、(3)との位置関係は関係なかったようです。末尾スロットの中では、(2)と(4)の上下関係が維持されていますね。また、(5)のようなReactコンポーネントも挿入できることがわかりました。

 Reactにおける通常の children とは少し違った挙動も組み込めることがわかりました。これにより、カスタム要素内でのUIの配置を柔軟に行うことができるようになります。

最後に

 今回は、カスタム要素内で発火したイベントをReactで受け取る方法と、カスタム要素内のスロットへReact由来のUIを流し込む方法について解説しました。ひと手間かかることもありますが、 @lit/react を使って、Web ComponentsとReactをより密接に連携させることができるようになりましたね。

 本連載は、今回で最終回となります。連載中にもWeb Componentsを取り巻く環境は刻々と進化し続け、少しずつ扱いやすいものになっていきました。今後も「再利用性とカプセル化」というWeb Componentsの特性を活かせる分野は増えていくことでしょう。ぜひ、これらの記事を参考にして、Web Componentsを活用した開発に取り組んでみてください。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/19264 2024/04/16 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング