JavaScript Ninjaは全てのフロントエンドエンジニアが一度は読んでおくべき本

引き続き、「JavaScript Ninjaの極意」を読んでおります。

本書にはジョン・レシグがjQueryを作成してく過程で得たであろう各ブラウザの差異や不可思議な仕様についての情報がふんだんに掲載されています。
上忍エンジニアにとっては知っていて当たり前のことなのかもしれませんが、普段jQueryなどブラウザ間の差を埋めるライブラリに頼り切りだった自分には目から鱗な情報ばかりでした。

例えばこんなの。

「フォームに含まれていて、そのform要素から参照されるinput要素」のそれぞれに対応するプロパティを、ブラウザが、そのform要素に追加する。

通常、javaScriptでフォームを送信(submit)とする場合以下のようなコードを書きます。

document.getElementById('form').submit();

1	document.getElementById('form').submit();

しかし、form内にあるinput要素などのid属性やname属性に「submit」という名前を使っていると上記のコードはエラーを起こします。
なぜなら、ブラウザがinput要素のプロパティをform要素に追加するためにsubmitメソッドが上書きされてしまうからだ！

……なにそれ。

以下、サンプル。

<form id="form1">
    <input type="text"></input>
</form>

<form id="form2">
    <input id="submit" type="text"></input>
</form>

</form>

</form>

document.getElementById('form1').submit.toString();
//-> 'function submit() { [native code] }'
document.getElementById('form2').submit.toString()
//-> "[object HTMLInputElement]"  //ホントにsubmitメソッドが上書きされている orz

document.getElementById('form1').submit.toString();

//-> 'function submit() { [native code] }'

document.getElementById('form2').submit.toString()

//-> "[object HTMLInputElement]" //ホントにsubmitメソッドが上書きされている orz

本当だ……input要素のid属性に「submit」を指定したことによって、form2のsubmitメソッドがinput要素への参照で上書きされてしまいました。
最新のChromeで確認しても同様だったので、この挙動は正式な仕様なんでしょうか？

これは知らないと嵌りそうです。

JavaScript Ninjaにはこんな情報がてんこ盛りです。

というか本書を読んでいると、自分自身でクロスブラウザ開発を行おうという心がズタズタに折れていきますｗ
（特に11章以降は「こんなん、やってられっか」と投げ出したくなるほど、ブラウザ間の差異や挙動についての記述が続きます)

クロスブラウザ対策に必要なのは、まさに忍耐なのだなーと。

ブラウザ間の差異やブラウザが行うおかしな挙動について、ここまでまとまった情報が記載されている書籍はなかなか無いとおもいますので、フロントエンドの開発に携わる方全てにお勧めです。

一通り目を通しておくだけで、フロントエンドの開発時にハマりこんでしまうことが少なくなるんじゃないでしょうか。

投稿者: shimizu