---
title: "Reactアプリケーションにコードを埋め込む方法"
description: "React、Vue、Angular、TypeScriptのアプリケーションにEmbedSocialのウィジェットコードを埋め込む手順を説明します。"
---

EmbedSocialのウィジェットは、フレームワークに依存しない埋め込みウィジェットです。`data-ref` 属性を持つ1つの `<div>` と、小さなローダースクリプトで構成されています。これは素のHTMLなので、同じコードをどのJavaScriptまたはTypeScriptのフレームワークのプロジェクトにもそのまま組み込めます。このガイドではReact、Vue、Angularを取り上げます。

## Reactにウィジェットを埋め込む

ここでは、Reactアプリケーションにウィジェットを埋め込む手順を詳しく説明します。

1.  まず、作成したウィジェットのコードをコピーします。

![作成したEmbedSocialのウィジェットからコードをコピーしている画面](https://embedsocial.com/images/docs/4797000/1.jpg)

2.  コードをコピーしたら、HTMLとJavaScriptを分けます。たとえば次のようになります。

**EmbedSocialのウィジェットコード:**

`<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>`

`<script> (function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript")); </script>`

**HTMLのコード:**

`<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>`

**JavaScriptのコード:**

`(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));`

3.  次にReactアプリケーションのcomponentsディレクトリに新しいコンポーネントを作成し、render関数の中にHTMLのコードを貼り付けます。

![新しいReactコンポーネントのrender関数にウィジェットのHTMLを貼り付けている画面](https://embedsocial.com/images/docs/4797000/2.png)

JavaScriptのコードは、componentDidMountのライフサイクルメソッドの中に貼り付けます。

![ReactのcomponentDidMountメソッドにウィジェットのJavaScriptを貼り付けている画面](https://embedsocial.com/images/docs/4797000/3.png)

4.  ウィジェットを表示したいページを開き、作成したコンポーネントをimportします。この例ではApp.jsに追加します。

![ReactアプリのApp.jsに新しいウィジェットコンポーネントをimportしている画面](https://embedsocial.com/images/docs/4797000/4.png)

5.  これで完了です。変更を保存すると、ページにウィジェットが表示されます。

![Reactアプリのページに表示されたEmbedSocialのウィジェット](https://embedsocial.com/images/docs/4797000/5.png)

> ご不明な点がございましたら、画面右下のチャットアイコンからカスタマーサクセスチームにお問い合わせいただくか、[support@embedsocial.com](mailto:support@embedsocial.com) までメールをお送りください。喜んでサポートいたします 🙏

## Vueに埋め込む

Vueのアプリケーションでカスタムの HTML / JavaScript コードを埋め込む方法は2つあります。

-   **Composition API**

-   **Options API**

まず、ウィジェットのコードをコピーします。

![コードをコピーしている画面](https://embedsocial.com/images/docs/4795049/1.jpg)

コードをコピーしたら、HTMLとJavaScriptを分けます。たとえば次のようになります。

**EmbedSocialのウィジェットコード:**

```html
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div>
<script>
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));
</script>
```

**HTML**

```html
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div>
```

**JavaScript**

```js
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));
```

**1. Options APIでウィジェットを埋め込む**

Options APIを使用しているVueアプリケーションにEmbedSocialのウィジェットコードを埋め込む手順は次のとおりです。

まず、Vueアプリケーションのcomponentsディレクトリに新しいコンポーネントを作成します。

![Options API用の新しいVueコンポーネントをcomponentsディレクトリに作成している画面](https://embedsocial.com/images/docs/4795049/2.png)

EmbedSocialのウィジェットのHTMLコードを `<template>` タグの中に貼り付けます。

![Options APIのVueコンポーネントのtemplateタグにウィジェットのHTMLを貼り付けている画面](https://embedsocial.com/images/docs/4795049/3.png)

EmbedSocialのウィジェットのJavaScriptコードは、createdのライフサイクルフックの中に貼り付けます。

![Vueのcreatedライフサイクルフックにウィジェットのjavascriptを貼り付けている画面](https://embedsocial.com/images/docs/4795049/4.png)

EmbedSocialのウィジェットコンポーネントを作成したら、そのコンポーネントをimportしてWebサイトに表示します。

ウィジェットを表示したいファイルまたはページを開き、コンポーネントをimportします。この例ではApp.vueにimportしています。

![Options APIでウィジェットコンポーネントをApp.vueにimportしている画面](https://embedsocial.com/images/docs/4795049/5.png)

このコードとOptions APIを使った結果は次のとおりです。

![Options APIのVueコンポーネントで表示されたウィジェット](https://embedsocial.com/images/docs/4795049/6.png)

**2. Composition API**

**Composition API** は、Vue2で使われていたOptions APIの制約に対応するためにVueに追加されたものです。

Composition APIを使用しているVueアプリケーションにウィジェットのコードを埋め込む手順は次のとおりです。

まず、Vueアプリケーションのcomponentsディレクトリに新しいコンポーネントを作成します。

![Composition API用の新しいVueコンポーネントをcomponentsディレクトリに作成している画面](https://embedsocial.com/images/docs/4795049/7.png)

次に、EmbedSocialのウィジェットのHTMLコードを `<template>` タグの中に貼り付けます。

![Composition APIのコンポーネントのtemplateタグにウィジェットのHTMLを貼り付けている画面](https://embedsocial.com/images/docs/4795049/8.png)

続いてVueから `onMounted` 関数をimportし、EmbedSocialのウィジェットのJavaScriptコードを `onMounted` 関数の中に貼り付けます。

![Vueのon Mounted関数にウィジェットのjavascriptを貼り付けている画面](https://embedsocial.com/images/docs/4795049/9.png)

ここまででEmbedSocialのウィジェットコンポーネントが作成できました。次に、そのコンポーネントをimportしてWebサイトに表示します。

ウィジェットを表示したいファイルまたはページを開き、コンポーネントをimportします。この例ではApp.vueにimportしています。

![Composition APIでウィジェットコンポーネントをApp.vueにimportしている画面](https://embedsocial.com/images/docs/4795049/10.png)

これで、Webサイトにウィジェットが表示されます。

これで完了です。

> ご不明な点がございましたら、画面右下のチャットアイコンからカスタマーサクセスチームにお問い合わせいただくか、[support@embedsocial.com](mailto:support@embedsocial.com) までメールをお送りください。喜んでサポートいたします 🙏

## Angularに埋め込む

Angularのアプリケーションでカスタムの JavaScript コードを組み込む方法は2つあります。

1つはHTMLに直接コードを埋め込む方法、もう1つはコンポーネントを作成する方法で、こちらがより適した方法です。

**1. ページの任意の場所にコードを埋め込む**

こちらは分かりやすく、最も手軽な方法です。Angularの任意のファイルのHTMLを開き、EmbedSocialのコードをそのまま貼り付けます。

例は次のとおりです。

![AngularのファイルのHTMLにウィジェットのコードを直接貼り付けた画面](https://embedsocial.com/images/docs/4796971/1.png)

**2. コンポーネントを作成する**

こちらの方法は2つの手順に分かれます。

-   コンポーネントを作成する

-   コンポーネントを使用する

1.  ターミナルで `ng generate component EmbedSocialWidget` コマンドを実行し、`EmbedSocialWidget` という名前のAngularコンポーネントを作成します。

2.  コンポーネントを作成したら `EmbedSocialWidget.component.ts` を開き、constructorのすぐ上に、`@Input()` を付けた文字列型のプロパティ `refId` を追加します。

3.  同じファイルの `ngOnInit()` 関数の中に、ウィジェットを構築するEmbedSocialのjavascriptを追加します。

コンポーネントのファイル `EmbedSocialWidget.component.ts` は、次の画像のようになります。

![refIdのinputとngOnInitを追加したEmbedSocialWidget.component.tsのファイル](https://embedsocial.com/images/docs/4796971/2.png)

**コンポーネントを使用する**

まず、EmbedSocialのアカウントに[ログイン](/admin/login?lang=ja)し、[Widgets](/admin/reviews_feed?lang=ja) を開きます。埋め込みたいウィジェットを開き、EmbedSocialの **data-ref** 属性の値を取得します（前述のとおりです）。

data-ref属性は次のような形式です。

data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"

data-refを取得したら、作成した `EmbedSocialWidget` コンポーネントをAngularプロジェクトの任意の場所で使用できます。コンポーネントの `refId` のバインディングを、EmbedSocialからコピーした **refId** に置き換えてください。

コンポーネントの使用例は次のとおりです。

![コピーしたrefIdをバインドしてEmbedSocialWidgetコンポーネントを使用しているAngularの画面](https://embedsocial.com/images/docs/4796971/3.png)

これで完了です。

## TypeScriptのプロジェクトで埋め込みウィジェットを使う

ウィジェットは素のHTMLとローダースクリプトで構成されているため、埋め込みコード自体は変わりません。TypeScriptのフレームワークのプロジェクトでは、その周りに作るラッパーに型を付けるだけです。上のAngularの例はすでにTypeScriptで、`refId` は `EmbedSocialWidget.component.ts` の中で `@Input()` の文字列として宣言されています。ReactやVueでも同じように、ウィジェットのrefをご自身のコンポーネントの `string` 型のpropとして型付けし、ローダースクリプトはマウント時のライフサイクルフックに置いてください。

> お役に立てば幸いです。ご不明な点やサポートが必要な場合は、[support@embedsocial.com](mailto:support@embedsocial.com) までお気軽にお問い合わせください。