【Error】ラベルのエラーについて

# はじめに
属性に関するエラーが発生しました。かくコードの量が多くなればなるほど、関係を明確にすることが大切なのはわかっていますが。少し理解したのでアウトプットの為に、記事にしていきたいと思います。

## 環境
- Windows, WSL
- Docker
- Ruby 3.2.3
- Rails 7.1.3


## 1：ラベルのエラーについて。例
```ruby
The label's for attribute doesn't match any element id
```
👆上記エラーは、HTMLの`<label>`タグの`for`属性に指定されたIDが、実際のフォーム要素のIDと一致していないことを示しています

### **例**
まずは分かりやすくどういうことかの理解。
次のようなHTMLがあるとします。
```html
<label for="prefecture">都道府県</label>
<input type="text" id="prefecture" name="prefecture">
```

この場合、`for`属性の値（`prefecture`）が`input`の`id`と一致しているので正しいという事になります。

👇しかし、下記のようになっていたらエラーになります
```html
<label for="wrong-id">都道府県</label>
<input type="text" id="prefecture" name="prefecture">
```


## 2：実際のエラーについて
```html
<label class="mb-1 inline-block text-lg text-gray-800" for="post_line_id">路線名</label>
<select id="line_select" ...></select>
```

ここで、`for`属性が`post_line_id`になっているけど、`<select>`タグの`id`は`line_select`になっているから不一致！！エラー原因箇所がわかりました。



## 3：修正方法
`for`属性を`line_select`に変更するか、`<select>`タグの`id`を`post_line_id`に変更する必要がります。


### **修正例 1: `for`属性を変更**
```html
<label class="mb-1 inline-block text-lg text-gray-800" for="line_select">路線名</label>
<select id="line_select" ...></select>
```

### **修正例 2: `id`を変更**
```html
<label class="mb-1 inline-block text-lg text-gray-800" for="post_line_id">路線名</label>
<select id="post_line_id" ...></select>
```



## 4：コード上ではどうなるのか
先ほどの修正案では開発ツールのElementタブを修正となっていました。実際私はVscodeを使用してコードを入力しているのでこちら側ではどのような修正となるのか。

```
            <div class="mb-4">
              <%= f.label :prefecture_id, "都道府県", class: "mb-1 inline-block text-lg text-gray-800" %>
              <%= f.collection_select :prefecture_id, Prefecture.all, :id, :name, { prompt: "都道府県を選択" }, { id: "prefecture_id", class: "w-full rounded border bg-gray-50 px-3 py-3 text-gray-800 outline-none ring-customorange ring-opacity-40 transition duration-100 focus:ring" } %>
            </div>

            <div class="mb-4">
              <%= f.label :shooting_time, "おすすめ撮影時間", class: "mb-1 inline-block text-lg text-gray-800" %>
              <%= f.text_field :shooting_time, id: "shooting_time", class: "w-full rounded border bg-gray-50 px-3 py-3 text-gray-800 outline-none ring-customorange ring-opacity-40 transition duration-100 focus:ring", placeholder: "14時頃など", autocomplete: "address" %>
            </div>
```


### **ラベルの修正について**

現在のコードでは、ラベルとフォーム要素の`for`属性や`id`が自動的に生成される形になっています。ですが、エラー発生。つまり、明示的にラベルの`for`属性を指定したり、要素の`id`を確認したりすることが解決につながる。

### **修正例**

以下のように、ラベルの`for`属性と対応する要素の`id`を明示的に指定することができます。
ここでは、ラベルの`for`属性を`prefecture_id`と`shooting_time`に設定しています。

```
<div class="mb-4">
  <%= f.label :prefecture_id, "都道府県", class: "mb-1 inline-block text-lg text-gray-800", for: "prefecture_id" %>
  <%= f.collection_select :prefecture_id, Prefecture.all, :id, :name, { prompt: "都道府県を選択" }, { id: "prefecture_id", class: "w-full rounded border bg-gray-50 px-3 py-3 text-gray-800 outline-none ring-customorange ring-opacity-40 transition duration-100 focus:ring" } %>
</div>

<div class="mb-4">
  <%= f.label :shooting_time, "おすすめ撮影時間", class: "mb-1 inline-block text-lg text-gray-800", for: "shooting_time" %>
  <%= f.text_field :shooting_time, id: "shooting_time", class: "w-full rounded border bg-gray-50 px-3 py-3 text-gray-800 outline-none ring-customorange ring-opacity-40 transition duration-100 focus:ring", placeholder: "14時頃など", autocomplete: "address" %>
</div>

```

# さいごにまとめ
- Railsのフォームヘルパーを使うと、`id`が自動生成されるため、特に問題がなければそのままでも大丈夫になるそうですが、なぜかエラー。
- ラベルの`for`属性と対応する要素の`id`を明示的に指定することでエラー解消につながるという事を知るきっかけとなりました。
- 今回の記事が何か参考になれば幸いです。