対象読者
- 再利用可能な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と似ていますが、状態管理の結果として発生した画面の更新をできるだけ少ないコストで行うことには独自の強みがあります。
公式サイト上でも「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のようにターミナルからセットアップしました。
$ 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のような画面が表示されます。
これを改造する形で、Web Componentsの動作を確認していきます。
お手元で動作確認しながら記事を読み進めていく方は、src/index.css と src/App.css の内容は動作確認をしていくにあたって邪魔になることが多いので、配布しているサンプルコードを参考に、ファイルの中身を空にしておいてください。
