JavaScriptにおける「$（ドルマーク）」の意味と使い方

JavaScript

2022.04.01 2022.03.31

JavaScript内で使用される「$（ドルマーク、ダラー）」には4通りの利用シーンがあります。
1つは、文字列で使用される場面、2つ目はjQuery関連、3つ目はテンプレートリテラル内での使用、そして4つ目は正規表現の中です。

それぞれの利用場面について詳しく紹介します。

悩見坂楓

「$」って急に出てくると何か意味わからなくなるし

著者

パターンを整理しておけば全く気にならないですよ

ちなみにDart言語の「$」については別途まとめてありますので、気になる方はそちらをご参照ください。

文字「$（ドル）」としての利用
jQueryを利用している最中に「$」を使う
テンプレートリテラル内での利用
正規表現における$
まとめ

文字「$（ドル）」としての利用

これは基本中の基本なのでさらっと見てみましょう。

let textObj = "It costs $100.";

一応解説しますと、テキストオブジェクトのtextObj変数、”It costs $100.”の中に「100ドル」という意味で文字列の一部として利用されています。これは問題ないですね。

悩見坂楓

これはさすがに分かるわぁ

jQueryを利用している最中に「$」を使う

jQueryでは、慣例的にセレクタを指定する際に$('.className')のような使い方をしますね。

$(function(){
  $('.anyClassName').addClass('activeClassName');
});

ここにも「$」が登場しています。

ですが、気になりませんか？？なぜ「$()」のような使い方をjQueryでする（している）のか……

説明すると長くなりそうなので別途記事を作成しますが、誤解をおそれず簡単に説明すると、これは「$」という変数がたまたま空いていたので、jQuery=$にしちゃえ！ということが発端になります。

どういうことかと言うと「$」はjQuery特有の宣言やおまじないだと思っている方も多いと思いますが、「$」は単なる変数です。誰も使いそうにないからjQuery本体を作った人たちが変数$にjQuery（オブジェクト）を突っ込んでいるだけなんですね。

そこで次の例を見ると「$」に「jQuery（オブジェクト）」を突っ込んでいるだけだということが分かりやすくなります。

jQuery(function(){
  jQuery('.anyClassName').addClass('activeClassName');
});

このサンプルコードでは「$」を使わず、「jQuery」と記述しています。「$」を使っていませんが先ほどの「$」を使ったサンプルコードと全く同じ動作をします。これは「jQuery（オブジェクト）」を変数「$」に代入しているからなんですね。

なので何で「$」やねん、と思ったらたまたま空いてる変数だったから、と軽く流してしまいましょう。

テンプレートリテラル内での利用

これはサンプルコードを見た方が早いので次の例をご覧ください。

let myName = "Hades";
let introduceMe = ` // 注意）シングルクォーテーションではなくバッククォートで囲うこと
My name is ${myName}. Nice to meet you!
`;

テンプレートリテラルについても別ページにまとめてあるので、テンプレートリテラルを知らない方は下記をご覧ください。

テンプレートリテラルを使うと、文字列を複数行にまたいで記述することが可能な上に、スコープ内の変数を文字列内に呼び出すことが出来ます。

それが「${myName}」の部分です。$に{}（中括弧）を付け、中に変数名を入れることで、宣言済の変数の値を文字列に突っ込むことが出来るのです。便利なので是非使ってみてください。ECMAScript 2015 (ES 6) からのJavaScriptになりますが、ほぼブラウザを網羅しているので、積極的に使っても問題ない場合の方が多いです。

正規表現における$

正規表現も説明し出すと日が暮れてしまうので、さらっと$についてだけ解説します。

正規表現の例を挙げると単純なものでは郵便番号の妥当性チェックなどに用いる「^\d{3}-\d{4}$」があります。

しっかり「$」いますね。正規表現における「$」は「直前の文字が行の末尾にある場合にマッチする」という意味合いを持ちます。

先ほどの郵便番号であれば、「\d{4}」が行の末尾にあればマッチ、例えば4567という数字があればマッチということになります。ちなみにですが「\d{4}」は4桁の整数を表しています。つまり、4567でも1234でも8192でもマッチということになりますね。

また、忘れがちですが正規表現を使った置換の際にも「$」が登場します。

let re = /(\w+)\s(\w+)/;
let str = 'Hades Persephone';
let newstr = str.replace(re, '$2, $1');
console.log(newstr);  // Persephone, Hades が出力されます

replace()関数を使ったサンプルコードです。ここにも「$」が出てきます。$2,$1はそれぞれ最初の行の(\w+)に対応しています。置換後にどこに表示するかを視覚的に分かりやすくするメリットがあり、’$2, $1’のように置換後のイメージが瞬時に判断可能になります。上記の例では1番目の名前（文字列）と2番目を入れ替えて置換して出力する、というサンプルコードだとお分かりいただければと思います。

余談ですが、JavaScriptの正規表現について別途記事をまとめましたので、是非ご参考になさってくださいね。