EmailJS を使用して Vue.js アプリケーションからメールを送信する方法

数日前、私は単純な Vue プロジェクトに取り組むことに決め、作成した連絡先からメールを送信する必要がありました。誰かが私の連絡先フォームに記入するたびに、自動化された電子メールを受け取りたいと思っていました。

そこで私は検索を開始し、EmailJs にたどり着きました。この記事を書くことにしたのは、彼らのドキュメントが素晴らしく、とても使いやすいと感じたからです。また、それが誰かの助けになることを願っています:)

始めましょう!

この記事では、EmailJS を使用して Vuejs アプリケーションからメールを送信する方法を紹介します。

続行する前に、Vue CLI を使用してミニ デモ プロジェクトを作成するため、コンピューターに Vue CLI がインストールされていることを前提としています。そうでない場合は、ここでインストール方法を確認してください。

このコマンドを使用してプロジェクトを作成します:

vue create vue-emailjs-demo

次に、デフォルトのプリセットを選択するか、機能を手動で選択するオプションが表示されます. defaultを選択 .

新しいプロジェクト ディレクトリが作成され、次のコマンドを使用してそこに移動できます:

cd vue-emailjs-demo

EmailJS のインストール方法

EmailJS は、クライアント側のテクノロジーのみを使用してメールを送信するのに役立ちます。サーバーは必要ありません。EmailJS をサポートされているメール サービスのいずれかに接続し、メール テンプレートを作成し、JavaScript ライブラリを使用してメールをトリガーするだけです。

コードを書き始める前に、EmailJS アカウントを作成する必要があります。アカウントがあれば、メール テンプレートを作成し、自動メールの送信先のメールを選択できます。

新しいアカウントにサインインすると、ダッシュボードに移動します。

メール テンプレートの作成方法

電子メール テンプレートでは、必要に応じて、ほぼすべてのフィールドに動的変数を含めることができます (たとえば、件名、コンテンツ、TO 電子メール、FROM 名など)。それらは JavaScript 呼び出しから取り込まれます。これについては後ほど説明します。

まず、メールサービスを追加しましょう。私は Gmail を選択しましたが、ニーズに最も適したサービスを自由に選択できます。

また、Service ID の名前を考えたくない場合は、 、検索アイコンをタップすると、自動的に生成されます。

次に、メール テンプレートを作成します。テンプレート ページに移動します。新しいテンプレートを作成します。メール テンプレートは、メールの件名、内容、送信先などを定義します。

上記の {{from_name}} のような二重中括弧のセット 変数です。ユーザーがフォームに入力すると、これらの変数を使用してその情報が EmailJS に渡されます。

以下は、テンプレートで使用可能なフィールドの簡単な説明です:

• 件名: メールの件名。
• コンテンツ: メールの本文。ユーザー メッセージ、名前、返信先住所をここに渡します。
• メール送信先: このメールの宛先が含まれます。
• 名前から : これはオプションです。ただし、そこに自分の名前を書くことはできます。
• メールから: 受信者に表示される送信者の電子メール アドレス。デフォルトのメール アドレス チェックボックスが有効になっている場合、EmailJS は使用中のメール サービスに関連付けられたメール アドレスを使用します。
• 返信先: 返信の送信先のメール アドレスを設定します。
• BCC と CC: これら 2 つのフィールドは、通常、リストした全員にメッセージのコピーを送信するために使用されます。 Reply To 、 BCC and CC 可能な限りシンプルに保ちたいため、このガイドでは使用しません。さらに詳しい情報が必要な場合は、こちらの EmailJS ドキュメントを確認してください。

注:この記事のある時点では、Service ID を使用します。 と Template ID . User ID も必要です . User ID を見つけることができます 統合 ダッシュボードの一部。詳細をクリップボードにコピーして、必要なときに貼り付けることができます。

EmailJS をアプリケーションにインストールする方法

コードに移ります :) アプリケーションに EmailJS をインストールするには、次のコマンドを使用します:

npm install emailjs-com --save

非常にシンプルなコンタクトフォームからメールを送信します。名前 (送信者)、電子メール (送信者)、メッセージの内容などのデータを収集します。簡単なこと！

HelloWorld.Vue を編集できます Vue CLI を使用したときに自動的に作成されたコンポーネント、または ContactForm.vue という新しいコンポーネントを作成できます .私は後者をやります。

以下では、コンタクト フォーム コンポーネント ContactForm.vue を作成します。 .

template から始めましょう :

<template>
    <div class="container">
        <form>
          <label>Name</label>
          <input 
            type="text" 
            v-model="name"
            name="name"
            placeholder="Your Name"
          >
          <label>Email</label>
          <input 
            type="email" 
            v-model="email"
            name="email"
            placeholder="Your Email"
            >
          <label>Message</label>
          <textarea 
            name="message"
            v-model="message"
            cols="30" rows="5"
            placeholder="Message">
          </textarea>
          
          <input type="submit" value="Send">
        </form>
    </div>
</template>

マークアップの説明

先ほど申し上げたように、非常にシンプルなコンタクトフォームからメールを送信します。 div を作成します フォームのコンテンツを含む要素。フォームにスタイルを追加するので、クラス container を追加します div まで

<style scoped>
* {box-sizing: border-box;}

.container {
  display: block;
  margin:auto;
  text-align: center;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 50%;
}

label {
  float: left;
}

input[type=text], [type=email], textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}
</style>

次のコマンドでサーバーを起動できます:

npm run serve

ここで、ブラウザで localhost:8080 を開くと、フォームが表示されます:

sendEmail というメソッドも作成します。 データの送信を処理します。しかしその前に emailjs をインポートする必要があります 私たちのファイルで。

script のすぐ下に次の行を追加します。 :

import emailjs from 'emailjs-com';

以下は、script で必要な残りのコードです。 :

<script>
export default {
  name: 'ContactUs',
  data() {
    return {
      name: '',
      email: '',
      message: ''
    }
  },
  methods: {
    sendEmail(e) {
      try {
        emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target,
        'YOUR_USER_ID', {
          name: this.name,
          email: this.email,
          message: this.message
        })

      } catch(error) {
          console.log({error})
      }
      // Reset form field
      this.name = ''
      this.email = ''
      this.message = ''
    },
  }
}
</script>

このコードの動作

try...catch を使用しました 上記ですが、必ずしも使用する必要はありません。 お願いしたときのことを思い出してください サービス ID、テンプレート ID、およびユーザー ID の詳細をクリップボードにコピーして、必要なときに貼り付けますか?さて、あなたは今それらを絶対に必要としています！したがって、スニペットのその部分を実際の詳細に置き換えてください。

emailjs.sendForm() sendEmail() に渡されたサービス ID、テンプレート ID、ユーザー ID、およびフォーム データを渡した後、EmailJS にデータを送信する方法です。 . catch() で発生したエラーを console.log() します。 ブロック。

sendForm() に注意することが重要です 指定された電子メール テンプレートと渡されたフォーム データに基づいて電子メールを送信します。そのため、フォームの入力名が EmailJS テンプレートの変数と同じであることを確認してください。

以下は、(送信者の) 名前、(送信者の) 電子メール、およびメッセージ コンテンツを含む、変更した EmailJS テンプレートです。

それだけです!

To Email を確認してください アドレスがテンプレートに含まれており、メールが既にそこに送信されているはずです。 Test it で遊ぶこともできます または遊び場 必要に応じて、テンプレートの右上隅に機能を追加します。

GitHub リポジトリ

この記事のコードは、私の GitHub アカウントで見つけることができます。

この記事が役に立った場合は、お気軽に共有してください。読んでくれてありがとう!