小ネタ集その1

ブログ用のネタをあれこれと書き留めていたのですが、ボリュームが少なくて1つの記事に出来なない小ネタを一旦まとめてみます。このシリーズは今後も何度かやると思います。
1つでも皆さんの役に立てれば幸いです。

php5.2以前だとanonymous関数(無名関数)が使えない!

PHPでは無名関数を使用する機会は少な目ですが、代表的なのは正規表現置換の
preg_replace_callback("正規表現", function() {置換ルール}, 置換前の文字列);
でしょうか。しかしphp5.3以上が必須条件で、ローカルとサーバーのPHPバージョンが異なっている場合のエラー原因になることがあります。

checkboxやradioボタンで、label内にinputを入れればidやforは不要

知らなくて個人的には結構な衝撃でした。 
idとfor属性を使用して
<input type="checkbox" id="checkbox_1" name="checkbox_1" value="1" /><label for="checkbox_1">チェック1</label>
と書くのを
<label><input type="checkbox" name="checkbox_1" value="1" />チェック1</label>
と省略できます。イベントもちゃんと伝搬します。
尚、画像を中に入れて
<label><input type="checkbox" name="checkbox_1" value="1" /><img src="画像パス" /></label>
とすることも可能ですが、IE8以下では画像をクリックしてもチェックされないため、ユーザビリティが下がることを注意しましょう(ただし、IE8以下でもチェックボックスを直接クリックすることは可能なので、致命的ではありません)。

Javascriptでプロパティ名に変数を使えない

これはPHPとJavascriptを両方使っている人向けです。他のサーバーサイド言語については良く分かりませんが、当てはまる言語もあると思います。
PHPでは、
$id = "aiueo";
$array = array(
$id=>"kakikukeko",
);
とやることが可能です。
しかし、Javascriptでは
var id = "aiueo";
var obj = {
id: "kakikukeko"
};
とやるとプロパティ名はidになります。
var obj = {};
obj[id] = "kakikukeko";
とすればOKです。
過去、何度か間違ったのでご紹介しますが、まったくの小ネタです。

border-collapse:collapseのテーブルのborder-widthはjQueryのcss関数で取得できない

2x2のシンプルなテーブルで、セルに
table.test td {
border: 5px solid #000;
}
のように5pxの罫線を付けた場合、jQueryからこのテーブルとセルのwidthを取得してみると、ブラウザ毎に全く異なる値が得られます。

IE11Chrome/SafariFirefox
セルのborder-widthtop2.5px5px3px
right2.5px5px3px
bottom2.5px5px3px
left2.5px5px2px
テーブルのborder-widthtop2.5px0px3px
right2.5px0px2px
bottom0px0px0px
left2.5px0px3px

Webkit系(Chrome/Safari)は意図通りの値になっていると言えます。
IE11はより正確に半分の値を返しています。Firefoxは訳が分かりません。IE11とFirefoxでテーブルのbottomが0pxになっているのも良く分かりません。
以上から、jQueryのCSSを使ってテーブルのborder-widthを取得するのはやめましょう。
尚、border-collapse:separeteの場合は、全てのブラウザが同一の結果で、セルが四方5px、テーブルが四方0pxとなります。こちらは使えそうです。

jQueryのCSS関数内では何をしているのか

非IEではgetComputedStyle、IEではcurrentStyleによって実際に適用されているCSSの値を取得しています。これが上記のようなバラバラな値になる原因と思われます。

2015/7/7