SHOEISHA iD

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

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

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

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

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

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

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

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

対象読者

  • 再利用可能な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と似ていますが、状態管理の結果として発生した画面の更新をできるだけ少ないコストで行うことには独自の強みがあります。

図1:Reactの公式サイト
図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:サンプル環境の起動画面
図2:サンプル環境の起動画面

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

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

次のページ
ReactとWeb Componentsを組み合わせる

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

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

もっと読む

この記事の著者

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

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング