From fead9d7d25d8acfd37f301a166822f50adbdee28 Mon Sep 17 00:00:00 2001
From: tubone <meitantei-conan@live.jp>
Date: Sun, 7 Mar 2021 13:12:47 +0000
Subject: [PATCH 1/9] =?UTF-8?q?Create=20Blog=20=E2=80=9C2021-03-07-react-h?=
 =?UTF-8?q?ook-form=E3=81=A8getform-io=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=80=81=E3=81=8A=E5=95=8F=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=82=92=E4=BD=9C=E3=82=8D?=
 =?UTF-8?q?=E3=81=86=EF=BC=81=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...34\343\202\215\343\201\206\357\274\201.md" | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 "src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"

diff --git "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md" "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
new file mode 100644
index 0000000000..5e498be51c
--- /dev/null
+++ "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
@@ -0,0 +1,20 @@
+---
+slug: 2021/03/07/react-hook-form
+title: React Hook FormとGetform.ioを使って、お問い合わせフォームを作ろう！
+date: 2021-03-07T13:03:39.605Z
+description: 最近人気のReact Hook FormをGetform.ioと組み合わせてお問い合わせフォームを作りましょう。
+tags:
+  - JavaScript
+  - React
+  - getform.io
+headerImage: https://i.imgur.com/DsrFLOE.png
+templateKey: blog-post
+---
+[React Hook Form](https://react-hook-form.com/jp/)が便利らしいと聞いたので使ってみることにしました。
+
+
+## Table of Contents
+
+```toc
+
+```

From 504bd944f0d2ef11c32437af1fdfbf12ff707bd1 Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Sun, 7 Mar 2021 22:29:13 +0900
Subject: [PATCH 2/9] =?UTF-8?q?Update=202021-03-07-react-hook-form?=
 =?UTF-8?q?=E3=81=A8getform-io=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=80=81=E3=81=8A=E5=95=8F=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=82=92=E4=BD=9C=E3=82=8D?=
 =?UTF-8?q?=E3=81=86=EF=BC=81.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...34\343\202\215\343\201\206\357\274\201.md" | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md" "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
index 5e498be51c..4f2343e684 100644
--- "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
+++ "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
@@ -18,3 +18,29 @@ templateKey: blog-post
 ```toc
 
 ```
+
+## React Hook Form
+
+皆さん、[React Hook Form](https://react-hook-form.com/jp/)を知ってますか？
+
+最近トレンドに乗っかってきた、FormをReact Hooksで簡単に作ることのできる代物です。
+
+![img](https://i.imgur.com/2dqEW7L.png)
+
+特徴として、Hooksを使って簡単にFormが作れる、そして再レンダリングが最小限に抑えられているのでパフォーマンスも高い、らしいです。
+
+## Getform.io
+
+[Getform.io](https://getform.io/)はフォームのバックエンドを提供するすばらしいサービスです。
+
+詳しくは[こちらの過去記事](https://blog.tubone-project24.xyz/2021/02/13/netlify-github-action#getformio)をご確認いただければと思います。
+
+## React Hook Form + Getform.io
+
+合体！
+
+![img](https://i.imgur.com/FzX8di6.jpg)
+
+だめ～となるかと思いましたがうまいことできました。
+
+![img](https://i.imgur.com/yYJBK98.jpg)

From 0d1923f806ac6e39e8474ca8b717d3b943f07b68 Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Sun, 7 Mar 2021 22:46:33 +0900
Subject: [PATCH 3/9] =?UTF-8?q?Update=202021-03-07-react-hook-form?=
 =?UTF-8?q?=E3=81=A8getform-io=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=80=81=E3=81=8A=E5=95=8F=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=82=92=E4=BD=9C=E3=82=8D?=
 =?UTF-8?q?=E3=81=86=EF=BC=81.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...34\343\202\215\343\201\206\357\274\201.md" | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)

diff --git "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md" "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
index 4f2343e684..2544b70fb4 100644
--- "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
+++ "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
@@ -44,3 +44,97 @@ templateKey: blog-post
 だめ～となるかと思いましたがうまいことできました。
 
 ![img](https://i.imgur.com/yYJBK98.jpg)
+
+今回はお問い合わせフォームを作っていきます。
+
+## 実コード
+
+```typescript
+import React, {useState} from "react";
+import { useForm } from "react-hook-form";
+import Button from "./button";
+type Inputs = {
+  name: string,
+  email: string,
+  subject: string,
+  message: string,
+};
+
+const ContactForm = () => {
+  const [serverState, setServerState] = useState({ submitting: false, status: {ok: false, msg: ""} });
+  const { register, handleSubmit, errors } = useForm<Inputs>();
+  const handleServerResponse = (ok: boolean, msg: string) => {
+    setServerState({ submitting: true, status: { ok, msg } });
+  };
+  const onSubmit = (data: Inputs, e: any) => {
+    const formData = new FormData();
+    formData.append("name", data.name)
+    formData.append("email", data.email)
+    formData.append("subject", data.subject)
+    formData.append("message", data.message)
+    fetch('https://getform.io/f/897f187e-876d-42a7-b300-7c235af72e6d', {
+      method: 'POST',
+      body: formData
+    })
+      .then(() => {
+        e.target.reset();
+        handleServerResponse(true, "Submitted!");
+      })
+      .catch((error) => {
+        alert(error)
+        console.error(error)
+        handleServerResponse(false, error.toString());
+      });
+  }
+
+  return (
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <p>
+    <label>Your Name<br/>
+    <input
+      name="name"
+      placeholder="Enter your name"
+      type="text"
+      ref={register({ required: true })} />
+    {errors.name && <span>This field is required</span>}
+    </label>
+    </p>
+    <p>
+    <label> Your email<br/>
+    <input
+      name="email"
+      type="email"
+      placeholder="Enter your email"
+      ref={register({ pattern: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/i, required: true })} />
+    {errors.email && <span>This field is required and only email format</span>}
+    </label>
+    </p>
+    <p>
+    <label>
+      Subject<br/>
+    <input
+      name="subject"
+      type="text"
+      maxLength={30}
+      placeholder="Subject here..."
+      ref={register({required: true })} />
+      {errors.subject && <span>This field is required</span>}
+    </label>
+    </p>
+    <p>
+    <label>
+      Message<br />
+      <textarea
+        name="message" placeholder="Something writing..." rows={6} cols={25} ref={register({required: true })}/>
+        {errors.message && <span>This field is required</span>}
+    </label>
+    </p>
+      <Button dark={serverState.submitting && serverState.status.ok} disabled={serverState.submitting && serverState.status.ok}>
+        { serverState.submitting && serverState.status.ok ? serverState.status.msg: 'Submit'}
+      </Button>
+  </form>
+);
+}
+
+export default ContactForm
+```

From 8305a4fdb8e4731caa3addf869ad70107de15c9a Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Sun, 7 Mar 2021 22:56:56 +0900
Subject: [PATCH 4/9] =?UTF-8?q?Update=202021-03-07-react-hook-form?=
 =?UTF-8?q?=E3=81=A8getform-io=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=80=81=E3=81=8A=E5=95=8F=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=82=92=E4=BD=9C=E3=82=8D?=
 =?UTF-8?q?=E3=81=86=EF=BC=81.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...34\343\202\215\343\201\206\357\274\201.md" | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md" "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
index 2544b70fb4..72e19f4761 100644
--- "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
+++ "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
@@ -49,6 +49,8 @@ templateKey: blog-post
 
 ## 実コード
 
+こんな感じのコンポーネントができました。
+
 ```typescript
 import React, {useState} from "react";
 import { useForm } from "react-hook-form";
@@ -72,7 +74,7 @@ const ContactForm = () => {
     formData.append("email", data.email)
     formData.append("subject", data.subject)
     formData.append("message", data.message)
-    fetch('https://getform.io/f/897f187e-876d-42a7-b300-7c235af72e6d', {
+    fetch('https://getform.io/f/8xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', {
       method: 'POST',
       body: formData
     })
@@ -138,3 +140,26 @@ const ContactForm = () => {
 
 export default ContactForm
 ```
+
+まず、フォームの項目に該当するTypeを作ります。
+
+```typescript
+type Inputs = {
+  name: string,
+  email: string,
+  subject: string,
+  message: string,
+};
+```
+
+今回は名前、email、題名、メッセージを設定します。
+
+次にReact Hook FormのuseFormを使ってレジスターなどを作っていきます。正直これができれば基本的な機能は8割くらい完成です。
+
+```typescript
+const { register, handleSubmit, errors } = useForm<Inputs>();
+```
+
+とりあえず用意するのは、formのrefに設定するregister、submitをコントロールできるhandleSubmit、requireを判定できるerrorsです。
+
+ほかにも、formState.isValidなども使うことができます。

From b0b1f8e47e8f692662d14bc9d4f88e6258fe1869 Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Sun, 7 Mar 2021 23:58:00 +0900
Subject: [PATCH 5/9] =?UTF-8?q?Update=202021-03-07-react-hook-form?=
 =?UTF-8?q?=E3=81=A8getform-io=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=80=81=E3=81=8A=E5=95=8F=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=82=92=E4=BD=9C=E3=82=8D?=
 =?UTF-8?q?=E3=81=86=EF=BC=81.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...34\343\202\215\343\201\206\357\274\201.md" | 54 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md" "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
index 72e19f4761..ddd116d893 100644
--- "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
+++ "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
@@ -62,7 +62,7 @@ type Inputs = {
   message: string,
 };
 
-const ContactForm = () => {
+const ContactForm = (): JSX.Element => {
   const [serverState, setServerState] = useState({ submitting: false, status: {ok: false, msg: ""} });
   const { register, handleSubmit, errors } = useForm<Inputs>();
   const handleServerResponse = (ok: boolean, msg: string) => {
@@ -163,3 +163,55 @@ const { register, handleSubmit, errors } = useForm<Inputs>();
 とりあえず用意するのは、formのrefに設定するregister、submitをコントロールできるhandleSubmit、requireを判定できるerrorsです。
 
 ほかにも、formState.isValidなども使うことができます。
+
+さて、あとは普通のFormを作るようにJSXを書いていきます。
+
+formのonSubmitにはhandleSubmitを指定し、さらにコールバック関数を用意します。
+
+```typescript
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <p>
+    <label>Your Name<br/>
+    <input
+      name="name"
+      placeholder="Enter your name"
+      type="text"
+      ref={register({ required: true })} />
+    {errors.name && <span>This field is required</span>}
+    </label>
+    </p>
+    <p>
+    <label> Your email<br/>
+    <input
+      name="email"
+      type="email"
+      placeholder="Enter your email"
+      ref={register({ pattern: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/i, required: true })} />
+    {errors.email && <span>This field is required and only email format</span>}
+    </label>
+    </p>
+    <p>
+    <label>
+      Subject<br/>
+    <input
+      name="subject"
+      type="text"
+      maxLength={30}
+      placeholder="Subject here..."
+      ref={register({required: true })} />
+      {errors.subject && <span>This field is required</span>}
+    </label>
+    </p>
+    <p>
+    <label>
+      Message<br />
+      <textarea
+        name="message" placeholder="Something writing..." rows={6} cols={25} ref={register({required: true })}/>
+        {errors.message && <span>This field is required</span>}
+    </label>
+    </p>
+      <Button dark={serverState.submitting && serverState.status.ok} disabled={serverState.submitting && serverState.status.ok}>
+        { serverState.submitting && serverState.status.ok ? serverState.status.msg: 'Submit'}
+      </Button>
+  </form>
+```

From 6bc7328333d1c1f18c7dc0814d51dfeed21c92fe Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Mon, 8 Mar 2021 08:24:10 +0900
Subject: [PATCH 6/9] =?UTF-8?q?Update=202021-03-07-react-hook-form?=
 =?UTF-8?q?=E3=81=A8getform-io=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=80=81=E3=81=8A=E5=95=8F=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=82=92=E4=BD=9C=E3=82=8D?=
 =?UTF-8?q?=E3=81=86=EF=BC=81.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...344\275\234\343\202\215\343\201\206\357\274\201.md" | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md" "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
index ddd116d893..d460bf7e4f 100644
--- "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
+++ "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
@@ -164,9 +164,17 @@ const { register, handleSubmit, errors } = useForm<Inputs>();
 
 ほかにも、formState.isValidなども使うことができます。
 
+そして肝心な送信部分ですがこちらは前記事とほぼ同じようにonSubmitの関数を用意して、formのonsubmitに渡してあげればいいだけです。
+
+いいだけですが一つ注意として、渡す際にhandleSubmitにコールバック関数として仕込む、ということです。
+
+コード
+
 さて、あとは普通のFormを作るようにJSXを書いていきます。
 
-formのonSubmitにはhandleSubmitを指定し、さらにコールバック関数を用意します。
+inputやtextareaのref属性にregisterをつければ大丈夫です。
+
+ちなみに、registerのパラメーターで、必須項目やパターンの検査もできます。
 
 ```typescript
   <form onSubmit={handleSubmit(onSubmit)}>

From a3374af63290e23c94b0b305a9c9fac2b64c417d Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Mon, 8 Mar 2021 08:31:57 +0900
Subject: [PATCH 7/9] =?UTF-8?q?Update=202021-03-07-react-hook-form?=
 =?UTF-8?q?=E3=81=A8getform-io=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=80=81=E3=81=8A=E5=95=8F=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=82=92=E4=BD=9C=E3=82=8D?=
 =?UTF-8?q?=E3=81=86=EF=BC=81.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md" | 2 ++
 1 file changed, 2 insertions(+)

diff --git "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md" "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
index d460bf7e4f..e9ab530719 100644
--- "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
+++ "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
@@ -168,6 +168,8 @@ const { register, handleSubmit, errors } = useForm<Inputs>();
 
 いいだけですが一つ注意として、渡す際にhandleSubmitにコールバック関数として仕込む、ということです。
 
+またGetform.ioへのPOSTはJSONではなくurlencodeで渡さないと行けないので、FormDataにappendする形でFormのデータを差し込みます。
+
 コード
 
 さて、あとは普通のFormを作るようにJSXを書いていきます。

From 61d3690445793d216b23cfa3fc72413ca460e5f1 Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Mon, 8 Mar 2021 20:42:59 +0900
Subject: [PATCH 8/9] =?UTF-8?q?Update=202021-03-07-react-hook-form?=
 =?UTF-8?q?=E3=81=A8getform-io=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=80=81=E3=81=8A=E5=95=8F=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=82=92=E4=BD=9C=E3=82=8D?=
 =?UTF-8?q?=E3=81=86=EF=BC=81.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...4\275\234\343\202\215\343\201\206\357\274\201.md" | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md" "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
index e9ab530719..f0ab730c93 100644
--- "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
+++ "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
@@ -178,6 +178,8 @@ inputやtextareaのref属性にregisterをつければ大丈夫です。
 
 ちなみに、registerのパラメーターで、必須項目やパターンの検査もできます。
 
+また、検査が通っていないときに警告メッセージを出すのはerrorsをつかうことで実現できます。
+
 ```typescript
   <form onSubmit={handleSubmit(onSubmit)}>
     <p>
@@ -225,3 +227,13 @@ inputやtextareaのref属性にregisterをつければ大丈夫です。
       </Button>
   </form>
 ```
+
+もう完成です。実に簡単ですね。
+
+react hook formを使わないと、form onchangeのたびに、setStateしなきゃいけなかったですが、すっきり実装できました。
+
+画像
+
+## 結論
+
+楽に実装できたので余った時間は担当ウマ娘に捧げます。

From 16c9d5007179cdd5d6baca1d573babe23d04c83a Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Mon, 8 Mar 2021 23:57:42 +0900
Subject: [PATCH 9/9] =?UTF-8?q?Update=202021-03-07-react-hook-form?=
 =?UTF-8?q?=E3=81=A8getform-io=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=80=81=E3=81=8A=E5=95=8F=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=82=92=E4=BD=9C=E3=82=8D?=
 =?UTF-8?q?=E3=81=86=EF=BC=81.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...34\343\202\215\343\201\206\357\274\201.md" | 113 +++++++++++++++---
 1 file changed, 99 insertions(+), 14 deletions(-)

diff --git "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md" "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
index f0ab730c93..b2528f9b1a 100644
--- "a/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
+++ "b/src/content/2021-03-07-react-hook-form\343\201\250getform-io\343\202\222\344\275\277\343\201\243\343\201\246\343\200\201\343\201\212\345\225\217\343\201\204\345\220\210\343\202\217\343\201\233\343\203\225\343\202\251\343\203\274\343\203\240\343\202\222\344\275\234\343\202\215\343\201\206\357\274\201.md"
@@ -23,7 +23,7 @@ templateKey: blog-post
 
 皆さん、[React Hook Form](https://react-hook-form.com/jp/)を知ってますか？
 
-最近トレンドに乗っかってきた、FormをReact Hooksで簡単に作ることのできる代物です。
+最近トレンドに乗っかってきた、**Form**を**React Hooks**で簡単に作ることのできる代物です。
 
 ![img](https://i.imgur.com/2dqEW7L.png)
 
@@ -37,7 +37,7 @@ templateKey: blog-post
 
 ## React Hook Form + Getform.io
 
-合体！
+**合体！**
 
 ![img](https://i.imgur.com/FzX8di6.jpg)
 
@@ -45,7 +45,7 @@ templateKey: blog-post
 
 ![img](https://i.imgur.com/yYJBK98.jpg)
 
-今回はお問い合わせフォームを作っていきます。
+今回はこちらの2技術を使って、お問い合わせフォームを作っていきます。
 
 ## 実コード
 
@@ -141,6 +141,10 @@ const ContactForm = (): JSX.Element => {
 export default ContactForm
 ```
 
+## 解説
+
+### 準備
+
 まず、フォームの項目に該当するTypeを作ります。
 
 ```typescript
@@ -154,32 +158,89 @@ type Inputs = {
 
 今回は名前、email、題名、メッセージを設定します。
 
-次にReact Hook FormのuseFormを使ってレジスターなどを作っていきます。正直これができれば基本的な機能は8割くらい完成です。
+次に**React Hook Form**のuseFormを使って**register**などを作っていきます。正直これができれば基本的な機能は8割くらい完成です。
 
 ```typescript
 const { register, handleSubmit, errors } = useForm<Inputs>();
 ```
 
-とりあえず用意するのは、formのrefに設定するregister、submitをコントロールできるhandleSubmit、requireを判定できるerrorsです。
+とりあえず用意するのは、formのrefに設定する**register**、onSubmitをコントロールできる**handleSubmit**、requireを検査できる**errors**です。
+
+ほかにも、form全体の項目検査のformState.isValidなども使うことができます。
+
+### Submit
 
-ほかにも、formState.isValidなども使うことができます。
+そして肝心な送信(Submit)部分ですがこちらは[前記事](https://blog.tubone-project24.xyz/2021/02/13/netlify-github-action#getformio)とほぼ同じように**onSubmit**に合わせて処理する関数を用意して、formの**onsubmit属性**に渡してあげればいいだけです。
 
-そして肝心な送信部分ですがこちらは前記事とほぼ同じようにonSubmitの関数を用意して、formのonsubmitに渡してあげればいいだけです。
+........いいだけですが一つ注意として、渡す際に**handleSubmit**で関数をラップしないと、form情報がうまく取れない、ということです。
+
+またGetform.ioへのPOSTはJSONではなく**mulitpart/form-data**で渡さないと行けないので、FormDataにappendする形でFormのデータを差し込みます。
+
+```typescript
+  const onSubmit = (data: Inputs, e: any) => {
+    const formData = new FormData();
+    formData.append("name", data.name)
+    formData.append("email", data.email)
+    formData.append("subject", data.subject)
+    formData.append("message", data.message)
+    fetch('https://getform.io/f/8xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', {
+      method: 'POST',
+      body: formData
+    })
+      .then(() => {
+        e.target.reset();
+        handleServerResponse(true, "Submitted!");
+      })
+      .catch((error) => {
+        alert(error)
+        console.error(error)
+        handleServerResponse(false, error.toString());
+      });
+  }
+```
 
-いいだけですが一つ注意として、渡す際にhandleSubmitにコールバック関数として仕込む、ということです。
+また、第二引数として、formのeventが取得できます。おそらくEventは**React.BaseSyntheticEvent**だとは思うのですがうまく型が通せなくて悩みだしてしまいましたのでとりあえずanyにしてしまいました。
 
-またGetform.ioへのPOSTはJSONではなくurlencodeで渡さないと行けないので、FormDataにappendする形でFormのデータを差し込みます。
+一応、[こちら](https://github.com/react-hook-form/react-hook-form/discussions/4376)で質問は投げてますが英語がへたくそで誰も答えてくれそうにありませんね。
 
-コード
+特にeventでデータを取る必要はなさそうですが、たとえば送信時にFormの内容をリセットするなどの処理を書きたいときは
+
+```typescript
+        e.target.reset();
+        handleServerResponse(true, "Submitted!");
+```
+
+とやってあげればOKです。
+
+### Formを書く
 
 さて、あとは普通のFormを作るようにJSXを書いていきます。
 
-inputやtextareaのref属性にregisterをつければ大丈夫です。
+唯一違うところはinputやtextareaのref属性にregisterをつけなければいけないですが、それだけで大丈夫です。
+
+```typescript
+      <textarea
+        name="message" placeholder="Something writing..." rows={6} cols={25} ref={register({required: true })}/>
+```
 
 ちなみに、registerのパラメーターで、必須項目やパターンの検査もできます。
 
+```typescript
+    <input
+      name="email"
+      type="email"
+      placeholder="Enter your email"
+      ref={register({ pattern: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/i, required: true })} />
+```
+
 また、検査が通っていないときに警告メッセージを出すのはerrorsをつかうことで実現できます。
 
+```typescript
+ {errors.subject && <span>This field is required</span>}
+```
+
+Form部分をすべて実装するとこんな感じです。
+
 ```typescript
   <form onSubmit={handleSubmit(onSubmit)}>
     <p>
@@ -230,10 +291,34 @@ inputやtextareaのref属性にregisterをつければ大丈夫です。
 
 もう完成です。実に簡単ですね。
 
-react hook formを使わないと、form onchangeのたびに、setStateしなきゃいけなかったですが、すっきり実装できました。
+React Hook Formを使わないと、[前記事](https://blog.tubone-project24.xyz/2021/02/13/netlify-github-action#getformio)のように、formのonChangeのたびに、setStateしなきゃいけないのですが、すっきり実装できました。
+
+React Hook Formを使わないと
+
+```typescript
+  handleChange(e) {
+    this.setState({ [e.target.name]: e.target.value });
+  }
+  
+(中略)
+                  <input
+                    type="text"
+                    name="name"
+                    className="form-control"
+                    maxLength="30"
+                    minLength="2"
+                    required
+                    placeholder="Enter your name"
+                    onChange={this.handleChange}
+                  />
+```
+
+となります。
+
+出来上がりはただのFormですのでかっこいいCSSを当ててくださいね。
 
-画像
+![img](https://i.imgur.com/DsrFLOE.png)
 
 ## 結論
 
-楽に実装できたので余った時間は担当ウマ娘に捧げます。
+楽に実装できたので余った時間は担当**ウマ娘**に捧げます。