JavaScriptおれおれAdvent Calendar 2014 – 02日目
今日は変数の命名についてのお話その一です。jQueryオブジェクトを格納する変数には”$”を付けろっていうやつ。
先にまとめ
- 誤解されない、明確な名前を付けよう
- 必要なら接頭辞も付けよう
nameなら文字列、$nameならjQueryで取得した要素、elNameなら生要素
変数の命名からの理解
普通の名前
var name; var age;
パッと見でどんな値が格納され（てい）るか想像付くでしょうか。付きますよね。
このnameは名前だからたぶんstring型で、ageはきっと年齢がnumber型で格納されるのだろうなと察しが付く。よね。
意外とそうじゃないかもしれないけど、コード中の意外性は可読性を下げる（正確な理解を妨げる）事になるので、そういう場合は実装なり設計なりを見直した方が良い。
で、その「意外とそうじゃない」奴の例として、要素があります。
jQueryのやつ
名前を表示する要素を検索してきたとして、その結果を格納する先の変数の名前をどうしよう。名前だからnameかな。でもそれだけだと、文字列っぽいよね。というわけで、”$”を付けて区別します。
jQueryで要素を検索してきた結果のjQueryオブジェクトは、”$”で始まる変数に格納するのが一般的。（長いものには巻かれよう！）
var $name; var $age;
この例の場合、$nameも$ageも要素なんだなーという事がわかる。
あー、もちろん正確にはjQueryオブジェクトね。要素を格納した（可能性のある）jQueryオブジェクトです。jQueryオブジェクトなので、jQueryのメソッドを利用できます。
だので、”$”で始まる変数を見かけたら、これはaddClass()とかremove()とか使って大丈夫だな、と瞬時に理解できるわけです。
jQueryじゃない要素
jQueryを使わずに要素を扱う場合もある。jQueryに依存しないでDOM操作するライブラリーとか。
で、個人的にそういうときは接頭辞として”el”を採用している。もちろんelementのelです。
var elName; var elAge;
前述の約束事を理解していれば、このelName, elAgeがそれぞれ要素（HTMLElementオブジェクト）であり、それぞれ名前や年齢を表示するのに使われているんだなーという事がわかる。
もし接頭辞がなかったら
要素なのに普通にageと命名しちゃった場合。
var age = $('#age');
これさー、普通”age”だけ見たら年齢でしょ、じゃあ数値でしょ。だから足し算引き算もできるでしょ、と理解するのが一般的かと思います。
age + 1;
が・・・・駄目っ・・・・・！
足し算できないね。紛らわしい。
もちろんさっきの行を見ればそうじゃない事がわかるんだけど、数行の関数だって全部に目を通さない場合もあるかもしれないし、わかりづらいっす。
それから、大規模できっちりフレームワークとか設計とかある場合は別だけど、割と処理してすぐ要素に反映させるって場面も多いと思うのです。
var age = getUserAge();
var age2 = $('#age');
age2.text(age);
ほら、名前かぶっちゃった。
ハンガリアン記法
こういう風に、簡単に見分けるために接頭辞を付ける方法を「ハンガリアン記法」と言います。ちなみに接尾辞でも良いらしい。
ハンガリアン記法は接頭辞ないし接尾辞を付与する事で変数の役割を明確にする事が目的。
Microsoftはかつてこのハンガリアン記法が大好きで、Windowsアプリケーションを作成するのに使うWin 32 APIなんかも全部ハンガリアン記法になってる。ただ、完全に型情報を付与する形（システムハンガリアン記法）になってて、あまり嬉しくはない……。新しいAPIの.NET Frameworkは型情報を付与するハンガリアン記法を採用していないそうだ。
文脈
さっきはいきなり”name”という単語で変数を命名したけど、これは何の情報を扱っているかがある程度明確じゃないとわかりづらいかも。
ユーザーの名前なのか、テーマの名前なのか、画像のファイル名なのか……。
もし二つ以上の情報を扱っている場合は、それぞれuserName, themeName, imageFileNameみたいにしないと混乱しちゃう。
逆にどれかひとつについてのみ扱っているなら、文脈から対象が明確なので”name”だけで十分。ユーザー情報を扱っているのが明確なのにuserNameでは冗長だ。特に、変数じゃなくてプロパティの方は気を付けてほしい。user.userNameとか、どうよ？
（そういえばDBで「userテーブルのuser_nameカラム」とかよく見るんだけど、なんでかね。考え方が違うのかなあ、DB方面の技術者さんとは。）
パッと見でわかるように
まあそんなこんなです。まずはわかりやすい名前を付けましょう、例外としてjQueryオブジェクトには”$”を付けましょう、というお話でした。