Vue 2と3でWebコンポーネントを使う + Composition API

この記事では、VueアプリケーションにWeb Componentを組み込む方法について説明します。例として、Vueのバージョン2と3、およびComposition APIを取り上げます。この記事を書いている時点では、バージョン3がリリースされたばかりです。あまりに新しいので、「新しいコンテンツが利用可能になりました。 ドキュメンテーション.それから、デモ・アプリケーションは Vonage Verify APIを使用するように拡張されています。.

Test results from custom-elements-everywhere.com showing Vue 2.6.12 scored 100%, passed 16/16 Basic tests, and 14/14 advanced tests with an explanation.

custom-elements-everywhere.comのテスト結果

注：これはVue 2用です。この投稿の時点では、Vue 3はテストされていません。

Vueは、以下のすべてのテストに合格している。 custom-elements-everywhere.comのすべてのテストに合格し、互換性で100％のスコアを獲得し、あなたのラップトップをハッピーにします。開発者として、コンピュータを幸せにすることが最大の目標ではないでしょうか？

Vueのドキュメントでは Vueのドキュメントには

"Vueのコンポーネントが、Web Components Specの一部であるCustom Elementsに非常に似ていることにお気づきかもしれません。それは、Vueのコンポーネント構文が、この仕様に緩く倣ったものだからです。"

VueのようなJavaScriptフレームワークでWeb Componentを使用する際の注意点。フレームワークの仕組み

• そもそもウェブ・コンポーネントを使用していることを知っていますか？

• ウェブ・コンポーネントへのデータの受け渡し

• ウェブ・コンポーネントからのカスタム・イベントを処理しますか？

• 開発者がウェブコンポーネントのメソッドなどにアクセスできるように、ウェブコンポーネントへの参照を取得できますか？

Vueアプリケーションの設定とインストールには複数の方法があります。(詳細は v2および v3.)この投稿で示されているコード例は、ごく標準的なものです。

幸運なことに、Vueはテンプレート構文を通じてデータとイベントを処理します。

ウェブコンポーネントにデータを渡す

前回（/blog/using-web-components-in-a-react-application-dr）では、ReactアプリケーションでWebコンポーネントを使用する際の問題の1つに、Reactがデータを渡す方法がありました。データの種類（文字列、配列、オブジェクト、ブーリアンなど）にかかわらず、Reactは値を文字列化します。渡されるデータが文字列ではないことをVueに伝えるために v-bindまたは :にあるように ドキュメント.

たとえば、キーパッド・コンポーネントのプレースホルダーにアクセスして設定するには、コンポーネントのタグに次のコードを追加します：

:placeholder="placeholder"

そして、Vueアプリのデータ・セクションで、プレースホルダーの初期値を設定する。

placeholder: "Enter Security Code"

値を変更するには、コードは次のようになります。

this.placeholder = "SUCCESS!!!";

これはVueアプリケーションの標準的な操作です。

最近、キーパッドのコンポーネントのキーをカスタマイズする機能が追加された：

:keys = “[‘0’,’9’,’8’,’7’,’6’,’5’,’4’,’3’,’2’,’1’,’#’,’*’]”

この例は、別のフレームワークを使った次回のブログ記事で紹介する。

ウェブ・コンポーネントからイベントを聴く

Vueは、DOMイベント（クリック、スクロール、サブミットなど）を v-onまたは省略形の @.ウェブコンポーネントは通常の HTML 要素として扱われるので、カスタムイベントも同様に動作します。キーパッド・コンポーネントの digits-sentイベントをリッスンするには、要素に次のようなコードを追加します：

@digit-sent=”digitsSent”

digitsSentは、イベントから出てくるものを処理する関数である。

さて、VueにWeb Componentがあることを知らせたり、Web Componentと対話したりする方法は、VueのバージョンやComposition APIを使用しているかどうかによって若干異なります。いずれにせよ、Vueは間違った操作をしていると、コンソールに警告を表示して知らせてくれます。

Vue console warning that it failed to resolve a component.

ビュー2

ペンを見る ウェブ・コンポーネント×Vue 2by conshus de OUR show (コンシャス)で コードペン.

Vue 2アプリケーションにWeb Componentの存在を知らせるには、次のようにします。 ignoredElements.これは、Web Componentsのタグ名を公開する文字列や正規表現を含む配列です。これは ignoredElementsをVueの設定に渡すことで、それらの「要素」を「無視」することができます。サンプルコードでは、次のようになります：

Vue.config.ignoredElements = [/dwanes-\w*/];

時には、ウェブコンポーネントのメソッドを呼び出す必要があるかもしれません。例えば、キーパッド・コンポーネントの表示を消去するには cancelActionメソッドが呼び出されます。メソッドを使用する前に、キーパッド要素への参照を作成する必要があります。Vueには リアクトと似たような方法があります。 ref タグを追加します。を追加することです。

キーパッド・コンポーネントでは、次のようになる：

<dwanes-keypad ref="keypad" ...>

そして cancelActionがコールされる：

this.$refs.keypad.cancelAction();

ビュー3

ペンを見る ウェブ・コンポーネント×Vue 3by conshus de OUR show (コンシャス)で コードペン.

Vue 3がリリースされました！まだピカピカで新しい（そして変化している）！

先に述べたように、Vueコンポーネントの構文は、Web Components Specに緩やかに基づいています。では、Vue 3でWeb Componentを使うのはVue 2と同じでしょうか？そうではありません！Web Componentが使用されていることをアプリケーションに知らせるという点で、画期的な変更があります。

変更の詳細については、マイグレーションガイドをご覧ください： config.ignoredElements現在 config.isCustomElement
カスタムエレメンツ・インターロップ.

要約すると ignoredElementsVue 2では isCustomElementになります。配列の代わりに isCustomElementは、何を探すかを記述した関数を期待します。また、Vue 3では、要素が外部のカスタム要素（つまりWeb Component）であるかどうかのチェックは、テンプレートのコンパイル時に行われるようになりました。

テンプレートのコンパイルが "on-the-fly "で行われる場合、 isCustomElementはアプリケーションのコンフィギュレーションで渡される。デモ・コードでは、以下のようになる：

const app = Vue.createApp(App);
app.config.isCustomElement = tag => tag.startsWith('dwanes-')
app.mount('#app');

プロジェクトに .vueファイルがある場合、ビルドステップはアプリケーションをブラウザが理解できるコードにコンパイルするために使われます。この場合 isCustomElementはコンパイルを行うライブラリのオプションに渡されます。ライブラリは、開発者が何を使うかによって決まります。次のセクションでは、デモコードでwebpackを使用し、設定ファイルに isCustomElementを設定ファイルにインクルードする方法を紹介します。

でWebコンポーネントへの参照を取得する Vue 3のWebコンポーネントへの参照取得は、ありがたいことに、このブログ記事の時点ではVue 2と同じ方法で行われます。

コンポジション API

VueのコンポジションAPIは、アプリケーションが時間の経過とともに複雑化し、開発者が直面していたいくつかの制限を解決するために作成されました。その ドキュメント:

「このRFCで提案されているAPIは、コンポーネント・コードを整理する際に、ユーザーにより柔軟性を提供する。常にオプションによってコードを整理することを強いられる代わりに、コードを関数として整理し、それぞれが特定の機能を扱うことができる。このAPIはまた、コンポーネント間、あるいはコンポーネントの外部でも、ロジックを抽出して再利用することをより簡単にします。"

コンポジションAPI ドキュメントを読むことを強くお勧めします。ここでは、Web ComponentをComposition APIで動作させることに焦点を当てます。コンポーネントへの参照がどのように使われるかを扱います。

VueアプリケーションにWebコンポーネントがあることを知らせる方法が、バージョン2から3へ変更されました。 バージョン2から3へ.

アプリケーションがどのようにテンプレートをコンパイルするかによって、コンフィギュレーションをどこに置くかが決まる。前の例では、テンプレートのコンパイルは「オンザフライ」で行われました。このComposition APIの例では、Webpackを使ってテンプレートをコンパイルしています。つまり isCustomElement設定は webpack.config.jsファイルに配置されます。そこに次のコードがあります：

{
    test: /\.vue$/,
    use: {
        loader: "vue-loader",
        options: {
            compilerOptions: {
                isCustomElement: (tag) => {
                    return /^dwanes-/.test(tag);
                }
            }
        }
    }
}

コンパイル・エンジンに関係なく、おそらくは .config.jsファイルがあり、そこに上記のスニペットを置くことになる。

コンポジションAPIでは refは DOM 要素だけでなく、他の値の追跡も含むようになりました。

キーパッド・コンポーネントに追加された refキーパッドのコンポーネントに追加されるのは変わらない：

<dwanes-keypad ref="keypad" ...>

最初の変更は refをインポートする必要があることだ：

import { ref } from 'vue';

その後、setup() の中で参照を初期化する必要がある：

const keypad = ref(null);

必ず keypadを return.

コンポーネントの cancelAction()メソッドにアクセスする方法です：

keypad.value.cancelAction();

以下の点に注意してください。 value.

テキストの設定や変更も同様である。 placeholderテキストの設定や変更も同様です。

Vonage Vuerify

このブログ記事のために調べていてわかったことのひとつは、Vueをベースにしたプロジェクトは、できることなら名前にVueを入れるのが好きだということだ。Vuetify、Vuex、Revue、Vuedoなど。だから、Vonageの Verify APIを利用してを使ってVonage Vuerifyを作る機会を逃すわけがない！

試してみてほしい！

自分で試してみたい？まず、コードを codesandbox.io.

注：サインインする必要があります。

仕組みはこうだ：

セットアップ

まず、Vonage開発者アカウントが必要です。APIキーとAPIシークレットは ダッシュボードこれらの値は認証に必要です。

次に、新しくフォークした codesandbox.ioプロジェクトで、"Server Control Panel "をクリックする。

Screen capture of codesandbox.io code editor with the icon for the server control panel circled in red with a red arrow pointing to it.

下の方に「秘密の鍵」のセクションがある。この中から API Keyと API Secretを取る。 Vonageダッシュボードを取り出し、適切な場所に配置します。 Brand Nameはユーザにセキュリティコードとともに送信される文字列です。この場合は VonageVuerify です。

この App.vueのコードは、Web コンポーネントから送信された数字がどのように処理され、Node Express バックエンドに送信されるかを除けば、Composition API のコードとほとんど同じに見えます。

セキュリティコードのリクエスト

ユーザーがセキュリティコードを要求した場合 POSTリクエストは /requestエンドポイントにリクエストされ、ボディに入力された電話番号が送信されます。

有効な応答が返されると、リクエストIDが保存され、モードが変更され、キーパッド・コンポーネントのテキストが変更され、表示が消去される。そうでない場合は、エラーが表示される。

これがコードだ：

App.vue

if (mode === "request") {
    // Request security code
    postData("https://qtebx-8081.sse.codesandbox.io/request", {
    number: entered,
    })
    .then((data) => {
        if (data.status === "0") {
            requestId = data.request_id;
            mode = "verify";
            placeholder.value = "Enter verification code.";
            actionText.value = "Verify Code";
            keypad.value.cancelAction();
        } else {
            keypad.value.cancelAction();
            status.value = data.error;
        }
    })
    .catch((error) => {
        console.error("Error: ", error);
    });
}

server.js

app.post("/request", (request, response) => {
  console.log("request.body: ", request.body);
  nexmo.verify.request(
    {
      number: request.body.number,
      brand: process.env.BRAND_NAME,
      workflow_id: 6
    },
    (err, result) => {
      if (err) {
        console.error(err);
        response.json(err);
      } else {
        console.log("request result: ", result);
        if (result.status === 0) {
          response.json({
            status: result.status,
            request_id: result.request_id
          });
        } else {
          response.json({
            status: result.status,
            request_id: result.request_id,
            error: result.error_text
          });
        }
      }
    }
  );
});

注 workflow_idは、ユーザーにセキュリティーコードを配信するためのフォールバック戦略である。様々なオプションは ドキュメント.このアプリケーションはワークフロー 6 を使用しており、SMS メッセージは 1 通のみ送信されます。

コードの検証

ユーザーが受け取ったコードでVerifyしようとすると、別のリクエストが POSTリクエストは /checkエンドポイントに送られます。 requestId保存されたセキュリティコードとともに、サーバー上のエンドポイントに別のリクエストが送られる。

ステータスが成功の場合、モードが変更され、画像が変更され、キーパッド・コンポーネントのテキストが変更され、クリアされて表示される。ステータスがエラーの場合は、その旨が表示される。

これがコードだ：

App.vue

else if (mode === "verify") {
    // verify code
    postData("https://qtebx-8081.sse.codesandbox.io/check", {
    request_id: requestId,
    code: entered,
    })
    .then((data) => {
        if (data.status === "0") {
        //verified!!!
        mode = "success";
        placeholder.value = "Woohoo!!";
        actionText.value = "SUCCESS!!!";
        image.value = {
            src: "https://media.giphy.com/media/oobNzX5ICcRZC/source.gif",
            alt: "minion giving the thumbs up",
        };
        keypad.value.cancelAction();
        } else {
        keypad.value.cancelAction();
        status.value = data.error;
        }
    })
    .catch((error) => {
        console.error("Error: ", error);
    });
}

server.js

app.post("/check", (request, response) => {
  console.log("check request.body: ", request.body);
  nexmo.verify.check(
    {
      request_id: request.body.request_id,
      code: request.body.code
    },
    (err, result) => {
      if (err) {
        console.error(err);
        response.json(err);
      } else {
        console.log("check result: ", result);
        if (result.status === 0) {
          response.json({ status: result.status });
        } else {
          response.json({ status: result.status, error: result.error_text });
        }
      }
    }
  );
});

注意：デモ・コードをフォークする場合、エンドポイント・コードの App.vueで呼び出されるエンドポイントは、あなたのプロジェクトのサーバーに合わせて変更する必要があります。

Vonage Verify APIの詳細については、次のドキュメントを参照してください。 ドキュメンテーション.

この記事で取り上げたことについて何か質問はありますか？別の方法でWeb ComponentsをVueアプリケーションに組み込んだことがありますか？Vonage Verify APIをどのように使用しているか、例をお持ちですか？私たちの コミュニティ Slack チャンネル.

img.alignnone { border-width: 0px !important; } { img.alignnone { border-width: 0px !