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

2020年4月10日

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

今回はjQueryで「if文」を使った条件分岐の書き方や「省略形」の書き方など、具体例を交えて解説していこう！

条件分岐とは

条件分岐というのは「もし〇〇という条件に合致していればAを表示」といった具合に、任意の条件を設定して、その条件合致した場合に必要な処理を実行するというもの。

条件分岐はプログラミングでは欠かせない処理であり、jQueryでは「if文」や「switc文」という構文が利用できる。

if文の構文

条件が１つの場合の書き方

if(条件式){
 //条件に合致した場合の処理を記述
}

1つ条件と「それ以外」という書き方

if(条件式){
 //条件に合致した場合の処理を記述
}else{
 //最初の条件に合致しない場合の処理を記述
}

条件が複数ある場合の書き方

if(条件式A){
 //条件Aに合致した場合の処理を記述
}else if(条件文B){
 //条件Bに合致した場合の処理を記述
}else{
 //条件Aにも条件Bにも合致しない場合の処理を記述
}

このように記述しelse if(){ 〜 }の部分は３つ以上でも何個でも書く事ができる。

条件式の書き方

条件式とは、jQueryで実行したい処理を行うための条件を書く事で、if(条件式)の( )の中に書く。

条件式には、「比較演算子」や「論理演算子」などの記号を組み合わせて使って書くのだが、数学で使われるものとほとんど同じなので、記号を見ればだいたいの意味は理解できるだろう。

比較演算子とは

比較演算子とは２つの要素を比較してどちらが大きいか、小さいか、同じかなどを比較する式。

演算子	意味
a > b	aよりbの方が小さい時
a < b	aよりbの方が大きい時
a >= b	aがb以上の時
a <= b	aがb以下の時
a == b	aとbが同じ時
a === b	aとbが同じ時（型も含めて厳密に比較）
a != b	aとbが一致しない時
a !== b	aとbが一致しない時（型も含めて厳密に比較）

比較演算子の例

変数 ageに入っている値が20以上の時

if(age >= 20)

変数 speedに入ってる値が60より大きい時

if(speed > 60)

変数 weatherが「雨」では無い時

if(weather != "雨")

論理演算子

論理演算子は、複数の条件を組み合わせる時などに使い「両方を満たす場合」や「どちらか一方でも満たす場合」や、否定などの条件を足す時に使う。

演算子	例	意味
&&	a && b	aの条件満たし、かつbの条件を満たす場合
II	a \|\| b	aの条件を満たすか、もしくはbの条件を満たす場合（どちらか一方でも条件を満たす時）
!	!a	aの条件ではない場合

論理演算子を使った例

変数 ageの値が「20以上」かつ「３０未満」の場合

if( age<= 20 && age > 30 )

変数 weatherの値が「雨」もしくは「雪」の時

if( weather == "雨" || weather == "雪" )

変数 menuの値が「旨い」もしくは「安い」もしくは「早い」時

if( menu == "旨い" || menu == "安い" || menu == "早い" )

変数 scoreの値が「７０より小さい」ではない時

if( !(score < 70) )

if文を使った具体例

合格か不合格かを条件分岐で出力する例

最初の例は、３教科のテストの点数の合計点で「合格か補欠合格か不合格か」を表示する例を書いてみよう。

jQuery

$(function(){

var math = 90;
var english = 70;
var japanese = 50;
var total = math + english + japanese;

 if (total >= 210){
    alert("あなたは合格です");
 }else if( total >= 180 && total < 210 ){
    alert("あなた補欠合格です");
 }else{
    alert("あなた不合格です");
 }

});

コードの解説

まず数学・英語・国語をそれぞれ変数で定義し、各教科の点数をそれぞれ次のように代入する。

var math = 90;var english = 70;var japanese = 50;

次に、３教科の合計点を算出するための、合計点を次のように変数として定義して合計点を代入する。

var total = math + english + japanese;

次にif文の条件分岐を利用して、３つの条件を設定する。

if (total >= 210)最初は210点以上なら「あなたは合格です」と表示

else if( total >= 180 && total < 210 )210点以上でなく、180点以上210点未満であれば「あなた補欠合格です」と表示

else上記のどれでも無い場合、つまり180点未満であれば「あなたは不合格です」と表示する

フォームに入力された内容を条件分岐で出力する例

ユーザーがフォームに入力した「年商」取得して、条件分岐をつかって、その年収に応じたコメントを出し分ける例を、見ていこう！

HTML

<input type="number" id="income" name="example"><span>万円</span>

jQuery

$(function(){

  $("#income").on("blur",function(){
    //フォームのフォーカスが外れた時
    var income = $("#income").val();
    if(income){ //incomeに値がある場合
      if (income >= 1000){
       alert("あなたは法人化をオススメします");
      }else{
       alert("あなたは個人事業主のままでOKです");
      }
    }
  });

});

コードの解説

まず今回のコードの概要として、条件分岐を使って、incomeの値が1000万円以上の場合は「あなたは法人化をオススメします」と表示し、それ以外は「あなたは個人事業主のままでOKです」と表示する例だ。

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

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

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

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

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

条件分岐の省略形「三項演算子」の書き方

if文の条件分岐の記述の仕方は「三項演算子（条件演算子）」という省略した書き方がある。通常の場合と、省略形とを比較してみよう！

通常のif文

if(条件式A){
 //条件Aに合致した時の処理
}else if(条件文B){
 //条件Bに合致した時の処理
}else{
 //それ以外の時の処理
}

上記のif文を省略すると、次のような記述になる

省略形のif文

(条件式)?合致した場合の処理:(条件式B)?合致した場合の処理:それ以外の時の処理

つまりif(条件式)の代わりに(条件式)?を記述

else if(条件式)の代わりに:(条件式)?を記述

elseの代わりに:を記述

省略形の具体例

通常のif文

if(age < 18){
 console.log("選挙権なし")
}else if(age >= 18 && age < 25 ){
 console.log("選挙権あり")
}else{
 console.log("選挙権・被選挙権あり")
}

これを省略形の三項演算子で書くと

省略形のif文

(age < 18)?console.log("選挙権なし"):(age >= 18 && age < 25)?console.log("選挙権あり"):console.log("選挙権・被選挙権あり");

このように省略することができるので覚えておこう！

if文を使った条件分岐の書き方のまとめ

このように「if文の条件分岐」を覚えれば、様々な条件を使ってより複雑なプログラムを組んでいく事ができるようになる。

まずは簡単な条件分岐から書いてみて、自分が作りたいプログラムが書けるように練習してみよう！

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

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

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

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

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

スクール選びのポイント