【React】絶対に真似してはいけないGoogle Formのお問合せフォーム化【Google Forms】

%.@.[1409780750,"name",null,0,[[1064710882,[],false,[],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,"name"]],"i1","i2","i3",false]

const FormKeys = {
  formUrl: "https://docs.google.com/forms/u/3/d/e/1FAIpQLScPFoCDYJyRg-zPiRFY3httbaPisHSlSJhau4ml_75LfFoWKQ/formResponse",
  name: "entry.1064710882",
  gender: "entry.738150545",
  language: "entry.325866619",
  message: "entry.1751766225"
};

export default FormKeys;

// Form.tsx
// いろいろと割愛
const Form: React.VFC = () => {
  const [loading, setLoading] = useState(false);
  const [name, setName] = useState('');
  const [gender, setGender] = useState('');
  const [message, setMessage] = useState('');
  const [language, setLanguage] = useState({
    JavaScript: false,
    TypeScript: false,
    Ruby: false,
    Python: false,
    other: false,
  });

  const navigate = useNavigate();

  const handleClick = () => {
    setLoading(true)
    const submitParams = new FormData();

    submitParams.append(FormKeys.name, name);
    submitParams.append(FormKeys.gender, gender);
    submitParams.append(FormKeys.message, message);
    Object.entries(language).forEach(([key, value]) => {
      value && submitParams.append(FormKeys.language, key);
    });

    Axios.post(FormKeys.formUrl, submitParams).then(() => {
      setLoading(false);
      navigate("/complete");
    }).catch(() => {
      setLoading(false);
      console.log('エラーです');
    })
  };

  return(
    <div>
      <Typography variant="h5" align="center">真似しちゃいけないフォーム</Typography>
      <form>
        <NameField
          name={name}
          setName={setName}
        />
        <GenderField
          gender={gender}
          setGender={setGender}
        />
        <LanguageField
          language={language}
          setLanguage={setLanguage}
        />
        <MessageField
          message={message}
          setMessage={setMessage}
        />
        <Button fullWidth variant="contained" onClick={handleClick}>
          フォームを送信
        </Button>
      </form>
      <Backdrop
        open={loading}
      >
        <CircularProgress color="inherit" />
      </Backdrop>
    </div>
  );
};

export default Form;

// NameField.tsx
const NameField: React.VFC<NameFieldProps> = (props) => {
  const {name, setName} = props;

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
    setName(event.target.value);
  };

  return (
    <FormControl>
      <TextField
        type="text"
        value={name}
        label="名前"
        onChange={(event) => handleChange(event)}
        variant="standard"
      />
    </FormControl>
  );
};

export default NameField;

const handleClick = () => {
  setLoading(true)
  const submitParams = new FormData();

  submitParams.append(FormKeys.name, name);
  submitParams.append(FormKeys.gender, gender);
  submitParams.append(FormKeys.message, message);
  Object.entries(language).forEach(([key, value]) => {
    value && submitParams.append(FormKeys.language, key);
  });

  Axios.post(FormKeys.formUrl, submitParams).then(() => {
    setLoading(false);
    navigate("/complete");
  }).catch(() => {
    setLoading(false);
    console.log('エラーです');
  })
};

const FormKeys = {
  formUrl: "https://docs.google.com/forms/u/3/d/e/1FAIpQLScPFoCDYJyRg-zPiRFY3httbaPisHSlSJhau4ml_75LfFoWKQ/formResponse",
  name: "entry.1064710882",
  gender: "entry.738150545",
  language: "entry.325866619",
  message: "entry.1751766225",
  corsAnywhere: "https://[herokuのアドレス].herokuapp.com/"
};

export default FormKeys;

const handleClick = () => {
  setLoading(true)
  const submitParams = new FormData();

  submitParams.append(FormKeys.name, name);
  submitParams.append(FormKeys.gender, gender);
  submitParams.append(FormKeys.message, message);
  Object.entries(language).forEach(([key, value]) => {
    value && submitParams.append(FormKeys.language, key);
  });

  // これ↓
  Axios.post(FormKeys.corsAnywhere + FormKeys.formUrl, submitParams).then(() => {
    setLoading(false);
    navigate("/complete");
  }).catch(() => {
    setLoading(false);
    console.log('エラーです');
  })
};

function SendMail(e) {
  FormApp.getActiveForm();
  // 投稿内容を代入
  let itemResponses = e.response.getItemResponses();

  // 投稿内容を整形
  let itemResponsesFormatted = new Object();
  for(let i=0; i<itemResponses.length; i++){
    let itemResponse = itemResponses[i];
    let title = itemResponse.getItem().getTitle();
    let content = itemResponse.getResponse();
    itemResponsesFormatted = Object.assign(itemResponsesFormatted, {[title]: content})
  }
}

function EmailNotice(itemResponsesFormatted) {
  let subject = "起きなさい！問い合わせがあったわよ！";
  let body = "";
  body += "ふ〜ん、あなたなんかにも問い合わせなんてあるのね。\n"
  body += "私が伝えてあげたんだから、感謝して読みなさい！。\n\n"
  body += "名前：" + itemResponsesFormatted.name + "さん\n"
  body += "性別：" + itemResponsesFormatted.gender + "\n"
  body += "言語：" + itemResponsesFormatted.language + "\n"
  body += "メッセージ：" + itemResponsesFormatted.message + "\n\n"
  body += "は！？なに！？\n"
  body += "ま、マジになって感謝されても…ぜんぜんうれしくないんだからね！！"

  GmailApp.sendEmail('[あなたのメアド]', subject, body);
}

function SendMail(e) {
    //...中略...
    let content = itemResponse.getResponse();
    itemResponsesFormatted = Object.assign(itemResponsesFormatted, {[title]: content})
    
    EmailNotice(itemResponsesFormatted)
  }
}

function SlackNotice(itemResponsesFormatted) {
  let body = "";
  body += "【Slackから通知】初回限定！お一人様一本限り！\n"
  body += "ご注文内容は以下のとおりです。\n\n"
  body += "名前：" + itemResponsesFormatted.name + "さん\n"
  body += "性別：" + itemResponsesFormatted.gender + "\n"
  body += "言語：" + itemResponsesFormatted.language + "\n"
  body += "メッセージ：" + itemResponsesFormatted.message + "\n\n"
  body += "＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝\n"
  body += "Slackからの通知、受け取り放題！\n"
  body += "詳しいお問い合わせは、0120-***-***\n"  
  body += "＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝"
  
  let slackWebHookUrl = "https://hooks.slack.com/services/[取得できる固有URL]"

  //本文をJSON化
  let payload = {
    "text": body
  }

  //投稿用の再整形(JSON形式)
  let options = {
    "method":"POST",
    "headers":{"Content-Type":"application/json; charset=UTF-8"},
    "payload": JSON.stringify(payload),
    "muteHttpExceptions":true
  }
  
  UrlFetchApp.fetch(slackWebHookUrl, options);
}

function SendMail(e) {
    //...中略...
    itemResponsesFormatted = Object.assign(itemResponsesFormatted, {[title]: content})
    
    EmailNotice(itemResponsesFormatted)
    SlackNotice(itemResponsesFormatted)
  }
}