EmailJSで簡単にお問い合わせフォーム作成

前提

現在Next.jsで作成中のポートフォリオサイトにEmailJSでお問い合わせフォームを実装したい。

技術スタックNext/TypeScript/tailwindcss

EmailJSとは？

JavaScriptから超簡単にメールを送信できるサービス。（最高やん）

導入手順

①EmailJSにサインアップ

②メールテンプレートの作成

送信するemailのテンプレートを作成します。（とっても簡単）
黄色いマーカー部分をクリック！

すると、デフォルトのメールテンプレートが簡単に作成できます。
必要に応じてテンプレートを変更してください！
{{}}の箇所にフォームから送信した値が入ってきます。

③サービスの作成

使用するメールサービスの登録を行います。

黄色マーカー部分をクリックして、お好きなメールサービスを選択してください。
テストでやるならgmailがいいのではないでしょうか。

④ポートフォリオサイトに導入

環境変数の準備

まずは、外部に漏れてはいけない情報を環境変数として用意します。
ルートディレクトリに.env.localを作成し、Service ID・User ID・Template IDを環境変数として定義します。

Service IDは"Email Services"、User IDは"Integration"、Template IDは"Email Templates"に記載されています。

今回はNext.jsで実装しているので、フロントエンドで使用する環境変数は先頭にNEXT_PUBLIC_を付ける必要があります

.env.local

NEXT_PUBLIC_EMAILJS_USER_ID = "{自分のuserId}"
NEXT_PUBLIC_EMAILJS_SERVICE_ID = "{自分のservicdeId}"
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID = "{自分のTemplateId}"

ライブラリを導入

npm install @emailjs/browser
次に、ライブラリのインストール

お問い合わせフォームコンポーネントを作成

TypeScriptとtailwindcssで実装していますが、今回はEmailJSの説明なのであまり説明していません。
また、細かいバリデーション等も今回は省いてます。お許しくださいm(__)m

EmailJSのライブラリから必要な関数をimport

import { init, send } from '@emailjs/browser'

フォームの入力内容をuseStateで管理

const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [content, setContent] = useState('')

お問い合わせフォーム(view部分)を作成

return (
    <div className="mt-20">
      <h2 className="text-center text-2xl font-bold">お問い合わせフォーム</h2>
      <div className="mx-auto mt-9 max-w-lg">
        <form
          onSubmit={(e) => onSubmit(e)}
          className="w-full space-y-9 rounded bg-white p-3  shadow-2xl"
        >
          <div>
            <label htmlFor="name" className=" mb-3 block font-bold text-black">
              お名前
            </label>
            <input
              className={formInput}
              id="name"
              type="text"
              placeholder="name"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
          </div>
          <div>
            <label htmlFor="email" className=" mb-3 block font-bold text-black">
              メールアドレス
            </label>
            <input
              className={formInput}
              id="email"
              type="text"
              placeholder="[e-mail]"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div>
            <label
              htmlFor="content"
              className=" mb-3 block font-bold text-black"
            >
              お問い合わせ内容
            </label>
            <textarea
              className={formInput}
              id="content"
              value={content}
              onChange={(e) => setContent(e.target.value)}
            />
          </div>
          <input
            type="submit"
            className="block w-full rounded bg-blue-700 py-2 px-3 text-lg font-bold text-white  shadow transition-all hover:cursor-pointer hover:opacity-80"
          />
        </form>
      </div>
    </div>
  )

メール送信のロジック部分を作成

 const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    // フォームのデフォルトの動作をキャンセル
    e.preventDefault()

    // 必要なIDをそれぞれ環境変数から取得
    const userID = process.env.NEXT_PUBLIC_EMAILJS_USER_ID
    const serviceID = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID
    const templateID = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID

    if (userID && serviceID && templateID) {
      // emailJS初期化
      init(userID)

      // emailJS送信データを定義
      const params = {
        from_name: name,
        email: email,
        content: content,
      }

      // emailJS送信
      try {
        await send(serviceID, templateID, params)
        alert('送信成功')
      } catch (error) {
      // 送信失敗したらalertで表示
        alert(error)
      }
    }
  }

完成図

こんな感じになります！

後は、送信ボタンを押して、実際に自分のメールアドレスにemailが届くか確認してみてください！

最後に

今回が初投稿だったのですが、意外と楽しく書けました！
今後も自分の備忘録代わりに色々投稿していこうと思いますので、暇な時に見つけたらぜひ見てください！