jQuery変数構文

【JavaScript】 変数名の$（ドルマーク）はどんな意味がある？

更新日：2023/10/11

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

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

そこで今回は、『変数名の$（ドルマーク）はどんな意味があるのか』について調べてみました。

jQueryでのドルマークの定義

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

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

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

window.jQuery = window.$ = jQuery;

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

windowsオブジェクトはグローバルオブジェクトです。
このオブジェクトのプロパティは、Webページ内のスクリプトからプロパティ名だけで参照可能になります。

つまりJQueryのスクリプトファイル内で生成した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 _;
let $a_$b;

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

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

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

const $element = $( id );

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

実際はそのようなものはありません。
JavaScriptの機能としては特に意味がないことを理解しておきましょう。

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

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

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

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

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

まとめ

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

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

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

関連記事

スポンサーリンク

記事の内容について

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

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

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

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

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

 

このサイトは、リンクフリーです。大歓迎です。