Gatsbyで<script>タグを埋め込む方法～お問合せフォームでreCAPCHAを使いたくて～

### 環境
Gatsbyに[FlexForm](https://www.flexyform.com/)プラグインをインストールしてお問い合わせページを作成・運用している。

### 目的
スパム送信を防ぐため、お問い合わせフォームページで<strong>reCAPCHA</strong>を利用したい。

### 方法
FlexFormによると、以下のスクリプトをソースコードに追加するとのこと。
```
<script src="https://www.google.com/recaptcha/api.js?render=XXXXXxxXXXXXXXXXX2Z6XXXXXXXXXXxxxxx-MXXXXX"></script>
<script src="https://www.flexyform.com/js/recaptcha.js"></script>
<input type="hidden" name="_recaptcha" id="_recaptcha"/>
```

<br />

さて、
# Gatsbyページに`<script>`コードを埋め込むには？？

<strong>結論</strong>：`<Helmet>`タグを使う。

## 手順
+ Helmetプラグインをインストール
参考：[GatsbyでSEO対策をする](https://qiita.com/Da1k17/items/96abef31612c71020ef0)

+ お問合せページ（contact.jsx）にコードを追加。まずHelmetインポート文を宣言記述
```
import { Helmet } from "react-helmet"
```

+ FlexForm指定の`<scrip>`タグを`<Helmet>`タグで挟んで記述
```
<Helmet>
   <script src="https://www.google.com/recaptcha/api.js?render=XXXXXxxXXXXXXXXXX2Z6XXXXXXXXXXxxxxx-MXXXXX"></script>
   <script src="https://www.flexyform.com/js/recaptcha.js" />
</Helmet>
```

+ `<Form>`内の適当な場所にFlexForm指定の`<input>`タグを記述
```
<input type="hidden" name="_recaptcha" id="_recaptcha"/>
```

+ reCAPCHAが表示された。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/a15479bf-4766-08bc-4388-30ba06e6a34a.png)


##### ソースコード全文
```react
// contact.jsx
// bootstrapを使っているので<input>タグはbootstrap形式の<Form.Control...>になっている.

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { Container, Button, Form } from 'react-bootstrap'
import Style from './contact.module.css'

import { Helmet } from "react-helmet" 


const Contact = () => (
    <>
    <Layout>
      <SEO title="お問い合わせ" />
      <Helmet>
          <script src="https://www.google.com/recaptcha/api.js?render=6XXXXXXXXXXXXXXXXgLyXXXXXXXXXXX-XXXXph" />
          <script src="https://www.flexyform.com/js/recaptcha.js" />
      </Helmet>

      <Container fluid="md">
      <h1 style={{fontSize:`1.2rem`}}>お問い合わせ（Contact Form）</h1>
      <p style={{color:`gray`}}>
      </p>
        <form method="post" action="https://www.flexyform.com/f/0d9a762c9e63a346d30047f4900222125d7208d2">
            <Form.Control type="text" as="input" placeholder="お名前（Name）※仮名でも構いません" name="name" required />
            <br />
            <Form.Control type="email" as="input" placeholder="メールアドレス（Email address）" name="email" required />
            <br />
            <Form.Control type="email" as="input" placeholder="メールアドレス（確認用にもう一度打ってください）" name="_reply_to" required />
            <br />
            <Form.Control as="textarea" placeholder="お問い合わせ内容（Message）" rows="3" name="message" required />
            <Form.Control as="input" style={{visibility:`hidden`}} name="_recaptcha" id="_recaptcha"/>
            <Button variant="info" type="submit">送信</Button>
        </form>
      </Container>
    </Layout>
    </>
)

export default Contact
```

<br />

:::note info 追記
reCAPCHAはこのようなものではなくなりました
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/f042b94f-bbae-bea2-95c8-a6424df6ddbe.png)

これはバージョン２。現在のreCAPCHAはバージョン３になっている。reCAPTCHA v3 はバックグラウンドで動作し、メールフォームやコメント欄に投稿しようとしている何者かが「人間らしい振る舞い(操作)をしているか」を常に監視しているため、読みにくい文字を入力させたりチェックボックスにチェックを入れる必要が無くなった。
:::

### 参考
[FLEXFORM](https://www.flexyform.com/)
[Add Script tag in Gatsby [closed]](https://stackoverflow.com/questions/61877792/add-script-tag-in-gatsby)
[「reCAPTCHAで保護されています」って何？表示を消す方法はある？](https://koma.blog/recaptcha-v3/)


# 本の宣伝
### Gatsbyバージョン５>>>>改訂２版

**前編**の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と**後編**の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ **https://yah-space.work**
<hr />


静的サイトジェネレーターGatsby**最新バージョン５**の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《**Slicy API**》《**Script API**》《**Head API**》を紹介、実装方法も。《**Gatsby Functions**》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！


<a href="https://www.amazon.co.jp/gp/product/B0BXNJTJMY?&linkCode=li3&tag=kokkahasan-22&linkId=93c5e3bf1f226141ddc807300e81b07a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXNJTJMY&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXNJTJMY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B0BXXBDJDJ?&linkCode=ll1&tag=kokkahasan-22&linkId=df7e600968c58c0090cd735681c6732c&language=ja_JP&ref_=as_li_ss_tl">Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）</a>

<br />
<br />

**最新Gatsby５**とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《**サイト内検索機能**》をGatsbyバージョン４からの新機能《**Gatsby Functions**》と《**microCMSのqパラメータ**》で実装。また、**SEOコンポーネントをカスタマイズ**して**microCMS APIをツイッターカードに表示**させる**OGPタグ**実装方法も解説。

<a href="https://www.amazon.co.jp/gp/product/B0BXN99WSV?&linkCode=li3&tag=kokkahasan-22&linkId=68f1905bf915f6bd365559a0c65bcdd1&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXN99WSV&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXN99WSV" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/dp/B0BXN99WSV?_encoding=UTF8&qid=&sr=&linkCode=li2&tag=kokkahasan-22&linkId=f02e2f9c50736e3f074b38b4cd73894a&language=ja_JP&ref_=as_li_ss_il">Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）</a>

<br />