jQueryの『$』とは？初心者にも分かるシンプル解説！

Web開発の現場ではよく目にする「$」記号。

特にjQueryを使う際、これが登場することが多いですが、初心者の方は「一体これって何？」と思うかもしれません。

実は、jQueryでの「$」には深い意味があり、使いこなすことでコードがシンプルになり、より効率的に開発ができるようになります。

このブログでは、「$」の役割や使い方を初心者にも分かりやすく解説します。

jQueryの「$」の正体は？

まず、jQueryで使われる「$」の正体を理解することから始めましょう。

実は、jQueryの本体は「jQuery」という名前の関数ですが、コードを短くするために「$」という記号を使っています。簡単に言うと、「$」は「jQuery」のショートカットなんです。

jQuery('h1').hide(); // jQueryを使った書き方
$('h1').hide(); // 同じ意味、$を使った短縮形

このように、「$」はjQueryを呼び出すための簡潔な方法として使われているのです。

jQueryの「$」記号は他のJavaScriptライブラリでも使われることがあり、複数のライブラリを同時に使う場合には競合が発生することがあります。

たとえば、Prototype.jsという別のライブラリも「$」を使っているため、衝突してしまうのです。

jQueryにはこの競合を回避するためのメソッド「noConflict()」があります。これを使うと、jQueryの「$」を無効にして、他のライブラリと競合しないようにできます。

jQuery.noConflict(); // $を無効にする
jQuery('h1').hide(); // jQueryで操作

また、別の方法として、スコープ内で「$」を使うことで、他のライブラリと衝突しないようにする方法もあります。

(function($) {
  $('h1').hide(); // スコープ内で$を使う
})(jQuery);

では、実際に「$」を使って、簡単な操作を行ってみましょう。以下のコードは、ボタンをクリックするとテキストが非表示になる例です。

<button id="hideButton">非表示</button>
<p id="text">このテキストが消えます！</p>

$('#hideButton').click(function() {
  $('#text').hide(); // ボタンがクリックされたらテキストを非表示にする
});

このコードでは、$(‘#hideButton’) と書くことで、idが「hideButton」の要素を選択し、クリックイベントを設定しています。シンプルでわかりやすいコードですね。

シンプルなコードの記述は、複雑な記述（DOM操作など）になるにつれて効果が上がってきます。

例としては、以下のようなものがあります。

動的な要素の追加

$('#addButton').on('click', function() {
 $('<div class="new-element">New Element</div>').appendTo('#container');
});

条件付きで要素を表示/非表示

$('.item').each(function () {
  if ($(this).text().includes('Special')) {
    $(this).show();
  } else {
    $(this).hide();
  }
});

「jQuery」が「＄」に変わっただけで、要素の取得や、メソッドなどが見やすくなりエラーも減らすことができます。

「＄」を使った要素の取得は、以下の記事でも解説しています。

こちらの記事では、formで使用するタグを主に、クラスやIDに依存しない形で要素を取得したい場合に参考にしてみてください。

今回は、form関連のタグをjQueryで取得する方法を書いていこうと思います。正直、クラスやIDをつければ、取得するのは難しくありません。ただそれには、自分が作ったform、もしくは自分でHTMLへ記述[…]

jQueryの「$」を理解することによって、以下のようなメリットがあります。

１つ目は、コードが短く、可読性が向上します。

「$」を使うことで、コードがシンプルになり、記述量が減ります。結果として、コードが読みやすく、メンテナンスがしやすくなります。

２つ目は、他のライブラリとの互換性です。

「$」を適切に使いこなせば、他のJavaScriptライブラリともうまく共存できます。特に、jQueryの「noConflict()」を使用することで、複数のライブラリを併用する際の問題を避けられます。

初心者の方でも、jQueryの「$」を理解することができたと思います。

次回からのコーディングでは、この知識を活用して、もっと便利でシンプルなコードを書いてみてください！