Vue.jsを使ってContact FormからEmailを送信する方法

Vue.jsとは何か

Vue.js（発音は /vjuː/、 view と同様）は、ユーザーインターフェースの構築のためのJavaScriptフレームワークです。標準的なHTML、CSS、JavaScriptを土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。シンプルなものから複雑なものまで、ユーザーインターフェースの開発を効率的に支えるフレームワークです。

Vue.jsは、フロントエンド開発に必要な一般的な機能のほとんどをカバーするフレームワークであり、エコシステムでもあります。しかし、Webはきわめて多様です。私たちがWebで構築するものは、形態の点でも規模の点でもそれぞれ大きく異なります。Vueはそのことを念頭に置いて、柔軟性を提供する設計、そして段階的に適用できる設計となっています。

Vue.jsの主な特徴は以下の通りです:

• 宣言的レンダリング: Vueでは、標準的なHTMLを拡張したテンプレート構文を使って、HTMLの出力を宣言的に記述することができます。この出力は、JavaScriptの状態に基づきます。
• リアクティビティー: VueはJavaScriptの状態の変化を自動的に追跡し、変化が起きると効率的にDOMを更新します。

これらの特徴により、Vue.jsはWebアプリケーションの開発を効率的に行うことができます。また、Vue.jsは「プログレッシブフレームワーク」と呼ばれ、既存のプロジェクトにも簡単に統合することができます。

EmailJSの導入

EmailJSは、クライアントサイドJavaScriptから直接メールを送信するためのサービスです。Vue.jsアプリケーションでEmailJSを使用するには、まずEmailJS SDKをインストールする必要があります。

以下に、EmailJS SDKのインストール方法を示します:

# npmを使用する場合
$ npm install --save @emailjs/browser

# Yarnを使用する場合
$ yarn add @emailjs/browser

これにより、EmailJS SDKがVue.jsプロジェクトにインストールされます。

次に、EmailJSを初期化するためのスクリプトを追加します。このスクリプトは、EmailJSの公開鍵（public key）を使用してEmailJSを初期化します。公開鍵は、EmailJSダッシュボードのアカウントページから取得できます。

<script type="text/javascript">
  (function(){
    emailjs.init({
      publicKey: "YOUR_PUBLIC_KEY",
    });
  })();
</script>

以上で、Vue.jsアプリケーションでEmailJSを使用するための準備が整いました。次のステップでは、Contact Formの作成とEmailの送信について説明します。

Contact Formの作成

Vue.jsを使用してContact Formを作成する方法は以下の通りです。

まず、新しいVueインスタンスを作成します。

new Vue({
  el: '#app',
  data: {
    form : {
      name: '',
      email: '',
      message: ''
    }
  }
})

上記のコードでは、Vueインスタンスのdataオプションでformオブジェクトを定義しています。このformオブジェクトには、フォームの各フィールドに対応するプロパティが含まれています。

次に、HTMLでフォームを作成します。各入力フィールドはv-modelディレクティブを使用してVueインスタンスのデータプロパティにバインドされます。

<template>
  <form @submit.prevent="submit" @reset="onReset">
    <div>
      <label>name</label>
      <input v-model="form.name" />
    </div>
    <div>
      <label>email</label>
      <input v-model="form.email" />
    </div>
    <div>
      <label>message</label>
      <textarea v-model="form.message"></textarea>
    </div>
    <button type="submit">submit</button>
    <button type="reset">reset</button>
  </form>
</template>

上記のコードでは、v-modelディレクティブを使用して各入力フィールドをVueインスタンスのデータプロパティにバインドしています。これにより、ユーザーが入力フィールドに入力した値がVueインスタンスのデータプロパティに自動的に反映されます。

以上で、Vue.jsを使用してContact Formを作成する準備が整いました。次のステップでは、Emailの送信について説明します。

Emailのテンプレートの作成

EmailJSでは、各種のメールを送信するためにはEmailテンプレートが必要です。例えば、Contact Formからのメールと、その受領をユーザーに通知するメールのためには、それぞれ異なるテンプレートを作成します。各テンプレートには、メールの件名、本文、宛先のメールアドレス、返信先のアドレスなどが含まれます。また、テンプレートには動的な内容を追加することも可能で、変数を追加してアプリケーションのコードからそれらを設定することができます。

Emailテンプレートの作成方法は以下の通りです:

1. EmailJSダッシュボードのEmail Templatesページを開きます。
2. Create New Templateボタンをクリックします。
3. テンプレートのプロパティを入力します。
4. テストダイアログを使用してテンプレートをテストするか、自動生成されたJSFiddleを開いてコード例を確認し、テンプレートのパラメータを簡単に入力してメールを送信します。

なお、テンプレートのサイズは50kbを超えないようにしてください。大きなテンプレートを使用するリクエストは無視されます。画像をContentに埋め込む必要がある場合は、埋め込み用の添付ファイルを使用してください。

以上で、Emailのテンプレートの作成方法についての説明を終わります。次のステップでは、Emailの送信について説明します。

Emailの送信

EmailJSを使用してVue.jsアプリケーションからメールを送信する方法は以下の通りです。

まず、EmailJSのsendFormメソッドを使用してメールを送信します。このメソッドは、以下のパラメータを受け取ります:

• serviceID: EmailJSで設定したメールサービスのID
• templateID: EmailJSで作成したメールテンプレートのID
• form: メールの内容となるフォームのデータ
• options: EmailJSの設定オプション

以下に、EmailJSを使用してメールを送信するVue.jsコードの例を示します:

<script>
import emailjs from '@emailjs/browser';

export default {
  methods: {
    sendEmail() {
      emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', this.$refs.form, {
        publicKey: 'YOUR_PUBLIC_KEY',
      })
      .then(() => {
        console.log('SUCCESS!');
      }, (error) => {
        console.log('FAILED...', error.text);
      });
    },
  },
};
</script>

上記のコードでは、sendEmailメソッドが定義されており、このメソッドが呼び出されるとEmailJSのsendFormメソッドが実行され、メールが送信されます。メールの送信が成功すると、コンソールにSUCCESS!と表示され、失敗するとFAILED...と表示されます。

以上で、Vue.jsとEmailJSを使用してContact FormからEmailを送信する方法についての説明を終わります。この情報が役立つことを願っています！.