React Hook Form・Yup・Chakra UI・microCMSでお問い合わせフォームを作成

旧ブログ・当ブログともにお問い合わせフォームを持っていませんでした。
理由は、様々なSNSでやり取りができるので不要かな？と思っていたからです。

では、なぜ作ったのかは主に以下の理由からです。
● SNSで気軽にやり取りできるのは、近しい人だから
● 仕事や個人的なご相談のお問い合わせを受け付ける際に簡易的に提示できるフォームが欲しかったから
● 第三者に自分のアドレス・電話番号などを不要に見せたくなかったから
● Slackで管理したいから
● 技術的に勉強になるから

使用したライブラリ等・環境

● Node v16.13.1
● npm v8.1.0
● react-hook-form
● @chakra-ui/react
● yup
● microCMS
● Slack Webhook
to Package.json

File

● /pages/contact/index.tsx
● /pages/api/contact.ts
その他のcomponentsはコード内参照

感想

Yup便利

たったこれだけでスキーマの定義ができる。
コンポーネント内部でどういったバリデーションを適用している方一目でわかるので更新性も高い。

const schema = yup
  .object({
    name: yup.string().trim().required("お名前をご記入ください。"),
    mail: yup
      .string()
      .email("メールアドレスの形式が不正です")
      .required("メールアドレスをご記入ください。"),
    body: yup.string().trim().required("お問い合わせ内容をご記入ください。"),
  })
  .required();

React Hook Form + Chakra UIの組み合わせは開発体験が素晴らしい

まずは、お互いのサービスページ内に導入方法が記載されているので把握しやすい点がいい。
React Hook Form - UI ライブラリを使用する
Chakra UI + React Hook Form
また、React Hook Formが用意しているHooksが多様にあるため、様々なUIライブラリとの相性が良さそう。
ちなみにemail()の関数では下記の正規表現を元にバリデーションを行っているようです。
かなり厳密...w

let rEmail = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i; // eslint-disable-next-line

Chakra UIのuseToast()はスタイリッシュ

たったこれだけで送信の成功時・エラー時の分岐ができる上に、わかりやすいNoticeを生成できる。

const toast = useToast(); // hooks
const isSuccess = await sendContact(data); // success or error.
toast({
      status: isSuccess ? "success" : "error",
      title: isSuccess
        ? "お問い合わせありがとうございます!"
        : "お問い合わせでエラーが発生しました...",
      description: isSuccess
        ? "ご確認の上、ご記載いただいたメールアドレス宛にご連絡致します。"
        : "ページの読み込み等を行って再度お問い合わせください。",
      position: "top",
      isClosable: true,
      duration: 5000,
    });

microCMS + Slackの組み合わせは色々試せそう

個人的にLINEやTwitterなどでの連絡手段よりSlackを使用する。
そのためSlackで全部管理・確認ができるようになることは大きなメリットがある。
今回、microCMSへPOSTしたContactデータは、正常に作成されると同時にSlackへWebhookを介して通知されるようにしている。
microCMS側では、細かなイベントタイミングを設定できるのでContact以外の使用方法がありそう。
例えば、コメント機能とか？

BFFとしてのNextJS API Routesの立ち位置

NextJSで使用できるAPI Routesは簡易的にAPIを作成できる。
色々と手作りしないといけないのでしっかりとしたAPIを構築するには手を焼きそう。
ただ、APIをラップする機能であったり、APIKeyを隠蔽したりする使用方法であれば比較的簡易的に構築できる。
BFFとしてのアプローチとしては、最適解のような気もしています・・・知見不足なだけかもだけど...
より一層フロントエンドエンジニアがフロントで使いやすいようにAPI周りを作成していく事は増えると思うので、
引き続き学んでいきたい箇所。

まとめ

これで念願の個人お問合せフォームが出来ましたw

お問い合わせはこちら