コードを簡略化する！jQueryで変数の設定方法と使い方を解説

jQueryで変数という機能を使えば、コードを簡略化することができます。Webサイトの作成において、SEO対策やメンテナンス性を考えるとコードは簡略化するほうがいいです。長いコードは動作が重く、管理も大変です。

jQueryでコードを書いていると「このセレクタ何回も使うな」とか「この数値や値を何度も使うな」と思うことがあると思います。変数を使えば、使いまわしの多い値を短い値に変換して使うことができます。

本記事ではjQueryを設定方法と使い方を解説します。

変数とは

変数は数値や文字などを繰り返し使うために名前をつけて入れておく値のことです。変数はよく箱に例えられます。例えば、appleという変数名に「りんご」という値が入っているとします。appleは箱につけられたラベルで、りんごが必要なときに箱から取り出します。

変数は同じ値を繰り返し使うときに便利です。特に、大きな数値や長い文字を使う場合には何度も書く必要がなくなるので、コードも短くなります。コードが短くなると容量も少なくなり、開発効率も上がります。

変数を設定する方法

変数を宣言する

変数を使うにはまず変数を宣言することが必要です。変数の名前とどんな値を入れるかです。先ほどの変数appleに「りんご」という値を入れるとします。変数に値を入れることを「代入する」といいます。コードは以下の通りです。

var apple ="りんご";

変数を宣言する際には「var」という単語を入れる必要があります。そして、変数の名前を左辺に、入れる値を右辺にしてイコール（=）でつなぎます。ここでのイコール（=）は数学的な等しいを表す記号ではなく、値を代入するという意味で使われます。

上記の例では文字列を代入しているため値をダブルクォーテーション(“)で囲っています。もし、数値を代入する場合はダブルクォーテーションは不要になり、以下のようなコードとなります。

var amount = 10;

変数に代入する際は文字列か数値で書き方が変わるので気をつける必要があります。間違った書き方をした場合、数値が計算されなかったり、エラーになるので変数の設定の際は値の形式を確認することをおすすめします。

変数の中身を変える

変数は一度入れた値を別の値に変えることもできます。例として、fruit=”りんご”という変数があったとします。中身を「もも」に変えるとコードは以下の通りです。

fruit ="もも";

変数の中身を変えるときはvarという文字は不要です。console.logなどで呼び出すとfruitには「もも」が入っています。コードは順次処理になるので、以下のコードのように、変数を変えた後にconsole.logでfruitを呼び出すとコンソール上に「もも」が出力されます。

var fruit = 'りんご'; //変数の定義
fruit = 'もも'; //変数の変更
console.log(fruit);

数値でも変数の中身を変える方法は同じです。

変数に配列を入れる

変数に代入できるのは値だけでなく、配列も入れることができます。配列とは複数の値を持ったリストのようなものです。例えば、fruitsという変数に「りんご」「もも」「ぶどう」という値を配列で持たせる場合には以下のコードとなります。

var fruits = ['りんご', 'もも', 'ぶどう'];

配列を定義する場合には[]で囲み、それぞれの値は,(カンマ)で区切ります。それぞれの値の取り出し方は変数名[番号]です。例えば、「もも」をコンソール上に呼び出す場合、以下のコードです。

console.log(fruits[1]);

番号は一番左が0から始まるので注意してください。つまり、fruits[0]は「りんご」、fruits[1]が「もも」、fruits[2]が「ぶどう」です。

jQueryでは繰り返し使うセレクタに使う

jQueryで変数を使う場合は多くが繰り返し使うセレクタに対してです。jQueryでは同じ要素に対して、複数の処理を書くことがあります。処理のたびにセレクタを書いても良いのですが、変数を利用すると短く書くことができます。

例えば、$(“#fruit”)というセレクタをfruitという変数に代入します。そして、fruitというid名を持った要素をfadeOutさせるコードは以下の通りです。

var fruit = $('#fruit');
fruit.fadeOut();

コードがかなりシンプルになりました。また、$(“#fruit”)だと記号も多いので書き間違えも多くなります。shiftを押したり、押さなかったりになるため、キーボード上の指の動きも多くなります。

変数を使えば文字だけになるので、スペルミス以外で間違えたコードを書くことがなくなります。指の動きも少なくなるため、コードを書く時間も短くなります。

変数を使うメリット

コードを省略できる

変数を使うメリットはコードを省略できる点です。jQueryでは「$」や「””」、「()」という記号を使います。いちいち書いていては面倒です。何回も使うセレクタに対しては変数を使えば記号を最低限にできます。

また、長いコードでも短い文字数の変数に変えてしまえば、いちいち長いコードを書く必要が無くなります。変数の定義の際に一度は書く必要がありますが、のちのち何回も書くことを考えれば、変数に代入してシンプルにしたほうが、面倒さもなくなります。また、書き間違えも少なくなります。

コードの書き換えが簡単

変数を使えば制作途中で値を変えたくなっても文字を変える箇所が1つになるので簡単になります。例えば、class名を「apple」から「peach」に変えたいとします。「apple」が10箇所に使われていた場合、appleを10個「peach」に変える必要があります。

しかし、var fruits = $(“.apple”)と定義します。appleの部分をpeachに変えるだけで、10個の処理が1箇所の変更で変わります。修正箇所が減るため、変数を使えば、制作効率があがります

書き換えが簡単になると書き漏れもなくなり、コードが動かなくて修正に時間元られなくなります。

まとめ

jQueryで変数を使う場合はセレクタの代入に使われることが多いです。セレクタの指定は記号が多く使われるため、間違いが起こりやすく、修正に時間を取られます。また、id名やclass名の指定の際には「.（ドット）」や「#」を忘れることもあります。

変数に代入しておけば一カ所だけの管理で良いため間違えも見つけやすく、修正の手間も少なくなります。ぜひ、変数を使いこなして、制作効率を上げてみてください。