jQueryで変数を使う方法｜const・let・セレクター保存を初心者向けに解説

jQueryのコードを読んでいると、const $buttonやlet countのような書き方が出てきます。「constとletは何が違うの？」「変数名の先頭にある$は何？」と迷いますよね。

変更しない値はconst、あとから変える値はletで変数へ保存します。jQueryで選んだ要素を保存する変数には、分かりやすくするため$buttonのように先頭へ$を付ける書き方がよく使われます。

この記事では、変数の基本、const・letの使い分け、jQueryオブジェクトの保存、カウンター、配列の表示まで、実際に動く例で説明します。

変数とは値に名前を付けて保存する箱
constとletを使い分ける
1. 変更しない変数はconstで宣言する
2. 変わる変数はletで宣言する
jQueryで選んだ要素を変数へ保存する
letでクリック回数を数える
配列を変数へ保存して一覧を作る
変数の有効範囲を意識する
変数でよくある間違い
まとめ

変数とは値に名前を付けて保存する箱

変数は、文字列や数値、HTML要素などの値を一時的に保存し、あとで再利用する仕組みです。値へ分かりやすい名前を付けると、コードの目的も伝わりやすくなります。

const siteName = 'WP-LOAD';
let count = 0;

console.log(siteName);
console.log(count);

siteNameやcountが変数名、右側の文字列や数値が保存する値です。=は「右の値を左の変数へ代入する」という意味で、数学のイコールとは役割が異なります。

constとletを使い分ける

変更しない変数はconstで宣言する

constで宣言した変数には、別の値を再代入できません。jQueryで選んだ要素、設定値、配列など、変数自体を入れ替えない場合に使います。

const buttonLabel = '送信する';

// 再代入はできません
// buttonLabel = '送信しました';

変わる変数はletで宣言する

letは、あとから別の値を代入できます。クリック回数、入力値に応じた合計、開閉状態など、処理の途中で変化する値に向いています。

let count = 0;

count = count + 1;
console.log(count); // 1

古いコードではvarも見かけますが、宣言できる範囲が分かりにくく、意図しない上書きにつながることがあります。新しく書くコードでは、まずconstを使い、再代入が必要なときだけletを選ぶと判断しやすくなります。

jQueryで選んだ要素を変数へ保存する

同じ要素を何度も操作するときは、jQueryオブジェクトを変数へ保存できます。次の例では、ボタンとメッセージをそれぞれ一度だけ選びます。

ボタンを押すと、保存した2つの変数から文字と色を変更します。実行後は次の表示になります。

index.htmlへ操作するボタンとメッセージを書きます。

<button type="button" id="actionButton">実行する</button>
<p class="message" id="message">実行前です</p>

script.jsでは、変数名の先頭へ$を付けています。

jQuery(function ($) {
  const $button = $('#actionButton');
  const $message = $('#message');

  $button.on('click', function () {
    $button.text('実行済み');
    $message
      .addClass('active')
      .text('変数から同じ要素を操作しました');
  });
});

$buttonの$はJavaScriptの決まりではなく、「jQueryで選んだ要素が入っている」と伝えるための命名ルールです。付けなくても動きますが、DOM要素との違いを読み取りやすくなります。

同じセレクターを何度も書かずに済むため、名前の変更箇所を減らせます。ただし、クリック後に追加された要素など、内容が変化する集合は、必要なタイミングでもう一度選ぶことがあります。

letでクリック回数を数える

値が変化する代表例として、ボタンのクリック回数を数えてみます。1回押した後の表示は次のとおりです。

index.htmlへボタンと回数の表示場所を用意します。

<button type="button" id="countButton">1回増やす</button>
<p><span id="count">0</span> 回</p>

script.jsで回数をletへ保存し、クリックごとに1を足します。

jQuery(function ($) {
  let count = 0;

  $('#countButton').on('click', function () {
    count += 1;
    $('#count').text(count);
  });
});

count += 1は、現在のcountへ1を足して再代入する省略形です。変数をクリック処理の外側で宣言しているため、前回の値を次のクリックでも利用できます。

配列を変数へ保存して一覧を作る

変数には1つの文字だけでなく、複数の値をまとめた配列も保存できます。学習項目の配列からHTMLを作ると、次の一覧を表示できます。

index.htmlへボタンと空のリストを用意します。

<button type="button" id="listButton">一覧を表示する</button>
<ul id="learningList"></ul>

script.jsで配列をHTMLへ変換し、html()でリスト内へ追加します。

jQuery(function ($) {
  const items = ['セレクター', 'イベント', 'メソッド'];

  $('#listButton').on('click', function () {
    const html = items
      .map(function (item) {
        return `<li>${item}</li>`;
      })
      .join('');

    $('#learningList').html(html);
  });
});

配列そのものを別の配列へ再代入しないため、itemsはconstで宣言します。constでも、配列の要素やオブジェクトのプロパティは変更できる点に注意してください。

変数の有効範囲を意識する

constとletは、宣言した波括弧{ }の内側で利用できます。これをスコープと呼びます。

jQuery(function ($) {
  const message = '外側から使えます';

  $('#showButton').on('click', function () {
    const clicked = true;
    console.log(message);
    console.log(clicked);
  });

  // ここではclickedを使えません
});

必要以上に外側へ変数を置くと、別の処理から変更される可能性が増えます。利用する範囲に近い場所で宣言すると、コードを追いやすくなります。