フロント実装のゆるゆるTips(html5 / jQuery)

こんぬるわ(某書店ポップ担当さんリスペクト)、光永です。
最近ようやっとコードレビュー文化が根付いてきた弊社ですが、
ゆるっと技術記事として、近々の指摘事項で上げたもろもろをまとめておきます。
お気づきでしょうが社内共有兼用。

1. HTML5の新要素 legend

Formのタグに <legend></legend> が追加されました。
用途は以下の通り。
http://www.htmq.com/html5/legend.shtml

legend

フォーム自体がlabel要素を使うフォームの名称表示に使う。
checkbox radio など。

<legend>色</legend>
<input id="color1" type="checkbox"/><label for="color1">赤</label>
<input id="color2" type="checkbox"/><label for="color2">青</label>

label

これまで通り。

<label>名前</label>
<input type="text">

2. jQuery 値の取り方・入れ方

参考:https://qiita.com/kbyay_/items/7a7ce9547f29b34a63b1

※似たようなメソッドがあります

// select, checkbox/radio以外のinput: 1で取得
// 1. <input value="{ これ }" /> をとります
$el.val();

// checkbox, radio(= valueは固定値): 3で取得
// 2. <input checked /> の checkedがhtml描画時に書かれているかどうか?を取ります
$el.attr('checked');

// 3. inputの、指定された項目(プロパティ)の状態を取得します
$el.prop('checked');

3. jQuery loop処理の速度

参考: http://dsuket.hatenablog.com/entry/2013/06/04/143521
for が最速。

var $inputs = $('.js-input');

// eachでかくと
$inputs.each(function () {
    // something to do ...
});

// forでかくと
for (var i=0; i<$inputs.length; i++) {
    $inputs.eq(i);
    // something to do...
}

以上、なにかのお役に立てれば幸い。
光永でした。