EmailJSでVue.jsアプリケーションからメールを送信する方法【初心者向けガイド】

数日前、シンプルなVueプロジェクトに取り組んでいた際、作成したばかりのコンタクトフォームからメールを送信する必要がありました。誰かがフォームに入力するたびに、自動的に通知メールを受け取りたかったのです。

いろいろ調べていく中でEmailJSに出会いました。公式ドキュメントが充実していて、とても使いやすかったため、この記事としてまとめることにしました。この記事がどなたかの参考になれば幸いです :)

はじめよう！

この記事では、EmailJSを使ってVue.jsアプリケーションからメールを送信する手順を解説します。

先に進む前に、お使いの環境にVue CLIがインストールされていることを前提としています。本記事ではVue CLIを使ってミニデモプロジェクトを作成するためです。まだインストールされていない場合は、まず公式ドキュメントでインストール方法を確認しておきましょう。

次のコマンドでプロジェクトを作成します：

vue create vue-emailjs-demo

デフォルトのプリセットを選ぶか、機能を手動で選択するかを尋ねられるので、defaultを選択してください。

新しいプロジェクトディレクトリが作成されるので、次のコマンドで移動します：

cd vue-emailjs-demo

EmailJSとは？インストール方法

EmailJSを使うと、クライアントサイドの技術だけでメールを送信できます。バックエンドのサーバーは一切不要です。対応しているメールサービスにEmailJSを接続し、メールテンプレートを作成し、JavaScriptライブラリでメール送信をトリガーするだけという手軽さが魅力です。

コードを書き始める前に、まずEmailJSのアカウントを作成しましょう。アカウントがあれば、メールテンプレートの作成や、自動送信メールの宛先アドレスの設定ができるようになります。

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

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

メールテンプレートでは、ほぼすべてのフィールド（件名、本文、宛先メールアドレス、差出人名など）に動的な変数を埋め込めます。これらの変数には、JavaScriptからの呼び出し時に値が渡されます。詳細は後述します。

まずはメールサービスを追加しましょう。筆者はGmailを選択しましたが、ご自身のニーズに合ったサービスを自由に選べます。

また、Service IDの名前を考えるのが面倒な場合は、検索アイコンをクリックすれば自動的に生成してくれます。

次にメールテンプレートを作成します。テンプレートページに移動し、新規テンプレートを作成してください。このテンプレートで、メールの件名・本文・送信先などを定義します。

上記のように {{from_name}} のような二重波括弧で囲まれた部分が変数です。ユーザーがフォームに入力すると、その情報がこれらの変数を通じてEmailJSに渡されます。

テンプレートで利用可能な主なフィールドを簡単に説明します：

• Subject（件名）：メールの件名です。
• Content（本文）：メールの本文です。ここにユーザーのメッセージ・名前・返信用メールアドレスを渡します。
• To Email（宛先）：このメールの送信先アドレスです。
• From Name（差出人名）：任意項目ですが、自分の名前を記入できます。
• From Email（差出人メールアドレス）：受信者側に表示される送信元アドレスです。「デフォルトのメールアドレスを使用」チェックボックスが有効な場合、EmailJSは接続中のメールサービスに紐づくアドレスを使用します。
• Reply To（返信先）：返信メールの送信先アドレスを指定します。
• BCC / CC：登録した複数の宛先にメッセージのコピーを送るためのフィールドです。本ガイドではできるだけシンプルにするため、Reply To・BCC・CCは使用しません。詳しくはEmailJSの公式ドキュメントをご覧ください。

注意：この記事の後半で Service ID と Template ID を使用します。加えて User ID も必要です。User IDはダッシュボードの「Integration（統合）」セクションで確認できます。あらかじめクリップボードにコピーしておくと、必要なときにすぐ貼り付けて便利です。

アプリケーションへのEmailJSのインストール

それではコードに移りましょう :) 次のコマンドでアプリケーションにEmailJSをインストールします：

npm install emailjs-com --save

今回作成するのは、非常にシンプルなコンタクトフォームです。フォームでは、送信者の名前・メールアドレス・メッセージ内容を入力してもらいます。とてもシンプルですね！

Vue CLIが自動生成した HelloWorld.vue コンポーネントを編集しても構いませんし、新しく ContactForm.vue というコンポーネントを作成してもOKです。ここでは後者の方法で進めます。

以下、コンタクトフォームコンポーネント 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 クラスを付与します。

<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 タグの直下に以下の1行を追加してください：

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})
      }
      // フォームの入力内容をリセット
      this.name = ''
      this.email = ''
      this.message = ''
    },
  }
}
</script>

このコードの仕組み

上記では try...catch を使っていますが、必須ではありません。Service ID・Template ID・User IDを事前にコピーしておくように言ったのを覚えていますか？まさに今こそその出番です！スニペット内の該当部分を、ご自身の実際の値に置き換えてください。

emailjs.sendForm() は、Service ID・Template ID・User ID、そして sendEmail() に渡されたフォームデータをもとに、EmailJSへデータを送信するメソッドです。エラーが発生した場合は catch() ブロック内で console.log() によりログ出力しています。

重要なポイントとして、sendForm() は指定されたメールテンプレートとフォームデータに基づいてメールを送信します。そのため、フォームの input 要素の name 属性が、EmailJSテンプレート内の変数名と一致していることを必ず確認してください。

以下は、送信者の名前・メールアドレス・メッセージ内容を組み込んだ筆者のEmailJSテンプレートです。

これで完成です！

テンプレートに設定した To Email のアドレスを受信箱で確認してみてください。すでにメールが届いているはずです。テンプレート画面右上にある「Test it」や「Playground」機能を使って動作を試すこともできます。

GitHubリポジトリ

本記事で使用したコードは、筆者のGitHubアカウントで公開しています。ぜひ参考にしてください。

この記事が役に立ったと思ったら、ぜひシェアしてください。最後までお読みいただきありがとうございました！