jQueryを使い始めると気になること
それは $（ドルマーク）を使う意味
結論から言えば、これには特別な意味があります。
ということで jQueryのドルマーク（$）の意味 を解説！
このページの目次
jQueryでは $ をあらゆる所で見かけるが・・・
本当にコードのいたる所で見かけます。
例えば要素テキストを書き変えるのに使ったり、
|
1 2 |
/// div.hoge になんかテキスト設定 $('div.hoge').text('hogehoge'); |
要素にCSSを適用するのに使ったり、
|
1 2 |
/// 背景色を灰色に変える $('div.hoge').css({'background': 'gray'}); |
あるいは要素を作成するのに使ったり・・・
|
1 2 |
/// div要素を作ってbody最後に追加 $('body').append($('<div class="hoge">')); |
jQueryでは要素操作のコアと言える存在ですね。
「でもなんでドル記号？」
そう思ってる人は多いかもしれません。
実はJavaScriptでの $ は変数名に使える記号
実はこの $（ドルマーク）、
別にjQuery専用の特別なモノではありません。
むしろJavaScriptにおいては・・・
変数名・関数名に普通に $ が使えます。
つまり特別な記号ではないってことです。
まず変数名に使える文字種類について。
たとえば以下のように解説されています。
▼ MDNの変数から引用
アプリケーションで値を識別する名前として変数を使用します。変数の名前はあるルールに従って付けなくてはなりません。変数の名前は識別子とも呼ばれます。
JavaScript の識別子は必ずアルファベットかアンダースコア (_) かドル記号 ($) から始まらなくてはなりません。続く文字は数字 (0-9) も使えます。JavaScript は大文字・小文字を区別するため、使えるアルファベットは "A" から "Z"（大文字）と "a" から "z"（小文字）です。
引用元 ： https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Variables
この説明を要約すると、
- "A"～"Z"までの半角英大文字、
- "a"～"z"までの半角英小文字、
- 0～9までの半角数字
- アンダースコア(_)、 ドル記号($)、
これらが変数名・関数名に使える文字ということ。
ドル記号は変数名に使える"ありふれた文字"なんです。
だからこんな変数も作れるし・・・
|
1 2 |
var $ = 'dollar'; var $$ = 'double dollar' |
あるいはこんな関数名も作れるということ。
|
1 2 3 |
function $(){ return 'dollar'; } |
これで $ が特別ではないと分かるはず。
別にjQuery専用の記号ではないんです。
- だからJavaScript的には特別な記号ではない
- とはいえjQuery的には特別な意味はある
特別な記号ではないけど、特別な意味はあります。
jQueryでは $ を要素操作に使っている訳です。
ドルマークの意外な正体。実は $ = jQuery と等価
そして面白い事実がもう１つあります。
それは $ = jQuery と等しいということ
ドルマークは jQuery で置き換えてもOKなんです。
詳しく解説すると次のような感じ
まず $ が定義されてる箇所を見てみましょう。
最新の v3.4.1 だと以下のように定義されてました。
▼ こちらのコード
|
1 2 3 |
if ( !noGlobal ) { window.jQuery = window.$ = jQuery; } |
この window は最上位コンテクストのこと
通常のコードでは window は省略可能です。
つまり jQuery = $ ということ
「いちいち
jQuery と書くの面倒だよね」
「だから
$ の１文字で代用できるよ」
これが $（ドルマーク）の正体なんです。
なので以下２つのコードは全く同じものです。
|
1 2 3 4 5 |
/// ドルマークを使って書いたもの $('div.hoge').text('hogehoge'); /// 上をjQueryに書き変えたもの jQuery('div.hoge').text('hogehoge'); |
まあ jQuery と書くことは ほぼないですが。
でも限定的な場面では $ が使えないこともあります。
例 ： WordPressなどのjQueryを採用してるCMSなど
そういう場面では jQuery を使うのが確実です。
ちなみに $ が参照できないトラブルについて
最後に蛇足
jQueryを使ってると、時折こんなエラーに遭遇します。
|
1 |
Uncaught ReferenceError: $ is not defined |
もちろん jQuery で置き換えてもエラーは出たまま。
しかもjQueryを読み込んでるにも関わらずです。
もしこういうトラブルに陥った場合・・・
以下記事のやり方で何とか回避できます。
気になる方はご覧ください。
ドルマークの意味と正体のまとめ
ここまでを簡単にまとめ
ドルマークは結局こういう意味です。
- ドルマーク自体は特別ではない
JavaScriptでは変数名・関数名にも $ が使える。jQuery専用ではない。
- 内部的には
$ = jQuery で等価
実はドルマーク（ $ ）は jQuery でも置き換え可能。
ということで、jQueryのドルマークについてでした。ではまた(^^)/~~~。
