【フォーム制作】バックエンドからの要望に基づいたコードの書き方

# はじめに
弊社ではフロントエンドとバックエンドが分かれているので、組み込みがあるときにはHTMLデータを共有して制作してもらいます。
今回は備忘録も兼ねて、実際にあったバックエンドからの要望に基づいたコードの書き方をまとめました。
あくまで弊社バックエンドとのやりとりに基づいているので、他社様だとやり方が違う部分があると思いますが、何か少しでも参考になる部分がありますと幸いです。

# コードの書き方
## nameやvalueは基本的に空でOK
バックエンド側で管理しているデータベースの値が入るので、基本的に場所だけ用意すればOKです。
動作確認等で`name`を設定する必要がある場合は、その旨をコメントで残すようにしています。

```html:index.html
<form>
  <select name="">
    <option value="">オプション1</option>
    <option value="">オプション2</option>
    <option value="">オプション3</option>
  </select>
  
  // 動作確認のためにnameを設定しています。変更して頂いて大丈夫です。
  <input id="dog" type="radio" name="animals" value="">
  <label for="dog">犬</label>
  <input id="cat" type="radio" name="animals" value="">
  <label for="cat">猫</label>
  <input id="rabbit" type="radio" name="animals" value="">
  <label for="rabbit">うさぎ</label>
</form>
```

## 都道府県のセレクトボックスには、valueに都道府県コードを入力する
### 都道府県コードとは？
都道府県コードは、コード標準化の一環として総務省（当時：自治省）が昭和43年に全国の都道府県のコードを設定したものです。（市区町村コードもあります。）

■ 都道府県コード一覧

https://nlftp.mlit.go.jp/ksj/gml/codelist/PrefCd.html

バックエンドではこの都道府県コードの番号と都道府県名をデータベース上で紐づけて管理、または別ファイルにして管理しています。

### YubinBango.jsについて
YubinBango.jsは、郵便番号を入力すると住所を自動入力してくれるJSライブラリです。
読み込んで指定のclassを付与するだけで使用できます。

https://github.com/yubinbango/yubinbango

`<select>`のclassに`p-region-id`を設定すれば、都道府県コードを使用できます。

```html:index.html
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br>
    <select class="p-region-id">
    <option value="">--</option>
    <option value="1">北海道</option>
    <option value="2">青森県</option>
    <option value="3">岩手県</option>
    <option value="4">宮城県</option>
    <option value="5">秋田県</option>
    <option value="6">山形県</option>
    <option value="7">福島県</option>
    <option value="8">茨城県</option>
    <option value="9">栃木県</option>
    <option value="10">群馬県</option>
    <option value="11">埼玉県</option>
    <option value="12">千葉県</option>
    <option value="13">東京都</option>
    ...
  </select><br>
  <input type="text" class="p-locality p-street-address p-extended-address"/><br>
</div>
```
### YubinBango.jsの使用で気をつけること
YubinBango.jsで都道府県コードを使用する場合、1〜9までのコードが１桁になります。
しかし本来都道府県コードは2桁（1〜9は01、02、03...のように頭に0がつく）なので、バックエンドに事前に相談することをおすすめします。

## 必須項目にrequiredはつけなくても良いかも
:::note warn
バックエンドと要相談。
:::
必須項目に未入力があった場合、サーバー側でのチェック前にブラウザのバリデーションにひっかかります。
ブラウザによって挙動やエラー表示に差があり、その差が気になるという場合はサーバー側で全ての項目をチェックできないか相談してみましょう。
サーバー側でしっかりチェックをしてもらえる場合は、必須項目にする必要がなくなるので`required`は外してOKです。

## ブラウザバック時の挙動を考慮する
ブラウザバック時には`change`や`click`などのJSのイベントが発火しないため、classのつけ外しや選択項目による要素の表示/非表示切り替えの処理が走りません。
`pageshow`イベントはブラウザバック時にも発火するため、これらの問題に対応することができます。
```js
window.addEventListener('pageshow', () => {
 ...
});
```
https://developer.mozilla.org/ja/docs/Web/API/Window/pageshow_event

## 送信ボタンには、二重送信防止や連打防止のための処理を必ずつける
二重送信や連打ができてしまうと、送信ボタンが押されるたびにサーバー側にデータが送られてしまいます。
サーバー側でチェックもできますが、何回も同じデータが送られるのはよくないので、JSの`submit`イベントを使用しフロントで対応しましょう。
```js
const form = document.querySelectorAll('form');

if (form) {
  form.forEach((el) => {
    const button = el.querySelector('button[type="submit"]');
    if (button) {
      el.addEventListener('submit', () => {
        button.disabled = true;
      });
    }
  });
} else {
  return;
}
```
# おわりに
以上となりますが、他にもまだまだ要望や気をつけることがありそうなので、今後もこちらのページに追加していこうと思います。