はじめに
jQueryを触り始めたとき、こんなコードを見たことがある人は多いと思います。
var $button = $('#submit');
var $items = $('.item');
「なんで変数名に $ がついてるの？」
「JavaScriptの文法なの？」
「つけないとダメ？」
今回はこの $ 文化について整理します。
そもそも$は何者なのか？
まず前提として、JavaScriptでは $ は普通に使える識別子です。
var $hoge = 123;
これはただの変数です。特別な意味はありません。
一方で、jQueryではこう書きます。
$('#id')
$('.class')
この $ は、実体としては jQuery 関数のエイリアスです。
jQuery('#id')
と同じ意味です。
つまり、
$() は「jQueryオブジェクトを生成する関数」
$hoge は「jQueryオブジェクトが入っている変数」という慣習
という整理になります。
なぜ変数名にも $ をつけるのか？
例えば次のコードを見てください。
var button = $('#submit');
この button が何なのか、パッと見でわかりますか？
DOM要素？
文字列？
jQueryオブジェクト？
配列？
これが
var $button = $('#submit');
と書いてあれば、
「あ、これはjQueryオブジェクトだな」
と一瞬でわかります。
つまり $ は「型ヒント」的な役割をしている
TypeScriptのように型が明示されないJavaScriptでは、
命名で意味を伝える文化が強いです。
$ はその一つで、
「この変数はjQueryオブジェクトですよ」
というサインなのです。
つけないとどうなる？
つけなくても動きます。
var button = $('#submit');
button.hide();
問題ありません。
しかし、こんなコードになると混乱します。
var button = document.getElementById('submit');
button.hide(); // エラー
DOM要素には hide() はありません。
このバグは、変数名に $ をつけていれば防げます。
var button = document.getElementById('submit');
var $button = $('#submit');
名前だけで役割が区別できる。
これは可読性の観点で非常に重要です。
実務でよくあるパターン
よく見る書き方：
var $form = $('#form');
var $inputs = $form.find('input');
このとき、
$form → jQueryオブジェクト
$inputs → jQueryオブジェクト
と一目でわかります。
逆に、
var formElement = document.getElementById('form');
のように生DOMを扱う場合は $ をつけないのが一般的です。
ES6以降でもこの文化は生きている？
jQuery自体の利用は減っていますが、
この「命名で型を表す文化」は今も重要です。
例えば：
isLoading → boolean
userList → 配列
$modal → jQueryオブジェクト
TypeScriptがあるとはいえ、
読みやすい命名は今も強い武器です。
チーム開発ではルールにするべき？
結論：
jQueryを使うなら統一したほうがいい。
理由はシンプルで、
- 可読性が上がる
- バグを減らせる
- レビューが楽になる
からです。
逆に、プロジェクトでjQueryを使っていないなら $ 文化は不要です。
まとめ
jQueryの変数に $ をつけるのは、
文法でも強制でもありません。
これは「可読性を上げるための慣習」です。
特にJavaScriptのような動的言語では、命名がコードの品質を左右します。
昔のコードを見るときに「なんとなくついてる記号」だと思っていた $ も、ちゃんと理由がある。
そう理解しているだけで、コードの読み方が一段階深くなります。