hamashun先生がJSの勉強を初めたみたいなので、早速第一週目のコードを勝手に添削してみた。
細かいこと
先に細かいことを何点か。
- input要素のvalueはそのままずばりvalueで取れる。元のコードだと searchInpt.attr('value') ってしてるけど、これは searchInput.value でOK。
- valueのセットも同様にそれ用のメソッドがある。 searchInpt.attr('value', 'hoge') だったら searchInpt.val('hoge') でOK。jQueryの場合、ここは value() とか value = じゃなくて val() らしいので注意。
- searchInptのfocusとかblurとかに無名関数渡してるけど、あの中での this は searchInpt のことなので、全部 this で置き換えられる。
- searchInpt.focus(function(){}).blur(function(){}) って繋げて書いてるけど、これ分けた方が良くない？中身の処理が長いので、なんかどのオブジェクトに対しての操作なのかわかりづらそう。JSあんま書かないのでよく知らないけど、こういう文化なのかな？
あと別にこれは正直このくらいの量のコード片だとどうでもいいっちゃいいんだけど、searchInptとかdefaultValとかって変数名が気持ち悪い。InputとInptとか一文字しか違わないんだし、素直に書いちゃって欲しい。略すんならむしろ長過ぎるのでアグレッシブに3文字以下まで縮めて欲しい。あんまりお勧めしないけど。
プログラミングしてると、「名前の付け方」ってのは意外かもしれないけどものすごーく重要（きちんと名前を付けるってのは「それが本来どう振る舞うべきものなのか」をちゃんと意識するってこと）なので、ちゃんと気を使って欲しいかも。
汎用性の話
「スクリプトを適用する要素」を指定する方法（コード1行目）を、ある程度汎用的にしたい。
今はidを直接指定しているので、そこを「jsファイルを読み込ませたら全てよしなにやってくれる」的にしたい。
「inputのtypeがtextで、かつデフォルトでvalueの中身に何か入ってる場合」とかでif文かなー。 JS側でclassをキメて、それをHTMLに書くのはちょっともにょるしなあ。
JS側でclassをキメて、それをHTMLに書けばいいと思います。えええーって顔されそう。もにょってる理由は「HTMLによりマークアップをする、とはつまり論理的な意味付けをすることであり（中略）だから動作や見栄えに関することをHTMLの外部の制約で決められたくないのだ！」ってことなんじゃないかと推測するけど、「検索フォームという機能を持った要素である」ってのは論理的な意味付けだよね。見た目や動作ではなく。「検索フォームという機能を持った要素である」という意味付けをするってことと、どういう大きさでどういう動きをするとかってHTMLに書くってことは違うから、別にマークアップとしてはアリじゃないかと思う。
JS側で頑張るアプローチで解決しようとすると、泥臭くて複雑になるか、このくらいの機能だと割に合わない重めな仕組みになるかするので、inputに特定のidやclassを付けておくのは割と妥当な気がする。強いて言うなら、元のコードはinputが一個だけしか想定してないけど、XPathとかで特定のクラスのinputを配列で取ってきてループで回して、みたいにして全部の入力フォームに適用できるようにしとくと良いかも。
あと汎用性の話で言うと、inputの指定のとこより、JSで要素に文字色をベタに指定してるとこを変えた方がいいと思います！デザインによっては文字色変えたくなるだろうし。
