読者です 読者をやめる 読者になる 読者になる

JavaScriptは悪くない

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ベースに書き直したサンプルです。

CSSが使える箇所はCSSを使っています。

しかし、そもそもHTMLはHTML、JavaScriptJavaScriptに分けるのが望ましい形です。(プレースホルダーはJavaScriptで記述するような実装もあるみたいですが、HTMLで書いてあったほうがメンテナンスしやすい(デザイナも触れる)でしょう)

こちらはメンテナンス性を重視し、なるべくシンプルなコードで実装してみました。
id属性が決め打ちだったり、search.jsはinputの後ろに置かないといけない(直後が望ましい)といった制約はありますが、なによりシンプルで、ライブラリなどへの依存がないことが強みです。JavaScriptをファイルに分けていますが、この程度ならHTMLに埋め込んでしまっても良いでしょう。
また、JavaScript無効、CSS無効、JavaScriptCSSどちらも無効といった状態でも、問題なくフォームを使用できるようになっています。
プレースホルダーのところはlabelでマークアップしても良かったかなとも思うけど、labelはlabelだろうとも思ったり

パフォーマンス

JavaScript の不思議な面白さ - 第四回 - Yahoo! JAPAN Tech BlogでcreateElementは遅いと書かれています。確かに厳密に見れば遅いですね。
しかし、DOMのパフォーマンスが気になる場合は、そもそもHTMLで記述しておいて操作だけを行うべきです。
また、createElementも数十回程度ならdocument.writeと差はありません。

そもそも、JavaScriptでは、eval(危険), with(遅い), document.write(危険、移植性が悪い)は使うべきではないTOP3ですね。次点でinnerHTML(XSSの可能性)でしょうか。

雑記

JavaScriptAjaxの流行で見直された」とかなんとかで、モダンなJavaScriptがもっと普及してくれたら良いのですが、現実はそう上手くは行ってないです。(私もそういったコードを作っていた(今も?)覚えがありますし…)

また、IEに対しての愚痴をよく目にしますが、IEも少し手をかけてあげればなんとかなります。手のかかる子ほどかわいいと言われたりしますが、そんな感じです。IEはかわいいのです。

まあ、そのIEの性で、ちょっとしたコードでもライブラリ依存になってたりすることがよくあります。が、そこは頑張ってライブラリ依存をなくしてほしいなぁと思います。
厳しい言い方かもしれませんが、jQueryの使い方を覚えてもJavaScriptは出来るようになりません。ライブラリは流行りモノなので、新しいライブラリが出たらまたそのライブラリの使い方を覚えて、といったことを続けるのは不毛だと思います。

ただ、クロスブラウザJavaScriptの書き方を覚えろというのが酷であることは間違いありません。なにしろ問題を抱えているのはIEだけでなく、各ブラウザにもそれぞれの問題があり、標準的でクロスブラウザJavaScriptと、標準ではないブラウザ依存なJavaScriptの区別をつけることすら難しいのが現状です。
そして、先に書いたとおり、レガシーなコードで溢れています。

当面仕事に困ることはないだろうなと思いつつ、いつまでこの状況が続くのかという思い(たぶんずっと…)もありつつ。


なんて、グチってみたり。


CSSでプレースホルダー - vantguarde - web:g そうそう、そもそもプレースホルダーって必要なくね?って話もあるよね。label使えば良いだろってね。