jQueryのifを使った条件分岐の方法【初心者向け】

jQueryのifを使った条件分岐の方法【初心者向け】

今回はjQueryのifを使った条件分岐の書き方を紹介します。

ifは英語でもよく出てきますが「もし〜ならば」という意味ですね。jQueryでも同じ意味合いで、特定の条件を指定して、それに合う時、合わない時の処理を振り分けることができます。

初心者の方向けなので、細かくは書かず基本的にはこう使えば良いのか〜ということが伝わる程度に書きたいと思います。

スポンサーリンク

ifを使って条件をつくる

if()を使うことで、色々な条件を自分で指定して、それに合う時はどう処理をするかという指示を出すことができます。まずは基本的な書き方から見ていきます。

基本的なif文の書き方

まず基本的な書き方はこんな感じです。

$(function(){
 if(ここに条件が入る){
 //条件に合う時の処理
 }
});

if()を使って条件を書いて、{}の中にその条件に合った時の処理を入れるという流れですね。

基本的なif文のサンプル

$(function(){

var fruits = 'りんご';

 if( fruits == 'りんご'){
 console.log('apple');
 }
 });

代入でfruitsという変数に「りんご」と入れました。変数というのは自分で名前を決めて、そこに色々な値を入れることができる箱のようなものです。

if文を作るには、条件の対象となるものが必要になるので今回は変数を使いました。

今回のサンプルではif文に「fruitsに入っているものがりんごだったら」という条件文を入れて、条件に合う時は「appleと出力する」という処理を入れました。

サンプルの結果

この場合、条件に合うので結果は「apple」と出力されますね。

elseを使って、条件に合わない時の処理も入れる

基本の形のif文だと「もし〜だったら」の時の条件しかできないですよね。

今度は条件に合わない時の処理もできるようにしましょう。その時はelse(エルス)を使います。

if + elseの書き方

 
$(function(){
 if(ここに条件が入る){ 
//条件に合う時の処理
}  else{
//条件に合わない時の処理
}
});

ちょっと長くなりましたが、書き方としては簡単でifを使った基本文のあとにelse{}と付け加えることで、条件に合わない時の処理を続けて書くことができます。

ひとつの条件をYES/NOで振り分ける時はif + elseの書き方を使います。

if + elseのサンプル

同じくサンプルを作ってみたいと思います。

$(function(){

var fruits = 'みかん';

 if( fruits == 'りんご'){
 console.log('apple');
 } else{
 console.log('orange');
}
 });

今度は変数のfruitsに「みかん」と入れました。

if()の条件には「fruitsがりんごだったら」という条件が入っています。りんごの場合はappleと出力して、そうじゃない場合はorangeと出力するよう書きました。

この場合、fruitsに入っている値は「みかん」なので、条件(りんごだったら)には当てはまらないですね。

サンプルの結果

そのため条件に合わない時の記述のelse{}に書かれた処理が適用されるので、「orange」と出力されます。

else ifを使って、条件に合わない時の条件を入れる

if + elseの組み合わせだと「ひとつの条件に対して合うか合わないか」という振り分けしかできないですよね。

じゃあ例えば「最初の条件に合わない時に、2つ目の条件を入れる」時はどうすればいいんでしょうか。そういう時のためにelse ifというものを使います。

else ifの書き方

 
$(function(){
 if(ここに条件が入る){ 
//条件に合う時の処理
} else if(ここに条件が入る){
//条件に合う時の処理
} else{
//どの条件にも合わない時の処理
}
});

どんどん長くなってしまいますが、基本的にはつなげて書いていくだけです。

最初のif()のあとにelse if()と書くことで「条件に合わなかった時の振り分け条件」を書くことができます。最後のelseでは「どの条件にも合わなかった時」ということになりますね。

こんな風にifとelseとelse ifを合わせると、色々な条件で振り分けることができます。

if + else ifのサンプル

$(function(){

var fruits = 'ぶどう';

 if( fruits == 'りんご'){
 console.log('apple');
 } else if( fruits == 'みかん') {
 console.log('orange');
} else{
 console.log('other');
 });

今回はfruitsに「ぶどう」と入れました。

最初のif()の条件は「fruitsがりんごだったら」となっています。この場合条件に当てはまらないので、そのまま次のelse ifに条件分岐が移ります。

次にelse if()の条件は「fruitsがみかんだったら」となっています。この場合も条件に当てはまらないので、そのまま次に進みます。

サンプルの結果

最終的に今回は2つの条件に当てはまらないので、最後のelseで指定された「other」と出力されます。

else ifは1回しか書けないわけではないので、さらに続けてelse if…と条件を作っていくこともできますよ。

まとめ

というわけで、if文を使った条件分岐の書き方を紹介してみました。

ifとelseとelse ifの3つを覚えるだけで、こんなに条件を色々と指定できるので実際にif文を使ったコードはよく出てきます。

条件文の書き方はまだまだたくさんありますが、if文の基本の書き方を覚えておくだけでも初心者の方にとってはレベルアップできるので、きっと役に立つと思います。

jQueryを何も知らない時に見ると意味不明に見えるコードですが、実際に噛み砕いて見ていくと、似たようなことの繰り返しだったりするので、苦手意識をもたずに一個ずつ覚えていけばきっとできるようになりますよ〜!

if文を覚えるきっかけになれば嬉しいです。

スポンサーリンク

SNS・feed登録はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です