ぶうううん's Cafe

どうにかこうにか。備忘録に近い。

ReactとWeb Componentの違い

Web

Web Componentのおさらい

 Web Componentは、コンポーネントを可能な限り再利用可能な形にする手法のことであり、主に以下の3つの技術から成り立っている。

  • カスタム要素

    • カスタムされた要素とその動作を定義するためのJavaScriptコード。

  • シャドウDOM

    • カプセル化されたDOMツリー（シャドウDOMツリー）を要素に紐付けて、関連する機能を制御するためのJavaScriptコード。シャドウDOMツリーは、通常のDOMツリーとは別にレンダリングされる。

  • HTMLテンプレート

 Web Componentの基本的な実装方法は以下の通り。

  1. Web Componentを明示的に利用するクラスまたは関数を作成する。

  2. 作成したカスタム要素を登録する。CustomElementRegistry.define()に要素名、作成したクラスまたは関数などを渡す。

  3. 必要であれば、シャドウDOMをカスタム要素に紐付ける。Element.attachShadow()を利用する。

  4. 必要であれば、HTMLテンプレートを記述する。前述の<template>と<slot>を利用する。

  5. 作成したカスタム要素を使用する。

ReactとWeb Componentの違いとは

 ReactもWeb Componentも、再利用可能なコンポーネントを作成するという点では似ている。しかしながら、両者の目的は違うものだと認識している。

  • Reactの目的

    • DOMとデータを同期させるためのライブラリを提供する。再利用可能なコンポーネントはあくまでそのライブラリを利用する際の副産物である。

  • Web Componentの目的

Web Componentの使い所

 個人的にはReactやVueなどのライブラリ or フレームワークが存在する今のWebにおいて、それらが使えるのであれば使うべきだと思う。何か特殊な事情があり、それらが使えないが再利用可能なカスタムコンポーネントを使いたい場合にWeb Componentの使用を検討すべきだと考える。

References