ReactJS - Web Components: 初級者向けガイド

こんにちは、将来の開発者さんたち！今日は、ReactJSとWeb Componentsの世界に興味深い旅をすることになります。あなたの近所の親切なコンピューターの先生として、私はこの冒険をステップバイステップで案内します。プログラミングが初めての人も心配しないでください - すべての基本から始めて、少しずつ進めていきます。コーヒー（またはお茶、あなたの好み次第）を一杯取り、さあ、飛び込んでみましょう！

ReactJS - Web Components

Web Componentsとは？

ReactでWeb Componentsを使い始める前に、まずWeb Componentsが実際に何かを理解しましょう。ウェブサイト（家）をレゴブロック（コード）で作ることを想像してください。Web Componentsは、一度作成して異なる家（ウェブサイト）で何度も使える特別なレゴピースのようなものです。

Web Componentsは、再利用可能なカスタム要素を作成するために使用されるウェブプラットフォームのAPIのセットです。これらは機能をカプセル化し、異なるプロジェクトやフレームワーク間で簡単に共有できます。

ReactでWeb Componentsを使う理由

さて、あなたはおそらく「Reactを使っているのに、なぜWeb Componentsを気にする必要があるのか？」と思っているかもしれません。素晴らしい質問です！Reactはユーザーインターフェースの構築に最適ですが、時々フレームワーク非依存のコンポーネントを使いたかったり、Reactを使っていない開発者とコンポーネントを共有したい場合があります。ここでWeb Componentsが輝きます！

開始する前に：Reactプロジェクトのセットアップ

まず新しいReactプロジェクトをセットアップしましょう。心配しないでください、私はステップバイステップで案内します！

ターミナルを開きます（怖くないですよ、コンピュータとテキストベースで話すだけです）。
次のコマンドを実行します：

npx create-react-app my-web-components-app
cd my-web-components-app

これで新しいReactアプリを作成し、プロジェクトディレクトリに移動します。レゴの家の基盤を敷くようなものです！

最初のWeb Componentを作成する

さあ、私たちの最初のWeb Componentを作成しましょう。シンプルな挨拶カードコンポーネントを作ります。

srcフォルダに新しいファイルGreetingCard.jsを作成し、以下のコードを追加します：

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}

connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
</style>
<div class="card">
<h2>Hello, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

これを分解してみましょう：

GreetingCardというクラスを作成し、HTMLElementを継承します。これは私たちの特別なレゴピースの青写真のようなものです。
コンストラクタでは、shadow DOMを作成します。これはコンポーネントのスタイルが他のページに漏れ出ないプライベートな部屋のようなものです。
connectedCallbackメソッドは、コンポーネントがページに追加されたときに呼び出されます。ここで、カードのHTML構造とスタイルを設定します。
最後に、customElements.defineを使って新しいコンポーネントをブラウザに登録します。これでブラウザが<greeting-card>タグを見つけたときにこの青写真を使うようになります！

ReactでWeb Componentを使う

今、私たちのWeb Componentができましたので、Reactアプリで使ってみましょう。src/App.jsを開き、以下のコードに置き換えます：

import React from 'react';
import './GreetingCard';

function App() {
return (
<div className="App">
<h1>My Web Components App</h1>
<greeting-card name="React Developer"></greeting-card>
</div>
);
}

export default App;

以下のことが起こります：

私たちはGreetingCardコンポーネントをインポートします（これでブラウザに登録されます）。
Appコンポーネント内で<greeting-card>タグを使います。これを他のHTML要素と同じように扱います。
コンポーネントにname属性を渡し、挨拶をパーソナライズします。

アプリを実行する

私たちの創造物を実行してみましょう！ターミナルで次のコマンドを実行します：

npm start

これでReactアプリが起動します。ブラウザを開き、http://localhost:3000にアクセスすると、ページに挨拶カードが表示されるはずです！

Web Componentにインタラクティブ性を追加する

私たちの挨拶カードを少しインタラクティブにしてみましょう。クリックすると挨拶が変わるボタンを追加します。

GreetingCard.jsファイルを更新します：

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.greetings = ['Hello', 'Bonjour', 'Hola', 'Ciao', 'Konnichiwa'];
this.currentGreeting = 0;
}

connectedCallback() {
this.render();
this.shadowRoot.querySelector('button').addEventListener('click', () => this.changeGreeting());
}

changeGreeting() {
this.currentGreeting = (this.currentGreeting + 1) % this.greetings.length;
this.render();
}

render() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<div class="card">
<h2>${this.greetings[this.currentGreeting]}, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
<button>Change Greeting</button>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

この更新版では：

挨拶の配列とメソッドを追加して、挨拶を切り替えます。
renderメソッドがHTMLコンテンツを作成します。
ボタンをカードに追加し、クリックされたときに挨拶を切り替えるイベントリスナーを設定します。

結論

おめでとうございます！あなたは刚刚Reactアプリで初めてのWeb Componentを作成し、使いました。ReactとWeb Componentsを組み合わせることの可能性はまだまだあります。

コードを学ぶことはレゴで遊ぶのと同じです - 基本から始めて、すぐに素晴らしい構造を作れるようになります。練習を続け、好奇心を持ち、実験を恐れずに！

以下は私たちがWeb Componentで使用した主要なメソッドの表です：

メソッド	説明
constructor()	コンポーネントを初期化し、shadow DOMを設定します
connectedCallback()	コンポーネントがDOMに追加されたときに呼び出されます
render()	コンポーネントのHTMLコンテンツを作成します
changeGreeting()	表示される挨拶を更新します

未来のウェブ開発者、ハッピーコーディング！

Credits: Image by storyset