jQueryのドルマーク ($)の意味とは?その意外な正体

jQueryを使い始めると気になること

それは $ドルマークを使う意味

結論から言えば、これには特別な意味があります。

ということで  jQueryのドルマーク($)の意味 を解説!

jQueryでは $ をあらゆる所で見かけるが・・・

本当にコードのいたる所で見かけます。

例えば要素テキストを書き変えるのに使ったり、

要素にCSSを適用するのに使ったり、

あるいは要素を作成するのに使ったり・・・

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までの半角数字
  • アンダースコア(_)、 ドル記号($)、

これらが変数名・関数名に使える文字ということ。

ドル記号は変数名に使える"ありふれた文字"なんです。

 

だからこんな変数も作れるし・・・

あるいはこんな関数名も作れるということ。

これで $  が特別ではないと分かるはず。

別にjQuery専用の記号ではないんです。

  • だからJavaScript的には特別な記号ではない
  • とはいえjQuery的には特別な意味はある

特別な記号ではないけど、特別な意味はあります。

jQueryでは $  を要素操作に使っている訳です。

ドルマークの意外な正体。実は $ = jQuery と等価

そして面白い事実がもう1つあります。

それは $ = jQuery と等しいということ

ドルマークは jQuery  で置き換えてもOKなんです。

詳しく解説すると次のような感じ

 

まず $  が定義されてる箇所を見てみましょう。

最新の v3.4.1 だと以下のように定義されてました。

▼ こちらのコード

この window  は最上位コンテクストのこと

通常のコードでは window  は省略可能です。

つまり jQuery = $  ということ

「いちいち jQuery  と書くの面倒だよね」
「だから $  の1文字で代用できるよ」

これが $(ドルマーク)の正体なんです。

 

なので以下2つのコードは全く同じものです。

まあ jQuery  と書くことは ほぼないですが。

でも限定的な場面では $  が使えないこともあります。

例 : WordPressなどのjQueryを採用してるCMSなど

そういう場面では jQuery  を使うのが確実です。

ちなみに $ が参照できないトラブルについて

最後に蛇足

jQueryを使ってると、時折こんなエラーに遭遇します。

もちろん jQuery  で置き換えてもエラーは出たまま。

しかもjQueryを読み込んでるにも関わらずです。

 

もしこういうトラブルに陥った場合・・・

以下記事のやり方で何とか回避できます。

気になる方はご覧ください。

ドルマークの意味と正体のまとめ

ここまでを簡単にまとめ

ドルマークは結局こういう意味です。

  • ドルマーク自体は特別ではない
    JavaScriptでは変数名・関数名にも $  が使える。jQuery専用ではない。
  • 内部的には $ = jQuery  で等価
    実はドルマーク( $ )は jQuery  でも置き換え可能。

ということで、jQueryのドルマークについてでした。ではまた(^^)/~~~。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください