name属性の命名規則
先日HTMLとjavascriptで簡単なタイピングアプリを作成していたのですが、その時にふと気になったことが。
普通CSSのプロパティって『article-comment』とか、ハイフンでつないで定義するじゃないですか。
そのテンションでname属性にもしっかり『form-profile』みたいにハイフンつなぎで設定していたんですよね。
さらにjavascriptで動きをつけようと、querySelectorでこのname属性を引っ張ってこようとしたら拾えません。
■index.html
<form name="sample-form">
<input type="text">
<input type="submit" value="送信">
</form>
■main.js
var sf = document.sample-form; //form is not defined
『sample-form』という文字列ではなく、『form』という文字列で認識されてしまっています。
ハイフンを外すとしっかり取得することができました。
というか、
var sf = document.getElementsByName('sample-form').item(0);
とかでも取得はできるのですがちょっと趣旨と外れるので置いておいて…
javascriptでは『-』（ハイフン）の使用ができない
javascriptって変数名に『-』（ハイフン）の使用ができないんですね。これはハイフンでなくマイナス記号として認識されるため。
解決策としては以下のようなことが考えられますよね。
- ロワーキャメルケースで記述する 例）formProfile
- アンダーバー記法（スネークケース）で記述する 例）form_profile
HTMLにおけるname属性とは
そもそもname属性って何なんだろう。ということでname属性の公式ドキュメントを調べてみました。
name：要素の名前。例えば、送信されたフォームでサーバーがフィールドを識別するために使用する。
サーバー通信時の識別用として定義するのが正解みたい。
CSSの用途とは少し毛色が異なる様子。それならCSSと命名規則を別にしても自然といえるか。
今回はjavascriptで使用するのでローワーキャメルケースで記述することにしました。
まとめ
- name属性はサーバー通信等を利用するターゲットとして使用するもの。
- javascriptはハイフンを使用できない。
- CSSのプロパティをハイフンつなぎの命名規則としている場合は、name属性はその命名規則の例外にする。
ということはname属性に対してCSSで装飾すること自体もおかしな話なのかもしれません。また少し大人になりました。
ちなみに今回の内容と同じようなことで、CSSプロパティにもハイフンがついているものってあるじゃないですか。『margin-bottom』とか。
それを
sf.style.margin-bottom = '12px';
とかする時は
sf.style.marginBottom = '12px';
とローワーキャメルケースにすると動作してくれます。この機能が属性名の適用にもあれば、、
初歩的すぎる内容ですが、小さな気づきを集めて幸せになるための小記事でした。
