JavaScriptは悪くない
JavaScript の不思議な面白さ - Yahoo! JAPAN Tech Blog
JavaScript の不思議な面白さ - 第二回 - Yahoo! JAPAN Tech Blog
JavaScript の不思議な面白さ - 第三回 - Yahoo! JAPAN Tech Blog
JavaScript の不思議な面白さ - 第四回 - Yahoo! JAPAN Tech Blog
JavaScript の不思議な面白さ - 第五回 - Yahoo! JAPAN Tech Blog
JavaScript の不思議な面白さ - 第六回 - Yahoo! JAPAN Tech Blog
JavaScript の不思議な面白さ - 最終回 - Yahoo! JAPAN Tech Blog
のシリーズがJavaScriptの面白さよりも、暗黒面ばかり伝えてしまっている印象で、連載モノだからもう少し様子を見ようと思っていた(JavaScript でプレースホルダつき入力欄を作る - blog.8-p.infoという良記事もあって)のですが、色々と気になって仕方がない(キャラの髪型とか)ので、いくつかサンプルを書いてみました。
まず、元記事が何度もdocument.writeを使っているので、(第6回のサンプルを)DOMベースに書き直したサンプルです。
しかし、そもそもHTMLはHTML、JavaScriptはJavaScriptに分けるのが望ましい形です。(プレースホルダーはJavaScriptで記述するような実装もあるみたいですが、HTMLで書いてあったほうがメンテナンスしやすい(デザイナも触れる)でしょう)
こちらはメンテナンス性を重視し、なるべくシンプルなコードで実装してみました。
id属性が決め打ちだったり、search.jsはinputの後ろに置かないといけない(直後が望ましい)といった制約はありますが、なによりシンプルで、ライブラリなどへの依存がないことが強みです。JavaScriptをファイルに分けていますが、この程度ならHTMLに埋め込んでしまっても良いでしょう。
また、JavaScript無効、CSS無効、JavaScriptもCSSどちらも無効といった状態でも、問題なくフォームを使用できるようになっています。
プレースホルダーのところはlabelでマークアップしても良かったかなとも思うけど、labelはlabelだろうとも思ったり
パフォーマンス
JavaScript の不思議な面白さ - 第四回 - Yahoo! JAPAN Tech BlogでcreateElementは遅いと書かれています。確かに厳密に見れば遅いですね。
しかし、DOMのパフォーマンスが気になる場合は、そもそもHTMLで記述しておいて操作だけを行うべきです。
また、createElementも数十回程度ならdocument.writeと差はありません。
そもそも、JavaScriptでは、eval(危険), with(遅い), document.write(危険、移植性が悪い)は使うべきではないTOP3ですね。次点でinnerHTML(XSSの可能性)でしょうか。
雑記
「JavaScriptはAjaxの流行で見直された」とかなんとかで、モダンなJavaScriptがもっと普及してくれたら良いのですが、現実はそう上手くは行ってないです。(私もそういったコードを作っていた(今も?)覚えがありますし…)
また、IEに対しての愚痴をよく目にしますが、IEも少し手をかけてあげればなんとかなります。手のかかる子ほどかわいいと言われたりしますが、そんな感じです。IEはかわいいのです。
まあ、そのIEの性で、ちょっとしたコードでもライブラリ依存になってたりすることがよくあります。が、そこは頑張ってライブラリ依存をなくしてほしいなぁと思います。
厳しい言い方かもしれませんが、jQueryの使い方を覚えてもJavaScriptは出来るようになりません。ライブラリは流行りモノなので、新しいライブラリが出たらまたそのライブラリの使い方を覚えて、といったことを続けるのは不毛だと思います。
ただ、クロスブラウザなJavaScriptの書き方を覚えろというのが酷であることは間違いありません。なにしろ問題を抱えているのはIEだけでなく、各ブラウザにもそれぞれの問題があり、標準的でクロスブラウザなJavaScriptと、標準ではないブラウザ依存なJavaScriptの区別をつけることすら難しいのが現状です。
そして、先に書いたとおり、レガシーなコードで溢れています。
当面仕事に困ることはないだろうなと思いつつ、いつまでこの状況が続くのかという思い(たぶんずっと…)もありつつ。
なんて、グチってみたり。
CSSでプレースホルダー - vantguarde - web:g そうそう、そもそもプレースホルダーって必要なくね?って話もあるよね。label使えば良いだろってね。
