jQuery データを格納する

jQueryにはプログラム内に使用する入れ物としてオブジェクト、変数、記述の3種類があります。プログラム内でデータの受け渡しをする際に役立ちます。

オブジェクトとは

オブジェクトとは複数のデータを、データ名と値をセットにして格納するための入れ物です。css()メソッドの場合、プロパティと値が該当します。

■オブジェクトの使用例

$function(){
   $('#typo').css({
      'font-size': '50px',
      'background-color': '#ae5e9b',
       'color': '#ebc000'
   })
});

上記のコードでは{}で囲まれている範囲がオブジェクトです。オブジェクトの構文は以下の通りです。

■オブジェクトの構文

{
　　データ名1: 値1,
　　データ名2: 値2,
　　データ名3: 値3
}

変数とは

変数とは1つのデータを格納するための入れ物です。オブジェクトのように複数のでデータ名と値のセットを格納することはできません。ただし、変数には数値や文字列だけでなく、オブジェクトや配列なども格納することができます。変数の構文は以下の通りです。

■変数の構文

var 変数名;

上記のコードを記述すると空の入れ物が作成されます。又、変数の宣言と同時にデータを格納する場合は以下の通りとなります。

var 変数名 = データ;

上記のコードでは右側の値を左側の変数に格納します。複数の変数を宣言する場合は以下の通りとなります。

var 変数名1 = データ1,
    変数名2 = データ2,
    変数名3 = データ3;

変数の基本的な使い方

jQueryは、変数にデータを格納した後、その変数名を記述すると変数名が格納されているデータに置き換えられて処理が実行されます。

//変数の宣言とデータの格納
var a = 100;
var b = 100;
var c;

//変数名を使用したデータを処理
c = a + b; //変数cには「200」が格納される
a = 200;   //変数aの値を「200」で上書きする。
c = a - b; //変数cには「100」が格納される

上記コードを見ると、変数に格納されているデータに置き換えられていることがわかるかと思います。

※変数にはプログラム内でデータを保持することができます。一方でオブジェクトではその役割がなく、記述した箇所以外からは利用できません。

例えば、以下のコードではcssメソッドにデータの塊を渡すことができますが、他の場所では使用することができません。そのため、同じ内容のオブジェクトを２度記述しなくてはいけません。

■オブジェクトを２度記述

$('#typo').css({
   'font-size': '50px',
   'background-color': '#ae5e9b',
   'color': 'ebc000'
});
$('#header').css({
   'font-size': '50px',
   'background-color': '#ae5e9b',
   'color': '#ebc000'
});

一方、変数の場合は、プログラム内でデータは保持されるため、変数名を指定すると他の箇所からも利用できます。また、変数にはオブジェクトを格納することも可能ですので以下のような記述方法でデータを再利用できます。

■変数を用いたデータの再利用

//変数の宣言とオブジェクトの格納
var arg = {
      'font-size': '50px',
      'background-color': '#ae5e9b',
       'color': '#ebc000'
      };

//データの受け渡し
$('#typo').css(arg);
$('#header').css(arg);

このように、プログラム内のさまざまな箇所で同一のデータを使用したり、格納されている値を編集したりする場合は、変数にデータを格納することが必要です。

※jQueryメソッドに引数として渡しているオブジェクトはメソッドの中で変数になるので、処理が終わるまで消えることはありません。

オブジェクトの宣言と変数への格納は以下の構文で行います。

■オブジェクトの宣言とデータの格納

var 変数名 = {
   データ名: データ,
   データ名: データ,
   データ名: データ
};

変数はデータを格納できるだけではなく、そのデータを取り出すことも可能です。変数に格納されたオブジェクト内のデータを取得する方法は以下２パターンあります。

■オブジェクト内のデータ取得方法１

変数名.データ名;

■オブジェクト内のデータ取得方法２

変数名[‘データ名’];

上記構文に値を入れると以下のプログラムとなります。

■変数に格納されたオブジェクト内のデータを取得

var obj = {a: 100, b: 200};
var data;

data = obj.a + obj.b; //変数dataには「300」が格納される
data = obj['a'] ; obj['b']; //変数dataには「300」が格納される

尚、上記コードのようにオブジェクト内に格納されている各データのことをプロパティといいます。

配列とは

配列は、データを連続して格納する入れ物を作成できます。オブジェクトの構文と似ていますが、配列ではデータ名は指定しません。

■配列にデータを格納する構文

var 変数名 = [
      データ1,
      データ2,
　　　データ3
];

■配列の宣言とデータの格納

var array = [100, 200, 300];

 配列内のデータを取得する方法

配列では各データが順番どおりに格納されるので●番目のデータを取得するという方法でデータを取得できます。

■配列からデータを取得する方法

変数名[順番の数字];

ここで注意してほしいのが配列の順番は1からではなく0から始まります。配列内の先頭のデータを取得する場合は「変数名[0]」と指定します。

■配列へのデータの格納とデータの取得

var array = [100, 200, 300];
var sum;

sum = array[0] + array[2]; //変数sumには「400」が格納される
sum = array[1] + array[2]; //変数sumには「500」が格納される

thisとは

thisはデータ取得専用の変数のようなものです。thisはなんらかのデータが格納されますが、具体的な値を指定することができません。thisに格納されるデータは、jQueryの実行内容によって自動的に変化します。それでは具体的なコードをご紹介します。

以下のコードはタイミングをコントロールしています。

■タイミングをコントロールする例

$(function(){
   $('#typo').on('mouseover', function(){
      $('#typo').css('color', 'ebc000');
   });
});

上記のコードにthisを使用して以下のように書き替えることができます。

■thisの使用例

$(function(){
   $('#typo').on('mouseover', function(){
      $(this).css('color', '#ebc000');
   });
});

on()メソッドのようにメソッドの第2引数に命令（関数）を渡すメソッドでは、その命令内でthisを使用できます。上記コードの場合、thisはon()メソッドに指定してあるイベントが発生した要素が格納されます。つまり’#typo’が該当します。そのため、上記2つのコードは実行結果はまったく同じになります。

thisを使用する理由

thisを使用する理由は主に以下の3つがあります。

• 処理のパフォーマンスを向上できる
• コードを使い回しやすくなる
• $()関数に複数のセレクタを指定した場合に処理の切り分けが可能になる

●処理のパフォーマンスを向上できる

$()関数が実行されると、ブラウザは指定されたセレクタを手がかりにHTMLから要素を集める処理を行う為、この処理が繰り返し実行されるとCPUの負荷となり、処理に時間がかかります。一方でthisを使用すると取得済みの要素を使い回すことができるため、HTMLから要素を集める処理を行わなくてもよいため、パフォーマンスが向上します。

●コードを使い回しやすくなる

thisを使用すると、処理対象を自動的に切り替えることが出来るため、使い回しやすくなります。

●$()関数に複数のセレクタを指定した場合に処理の切り分けが可能になる

on()メソッドによるタイミングをコントロールする例でもありましたが、いずれの書き方でもあ実行結果は同じです。但し、以下のようなコードの場合はどうでしょうか。

■$()関数に複数のセレクタを指定した場合

$(function(){
   $('header, #typo, footer').on('mouseover', function(){
      $('header, #typo, footer').css(
         'background-color', '#ae5e9b'
      );
   });
});

上記コードの場合、$()関数に指定されている3つのセレクタのいずれかの要素にマウスオーバーすると、全ての要素にcss()メソッドが実行されます。例えば、header要素にマウスオーバーすると、#typoやfooter要素の背景色も実行されます。

そこで、上記コードにthisを使用してみます。

■thisを使用した場合

$(function(){
   $('header, #typo, footer').on('mouseover', function(){
      $(this).css(
         'background-color', '#ae5e9b'
      );
   });
});

thisを指定するとon()メソッドに指定しているイベントが発生した要素が格納されます。そのため上記コードを実行すると以下の処理が実行されます。

• header要素にマウスオーバーすると、thisにはheader要素のみ格納され、header要素のみ背景色が変更する
• #typo要素にマウスオーバーすると、thisには#typo要素のみ格納され、#typo要素のみ背景色が変更する
• footer要素にマウスオーバーすると、thisにはfooter要素のみ格納され、footer要素のみ背景色が変更する

このようにthisを使用するとイベントが起きた要素のみ処理を実行します。

関連記事はこちら

jQuery 画像とキャプションの表現

jQueyのスコープと命名規則

jQueryの制御文

jQueryの関数

jQueryの基礎を体験しよう

jQueryのホバーエフェクト

jQuery実行のタイミングについて

jQueryの演算子