MENU

JavaScript構文変数jQuery

【JavaScript】 変数名の$(ドルマーク)はどんな意味がある?

更新日:2020/12/24

 

jQueryの変数には$(ドルマーク)をつける。
JavaScriptの勉強を始めたころ、参考にしていたサイトにそう書いてありました。

 

僕は、そういうものだと深く考えずに使っていましたが…
今になってドルマークには何か深い意味があるのではないかと、疑問に感じました。

 

ということで、調べてみました。

 

jQueryでのドルマークの定義

 

jQueryで、どのようにドルマークを定義しているのかソースを確認してみます。

 

ソースはjQueryのダウンロードページhttp://jquery.com/download/の、『Download the uncompressed』で始まるリンクをクリックすると、見ることができます。

 

1万行にも及ぶ難しいコードが続きますが、今回は最終行付近を見れば一目瞭然です。

 

window.jQuery = window.$ = jQuery;

 

出典:https://code.jquery.com/jquery-3.5.1.js

 

windowsオブジェクトに追加したプロパティは、グローバルオブジェクトになります。

 

つまり他のスクリプトから、jQueryというオブジェクトを、ドルマークとjQueryという名前で呼び出せるようにしているわけです。

 

ちなみにjQueryというオブジェクトの正体は、150行付近に次のように定義されています。

 


// Define a local copy of jQuery
jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
};

 

 

これを見ると、セレクタ―を受け取って、何かを返す関数だということがわかります。
(何かについては触れません)

 

つまり次のコードは、グローバルオブジェクトとして登録したドルマークを経由して、何かを取得しているわけですね。

 

const $element = $("id");

 

ちなみにwordpressはドルマークを使用してjQueryを呼び出すことができません。
理由は次の記事を見てください。
【JavaScript】 wordpressでjQueryが使えない理由と対処法

JavaScriptのドルマークの意味

 

jQueryでのドルマークについて調査しましたが、『JavaScriptでのドルマークの意味は何なのか?』という疑問の答えにはなっていませんね。
英語なので見たくないのですが、JavaScriptの仕様書を見てみます。
(2020/12/24 英語で見たくなかったので和訳しました:11.6 名前とキーワード)

 

仕様書の中で変数名は11.6.1 Identifier Names(識別名)で定義されています。

 

日本語文字も使えるようですが、ここでは見なかったことにして...変数名はアルファベットまたは$か_(アンダーバー)で始めることになっています。
そして変数名は一文字だけでも問題ありません。

 

つまり、$という変数名も有効なんですね。

 

有効な変数名の例

let abc;
let _abc;
let $abc
let $;
let _;

 

ドルマークは見慣れているけれど、アンダーバーだけの変数が有効なのは個人的に変な気分です。

 

ちなみにドルマーク=jQueryと思っている人が多いかもしれません。
しかしJavaScript側からすると、jQueryが勝手にドルマークを使用しているだけです。

 

またjQueryで生成されたオブジェクト変数に$を付けるのが作法だそうです。

 


const $element = $( id );

 

僕がJavaScript初心者だったころこれを見たとき、$から変数名を始めることでjQueryと変数の間で機能的なつながり(自分の中でも漠然として説明できないなにか)があると思っていました。

 

実際は$から始めることで、jQueryと関連のある変数であることをローカルルールとして示しているにすぎません。
JavaScriptの機能としては特に意味がないことを理解しておきましょう。

$はテンプレートリテラルでも使用する

 

$は変数名として使用できますが、次のようにテンプレートリテラル内で使用すると別の意味を持ちます。

 

テンプレートリテラルでの$

 


const m = "太郎くん";
const text = `今日の日直は${ m }です`;

console.log( text ); // 今日の日直は太郎くんです

 

${ 変数 }とすることで、文字列内に変数を展開できるのです。

 

テンプレートリテラルについては次の記事で解説しているので、見てください。
【JavaScript】 便利!テンプレートリテラルとは!だが普及しなそう…

まとめ

 

ドルマークは、変数名として使用できる文字という意味しかありませんでした。

 

つまりjQueryは、aやbなどの単純な名前で、グローバルに登録してしまっているのと同じなんですね。

 

有名だからこそ許される暴挙でした。

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ