jQueryでの変数の使い方

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

いつも使うテキストや数値、計算式、よく指定する要素などを変数に入れて使い回すと、パフォーマンスにも優れ、メンテナンス性も良くなります。

ここではjQueryにおける変数の基本的な説明や、さまざまな使い方をご説明します。

変数の基本

宣言と代入

変数の使い方を簡単にいうと、入れ物を作り名前を付けて、その入れ物に値を入れます。

変数という入れ物を作ることを宣言といいます。

変数に値を入れることを代入といいます。

また、このように宣言と同時に値を代入することを初期化といいます。

使い方

まずは変数を宣言し、値を代入してみましょう。

変数の宣言にはvarを使います。

jQuery

結果(コンソール)

以下のようにコンソールログに代入された値が表示されます。


てすと


参考:jQueryでコンソールログを使ったデバッグ方法

構文

変数は以下のように使います。

var 変数名 = 値

varで変数を宣言し、=(イコール)の右辺には代入したい値を入力します。

未宣言のグローバル変数

例えば x = 42 のように、単に変数に値を代入することもできます。

ただ、未宣言のグローバル変数は、よく予期しない動作を引き起こします。ですから、未宣言のグローバル変数を使用することはやめた方がいいでしょう。

出典:文法とデータ型 – JavaScript | MDN

上記のとおり、変数はvarで宣言して使用するのがよいでしょう。

jQueryオブジェクトには$マークを付ける

以下のようなjQueryオブジェクトを変数に代入する際は、分かりやすくするために変数名に$マークを付けるのが一般的です。

$name = $('#name');

変数名に$マークが付いてたら、jQueryのセレクタの部分が代入されているんだなと分かるため、メソッドを繋いだりと適した処理をスムーズに行うことができます。

変数の型を調べる

変数に代入された値の型を調べるにはjQuery.type()を使います。

jQuery

結果(コンソール)

以下のようにコンソールログに変数の型が表示されます。


string
number
array
function
boolean


ちなみに上記型は以下のようになります。

  • string => 文字列
  • number => 整数
  • array => 配列
  • function => 関数
  • boolean => 真偽値

$.type()ですぐに型が調べられるので便利ですね。

いろいろな使い方

変数の値を上書き

すでに値が代入された変数に別の値を代入すると、上書きされます。

jQuery

結果(コンソール)

以下のようにコンソールログに代入された値が表示されます。


TEST


すでに宣言された変数に別の値を代入する際はvarは必要ありません。

複数の変数を代入

一度に複数の変数を宣言することもできます。

変数を,(カンマ)区切りで繋げば複数の変数を一括で宣言できます。

jQuery

結果(コンソール)

以下のようにコンソールログに代入された値が表示されます。


apple
orange
grape


配列を代入

変数には配列も代入できます。

jQuery

結果(コンソール)

以下のように配列に代入された値が表示されます。


新潟
長岡
上越


$.each()の使い方は以下記事にてご紹介しています。

参考:jQuery.each()でのループ処理

セレクタに変数を使う

jQueryの$(この部分)に変数を使うこともできます。

以下のサンプルではHTMLのテキストを書き換えます。

HTML

jQuery

結果(HTML)

以下のようにHTMLのテキストが書き換わります。


テストテキスト


text()の使い方は以下記事にてご紹介しています。

参考:text() でHTML要素にテキストを追加

文字列の一部に変数を使う

文字列の途中に変数の値を混ぜることもできます。

以下サンプルでは2パターンの方法を説明します。

jQuery

結果(コンソール)

以下のようにコンソールログには、名前が含まれたテキストが表示されます。


1.こんにちは!田中さん
2.こんばんは。田中さん


1.はよく使われる構文です。

文字列は''(シングルもしくはダブルクォート)で区切り、+(プラス)で変数と繋げます。

‘文字列’ + 変数 + ‘文字列’

2.はテンプレートリテラルを使った方法で、IEなどの古いブラウザでなければ対応しています。

文字列と変数をクォートで区切る必要もないため便利ですが、引用符は''(シングルもしくはダブルクォート)ではなく``(バッククォート)となりますので注意してください。

`文字列 ${ 変数 }`

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*