初心者向け：jQueryの「変数の使い方」を基本から！

2020年4月9日

jQueryを学び始めたけど「変数」の使い方をわかりやすく解説してほしい！

そうだね「変数」を学ぶ事で、jQueryで出来る事の幅もグッと広がるぞ！

プログラミングには切っても切り離せないのが「変数」。今回は初心者の方に向けて、jQueryの変数を具体例を交えて基礎からわかりやすく解説していこう！

変数とは何だ？

まず最初に変数ってなんだ？どういう疑問が湧いてくるだろう。

変数とは例えて言うならば「値が変化するモノを入れておいて、いつでも取り出せる便利な箱」のようなもの。

これだけでは、まだわからないと思うが、まずは「いつでも値が取り出せる便利な箱」と覚えておこう。

値が変化するものとは？

では変数に入れる「値が変化するもの」とは何だろうか？プログラミングでよく出てくる例で言うと、

人の名前
年齢
商品名
色
長さ
値段
日付

などなど、値が固定ではなく「ユーザーによって変わるもの」や「商品によって変わるもの」や「デザインによって変わるもの」など、それぞれの状況によって変わるものをを指し、変数にはこの他にも数え切れない程の用途がある！

変数の利用方法

変数に値を入れるのはわかったが、変数を使う時はどのように使うのか確認していこう。

上記のように、状況によって変わる値を『一旦「自分で名前をつけた変数」に入れておいて、後でその「変数名」で呼び出す』といった使い方をするのが、一般的な変数の利用方法だ。

変数の利用方法

自分で命名した「変数」という箱に一旦入れて、後でその「変数名」で呼び出して使う。

変数を使うメリット

では、なぜわざわざ値を変数に入れるかというと、変数に入れた値が変化しても、呼び出す時にその値に関係なく「変数名だけ簡単に呼び出せる」というメリットがあるからだ！

つまり例えば、「年齢」を「age」という変数に入れておくと、人によって年齢が変わったとしても、呼び出す時は具体的な数字で「２５歳を表示しろ！」ではなく、「変数ageを表示しろ！」という命令で済むという事だ。

変数を使うメリット

呼び出す時に「変数名」だけで簡単に呼び出せる！

変数を使う時の「記述の仕方」と具体例

jQuery（javaScript）では、変数を定義する時にvarという宣言が必要で、例えば「年齢」という値を入れておく変数を作る場合、ageという変数名（任意）に25という数字を入れておく場合はこのように書く。

var age = 25;

これが、変数を定義する時の記述例だ。変数名は自由につけてもOKだが、今回のageのように後で見た時に「なんの数字か意味がわかるような名前」にしておこう！

次に「25」という具体的な数字ではなく「ユーザーが（id="age"の）inputフォームに入力した年齢」を取得して、変数に格納する方法を見ていこう。

var age = $("#age").val();

これが、ユーザーがフォームに入力した値を変数に格納する例だ。（val()メソッドは、指定した要素のvalue値を取得できるメソッド）

変数を使ったコードの例

では具体的に、ユーザーがフォームに入力した年齢に対して「成人か未成年かをチェック」する場合の例を、見ていこう！

HTML

<input type="number" id="age" name="example">

jQuery

$(function(){

  $("#age").on("blur",function(){
    //フォームのフォーカスが外れた時
    var age = $("#age").val();
    if(age){ //ageに値がある場合
      if (age >= 20){
       alert("あなたは成人ですね");
      }else{
       alert("あなたは未成年ですね");
      }
    }
  });

});

コードの解説

まず全体の概要として、条件分岐を使って、ageの値が20以上の場合は「あなたは成人ですね」と表示し、それ以外は「あなたは未成年ですね」と表示する例だ。

まだ学んでいないコードがあるかもしれないので、順番に解説していこう。

$("#age").on("blur",function(){ 〜 });の部分は、inputのフォームのフォーカスが外れた場合に発動する「イベント」の記述であり、ユーザーが「入力し終わったあとのタイミングで」という意味となる。

次のvar age = $("#age").val();の部分は前述したように、入力した内容をageという変数に格納する為の記述。

次はif(age){ 〜 }の部分は、条件分岐の省略形の書き方で「ageという変数に何らかの値が入っている場合」という意味となる。つまりユーザーが何も入力せずに、フォームからフォーカスを外した場合には、動作しない仕組みだ。

最後のif (age >= 20){ 〜 }else{ 〜 }の部分では、ユーザーが入力した数字が「20以上の場合の処理と、それ以外の処理」という条件分岐の記述方法で、それぞれ成人か未成年かのアラートで表示している。

jQueryの「変数の使い方」のまとめ

今回解説した「変数」は、プログラミングを学ぶ上で絶対に必要な存在。

変数をうまく使う事によって、プログラミングがぐっと楽になるので、是非とも理解して使えるように練習していこう！

「変数」が使えるようになった方は、より複雑なプログラムが組めるように「if文を使った条件分岐」を学んでみよう！

▶ jQueryでif文を使った条件分岐の書き方

jQueryでは「if文」を使った条件分岐を使ってプログラムする事ができる！今回はjQueryで「if文」を使った条件…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント