JavaScript の不思議な面白さ

JavaScript と言うと普段自信をもって膨大なプログラムと格闘している諸氏もコード断片のはり付けに終始してしまうことも多いのではないでしょうか。かくいう私も検索エンジン（を使ってコードを書く）プログラマになっていることが多々あります。

JavaScript にあるこのプログラムの自作を妨げるのは、ブラウザごとに仕様が違ったりとか、正しいはずのコードが動作しなかったりと、プログラミング言語としての特殊性が挙げられると思います。特に目的実現の為に必要となる発想は他の言語と一線を画します。

今回は、
題材は、これです。

誰でも一度は使ったことがあるだろう灰色の説明文付きの入力欄ですね。

簡単な例
さて、作ってみましょう、ということで作ってみました。

<form> <input name="q" type='text' style='color:gray' onfocus='if( this.value=="ここで検索！" ){ this.value=""; this.style.color=""};' value="ここで検索！" /> <input type="submit" value="検索"/> </form>
はい、これです。簡単ですね。

大抵の人はこれで満足するんじゃないかと思うぐらいちゃんと動きます。

クリックすると文字が消えます。

文字を入力すると、ちゃんと黒くなっています。
ただ、いくつか問題があります。

・入力欄を空にしたままカーソルを外しても "ここで検索！" が戻らない
・"ここで検索！" という文字列で検索できない
・いきなり検索ボタンを押したときに "ここで検索！" で検索されてしまう
・入力後にリロードすると文字が灰色になる

などなど。JavaScript ではどうしてもありあわせのものを組み合わせて作っていくことになるので、ちょっとした問題がでがちなのです。それにこの機能では不十分ということもあるでしょう。例えば、

・ページを開いていきなり入力できるようにカーソルが入っていてほしい
・初回はグレーの文字も出ていてほしい

といったことです。なんとなく、簡単そうな要望に見えますが、実際は上記のバグ修正もあわせてかなり過酷な道のりが待っています。JavaScript の腕におぼえのある方は、ぜひ上記の5つを満たすコードを考えてみてください。

完成度を高めた例
そこで作ったのが下記です。 どうでしょうか？ <form onsubmit='var q=document.getElementById("query");if( q.style.color=="gray" || q.style.color=="#909090" || String(q.style.color).indexOf("rgb")!=-1){ q.value=""; };'> <input name="q" type='text' id="query" onmousedown='if( this.style.color=="#909090" || String(this.style.color).indexOf("rgb")!=-1){ this.value=""; this.style.color="black"; };' onkeydown='if( this.style.color=="#909090" || String(this.style.color).indexOf("rgb")!=-1 ){ this.value=this.value.replace(this.getAttribute("description"),""); this.style.color="black"; };' onfocusin='if( this.style.color=="gray" ){ this.value="";};' onfocus='if( this.style.color=="gray" ){ this.value=""; this.style.color="black"; };' onblur='if(this.value=="" ){ this.style.color="gray"; this.value=this.getAttribute("description");};' description="ここで検索！" /> <script lang="javascript"> var i=document.getElementById("query"); if(i && i.value=="") i.value=i.getAttribute("description"); if(i && i.value==i.getAttribute("description")){ var ctrl = i; if(ctrl.setSelectionRange){ ctrl.focus(); ctrl.setSelectionRange(0,0); }else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', 0); range.moveStart('character', 0); range.select(); } i.style.color="#909090"; } </script> <input type="submit" value="検索"/> </form>
ここでは this.style.color に状態を保存することでこれはユーザーが入力した文字なのか、という判定を行っています。正面から問題の解決に向かったプログラムだと思うのですが、できたプログラムは、確定直前の onsubmit でその状態を見て値を消したり、微妙に色を変えて状態を変えてみたりなど、綱渡りの連続と言っていいでしょう。

そこで他の解決法を探すわけですが、他には background-image を使って "ここで検索！" を画像で配置する方法もあり、画像が必要になりますが、そちらの方が少しスマートになります。あるいは裏側に文字を表示している部品を重ねるといった手も考えられるでしょう。

JavaScript では目的を正攻法で達成できない場合、こうした技を利用しなければなりません。今回はあえて正攻法を示してみましたが、腕におぼえのある方の中にはもっとこうすれば簡単に動くよ、というのを思いついた方もいたのではないでしょうか。

上記はひとつの題材でしかありませんが、こうした簡単な例であっても正攻法では苦しい、というところから創意工夫が生まれてくる。それだけに JavaScript というものは面白みも深いと思うのですが、いかがでしょうか。
（Yahoo!メール開発チーム　田淵純一）

(2009/3/4追記)
＞＞第二回へ
(2009/3/19追記)
＞＞第三回へ