ReactからWeb Components製のコンポーネントを利用してみよう

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

　Web標準の技術であるWeb Componentsは、ブラウザ上の他の技術体系とも組み合わせることができます。UIの部品化という観点ではWeb Componentsも他のツールに劣るものではありませんが、複雑な状態管理やルーティングといった機能は、他のツールに任せるというのも一つの手です。本記事では、Webアプリケーション開発の有名ライブラリであるReactとWeb Componentsを組み合わせて使う方法を解説します。

対象読者

• 再利用可能なHTMLやCSSを整備したいJavaScriptエンジニア
• ReactからWeb Componentsを利用してみたいReactエンジニア

前提環境

　筆者の検証環境は以下の通りです。

• macOS Sonoma 14.1.1
• Google Chrome 119.0.6045.159
• Node.js v21.2.0
• npm v10.2.3
• react 18.2.0
• react-dom 18.2.0
• lit 3.1.0
• @lit/react 1.0.2

Web Componentsを部品として使う

　これまでの連載の中で、Web Componentsは、HTMLやCSS、JavaScriptを組み合わせて、再利用可能な部品を作るための技術であることを解説してきました。部品の内部では、イベントハンドリングを行なったり、簡単な状態管理を行うことができます。またLitなどのライブラリを利用することで、より快適に部品を作ることができ、小さなアプリケーションを作ることも可能です。

　ただ、ここで少し考え直してみましょう。Web Componentsには、小さなアプリケーションを作れるほどのポテンシャルがあるのは確かです。しかし、やはりWeb Componentsの本分は部品を作ることなのではないでしょうか。このポテンシャルは、部品作りの際にリッチな表現が求められた場合（たとえば日付選択時のカレンダーポップアップとか）に発揮されるべきものであり、アプリケーションを作りたいのであれば、もっと別の選択肢もあるのではないでしょうか。

　ブラウザ上でアプリケーションを動かすためのツールはいくつもありますが、本記事では、特に有名なものとして、Reactというライブラリとの組み合わせ方について解説します。

Reactとは

　React（リアクト）は、Meta社が開発している、JavaScriptライブラリです（図1）。画面部品を作ったり、状態管理ができる点はWeb Componentsと似ていますが、状態管理の結果として発生した画面の更新をできるだけ少ないコストで行うことには独自の強みがあります。

• https://ja.react.dev/

図1：Reactの公式サイト

　公式サイト上でも「Webとネイティブユーザインターフェースのための」と銘打っているように、React自体は、ブラウザのためだけのライブラリではありません。React DOMというライブラリを併用することでブラウザ向けのアプリケーションを作ることもできますし、React Nativeというライブラリを併用することで、AndroidアプリやiOSアプリを作ることもできます。

　本記事では、React DOMを使って、ブラウザ向けのアプリケーション開発環境を構築し、そこにWeb Componentsを組み込んでいきます。

Reactの環境をセットアップする

　それでは、Reactの環境をセットアップしていきましょう。本連載ではこれまで、できる限りブラウザ上だけで開発が完結するように、ES Modulesによるライブラリ利用を徹底して配慮してきました。しかし、本記事は一般的なReactの開発環境にWeb Componentsを組み込んでいくことをテーマにしたいので、今回は、Node.jsの環境を前提として開発を進めていきます。Node.jsのインストール方法は、Node.jsの公式サイトを参照してください。

　今回は、環境のセットアップのためにVite（ヴィート）というツールを使います。ViteはReactなどのフレームワークの環境を簡単にセットアップできるツールです。サンプル用の環境は、リスト1のようにターミナルからセットアップしました。

［リスト1］サンプル環境のセットアップ

$ npm create vite@latest lit-react-integration-sample
Need to install the following packages:
create-vite@5.0.0
Ok to proceed? (y) 
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /path/to/sample/lit-react-integration-sample...

Done. Now run:

  cd lit-react-integration-sample
  npm install
  npm run dev

　"Select a framework" では「React」を選び、"Select a variant" では「JavaScript」を選びました。これで、Reactの環境がセットアップされました。"Now run: " の後に書かれた手順を実行すると、サンプルの環境が起動します。ブラウザで http://localhost:5173/ を開くと、図2のような画面が表示されます。

図2：サンプル環境の起動画面

　これを改造する形で、Web Componentsの動作を確認していきます。

　お手元で動作確認しながら記事を読み進めていく方は、src/index.css と src/App.css の内容は動作確認をしていくにあたって邪魔になることが多いので、配布しているサンプルコードを参考に、ファイルの中身を空にしておいてください。