🙄

<lavel>タグについて

2023/11/06に公開

今更感もありますが、lavelの使い方を軽く振り返りつつ、今回lavel関係で初めて見たエラーもありましたのでその関係性も記録として書いていきます。

<lavel>とは

フォームの中でフォームの項目名と構成部品(チェックボックス、ラジオボタンなど)を関連付けるためのタグです。
下記のような記述をすることでフォームと関連付けられて表示されます。

<%= f.label :email,"メールアドレス" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>

上記のように正しい記載をすることで項目をクリックするとそれに関連するフィールドが選択されるようになる機能もあります。下記の図では「メールアドレス」という項目をクリックしたときの画面になります。

誤った記述

例のようにカラム名を直接日本語で書いた場合、表示はされますが先ほどの図のようなクリックした場所が選択される機能は無くなります。

誤った例
<%= f.label :メールアドレス %>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>

誤った記述で呼び起こされるエラー

そして、上記の記述方法で使用した際に、他機能でja.ymlファイルが存在する場合に次のようなエラーを誘発してしまいます。
I18n::InvalidLocaleData in Public::Sessions#new
こちらのエラーは、国際化(i18n)を実装する際に発生するエラーになります。ja.yml内の記述ミスやインデントの修正が必要になるエラーではありますが、今回はja.ymlに特に何も記述していなかったため<label>とどのような関係があって発生したのかはわかりませんが、1つ言えるのはlavelタグを正しい記述で書けば発生しないようです。

感想

基礎的なところでよく使用される記述方法もいろいろ試したら「表示されたからこれで大丈夫だ」と勘違いして進んでしまっているもの多いですが、今回のように正しい記述じゃないために予期せぬところで発生するエラーもあるため、正しい記述と機能を理解して進めるようにしようと思えました。
実際、今回のエラーはベテランメンターさんも初めて見たと仰っていたので、基本に忠実になることが大切だと改めて思いました◎

参考

https://html-coding.co.jp/annex/dictionary/html/label/

Discussion