東京都府中市、九段下のWEB制作会社Maromaroのブログです

2017.02.20

miura

miura

脱jQuery初心者！コピペに頼らないプログラミング入門講座～その3 if文を使った条件分岐～

Web制作

こんにちは。三浦です。
２月１４日はふんどしの日だと言い張って聞かない人々が世間にはいるようです。
それはそれで面白いと思います。

さて、今回も引き続きjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。

対象としている人は、
「jQueryのプラグインは利用しているけど自分では書けない」
「HTML、CSSでコーディングはできるけどjQueryも使えるようになりたい」
そんな方です。

↓前回までの講座はこちらから

Maromaro Blog
脱jQuery初心者！コピペに頼らないプログラミング入門講座～その1～
こんにちは。三浦です。気が付けばもう１２月ですね。２０１６年も残り一か月です。皆さん年内にやり残したことはありませんか？「２０１６年はjQueryのコードを自前で書く勉強をはじめようと思っていたのに先延ばしにして結局手つかず」なんて方もいるんじゃないでしょうか。いますよね？きっといるはずです！それなら今から始めましょう！ということでこれから数回に渡ってjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。対象としている人は、「jQueryのプラグインは利用...

Maromaro Blog
脱jQuery初心者！コピペに頼らないプログラミング入門講座～その2 クラスの追加と削除～
こんにちは。三浦です。2017年になりました。酉年です。前回の酉年に起こった出来事というと和泉元彌がプロレスデビューした年だそうです。空中元彌チョップ…忘れられないですね。さて、前回に引き続きjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。対象としている人は、「jQueryのプラグインは利用しているけど自分では書けない」「HTML、CSSでコーディングはできるけどjQueryも使えるようになりたい」そんな方です。↓前回の講座はこちらから前回はjQueryで記述を行ってい...

前回までの講座では
簡単なクリックイベントと
classを追加、削除する方法をご紹介しました。
今回はif文を使った条件分岐についてご紹介していきます。

if文ってなに？

if文とは「もし～の場合」のように特定の条件を満たした場合にのみ適用される処理を書くことが出来るものです。

if(条件をここに書く){
  条件を満たした場合に適用したい処理をここに書く
}

こんな感じです。
それでは前回の講座で作成したクリックでクラスを追加するボタンに手を加えて試してみましょう。

サンプル1

  • RESULT
  • HTML
  • CSS
  • JS

  • 吾輩は…

    猫にする

  • コピー
    
<div id="sample01" class="txt_center">
<p class="neko_txt">吾輩は…</p>
<div class="wagahai nekodenai"></div>
<p class="btn">猫にする</p>
</div>
  • コピー
    
#sample01 .wagahai {
background: url(/wp-content/uploads/170116_img01.png) no-repeat;
width:250px;
height:325px;
margin: 0 auto 20px;
}
#sample01 .wagahai.nekodenai {
background:url(/wp-content/uploads/170116_img02.png) no-repeat;
}
#sample01 .btn{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  width: 160px;
  cursor: pointer;
  margin: 0 auto;
}
#sample01 .btn:hover{
  background:#6666A3;
}
  • コピー
    
$(function(){
  $("#sample01 .btn").on("click",function(){
    if($('#sample01 .wagahai').hasClass('nekodenai')){
      $('#sample01 .wagahai').removeClass('nekodenai');
      $("#sample01 .btn").text("猫になりました！！");
    }
  });
});

jqueryの記述は下記になります。

$(function(){
  $("#sample01 .btn").on("click",function(){
    if($('#sample01 .wagahai').hasClass('nekodenai')){
      $('#sample01 .wagahai').removeClass('nekodenai');
      $("#sample01 .btn").text("猫になりました！！");
    }
  });
});

新しく出てきたメソッドについて

hasClass

.hasClass('nekodenai')

指定された要素が特定のクラスを持っているかを判断するメソッドになります。

text

.text("猫になりました！！");

指定された要素のテキスト情報を取得・設定するメソッドです。
引数（括弧）の中にテキストを入れるとそのテキストと要素のテキストを差し替えることもできます。
今回の場合はボタンに入っている「猫にする」というテキストを「猫になりました！」に差し替えています。

サンプルについての解説

$(function(){
  $("#sample01 .btn").on("click",function(){
    if($('#sample01 .wagahai').hasClass('nekodenai')){
      $('#sample01 .wagahai').removeClass('nekodenai');
      $("#sample01 .btn").text("猫になりました！！");
    }
  });
});

$(“#sample01 .btn”)がクリックされた時に
もし
$(‘#sample01 .wagahai’)がクラスnekodenaiを持っている場合に
$(‘#sample01 .wagahai’)からクラスnekodenaiを削除する
$(“#sample01 .btn”)のテキストを「猫になりました！！」に変更する

という処理になります。
今回は指定した要素が特定のクラスを持っていた場合に何か処理を行うという条件分岐です。
なので.wagahaiにクラスnekodenaiが付いていない場合は何も起こりません。

複数のif文を組み合わせた条件分岐

if文を使用することで様々な条件を判断して処理の出し分けができるようになります。
もちろん複数のif文を組み合わせることも可能です。
サンプル1に手を加えてみましょう。

サンプル2

  • RESULT
  • HTML
  • CSS
  • JS

  • 吾輩は…

    猫にする

  • コピー
    
<div id="sample02" class="txt_center">
<p class="neko_txt">吾輩は…</p>
<div class="wagahai nekodenai"></div>
<p class="btn">猫にする</p>
</div>
  • コピー
    
#sample02 .wagahai {
width:250px;
height:325px;
margin: 0 auto 20px;
}
#sample02 .wagahai.nekodearu {
background: url(/wp-content/uploads/170116_img01.png) no-repeat;
}
#sample02 .wagahai.nekodenai {
background:url(/wp-content/uploads/170116_img02.png) no-repeat;
}
#sample02 .btn{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  width: 160px;
  cursor: pointer;
  margin: 0 auto;
}
#sample02 .btn:hover{
  background:#6666A3;
}
  • コピー
    
$(function(){
  $("#sample02 .btn").on("click",function(){
    if($('#sample02 .wagahai').hasClass('nekodenai')){
       $('#sample02 .wagahai').removeClass('nekodenai');
       $('#sample02 .wagahai').addClass('nekodearu');
       $("#sample02 .btn").text("猫になりました！！");
    }
    else if ($('#sample02 .wagahai').hasClass('nekodearu')){
      $('#sample02 .wagahai').removeClass('nekodearu');
      $('#sample02 .wagahai').addClass('nekodenai');
      $("#sample02 .btn").text("猫でなくなりました！！");
    }
  });
});

jqueryの記述は下記になります。

$(function(){
  $("#sample02 .btn").on("click",function(){
    if($('#sample02 .wagahai').hasClass('nekodenai')){
       $('#sample02 .wagahai').removeClass('nekodenai');
       $('#sample02 .wagahai').addClass('nekodearu');
       $("#sample02 .btn").text("猫になりました！！");
    }
    else if ($('#sample02 .wagahai').hasClass('nekodearu')){
      $('#sample02 .wagahai').removeClass('nekodearu');
      $('#sample02 .wagahai').addClass('nekodenai');
      $("#sample02 .btn").text("猫でなくなりました！！");
    }
  });
});

新しく出てきた記述について

else if

先ほど紹介したifは「もし～の場合」でしたが
else ifは「そうじゃないとき、もし～の場合」というものでifと組み合わせて使用します。

if($('#sample02 .wagahai').hasClass('nekodenai')){
　//ここに処理を記述
}
else if ($('#sample02 .wagahai').hasClass('nekodearu')){
　//ここに処理を記述
}

今回の場合は
$(‘#sample01 .wagahai’)がクラスnekodenaiを持っていなくて
$(‘#sample01 .wagahai’)がクラスnekodearuを持っている場合
という振り分けになります。

else

else ifのほかにelseという記述もあります。
elseは「そうじゃない場合」という時に使用します。

if($('#sample02 .wagahai').hasClass('nekodenai')){
　//ここに処理を記述
}
else{
　//ここに処理を記述
}

この場合は
$(‘#sample01 .wagahai’)がクラスnekodenaiを持っている場合以外は
すべてelseの中の処理を行う。ということになります。
その他！というイメージです。

サンプルについての解説

$(function(){
  $("#sample02 .btn").on("click",function(){
    if($('#sample02 .wagahai').hasClass('nekodenai')){
       $('#sample02 .wagahai').removeClass('nekodenai');
       $('#sample02 .wagahai').addClass('nekodearu');
       $("#sample02 .btn").text("猫になりました！！");
    }
    else if ($('#sample02 .wagahai').hasClass('nekodearu')){
      $('#sample02 .wagahai').removeClass('nekodearu');
      $('#sample02 .wagahai').addClass('nekodenai');
      $("#sample02 .btn").text("猫でなくなりました！！");
    }
  });
});

$(“#sample02 .btn”)がクリックされた時に
もし
$(‘#sample02 .wagahai’)がクラスnekodenaiを持っている場合に
$(‘#sample02 .wagahai’)からクラスnekodenaiを削除する
$(‘#sample02 .wagahai’)からクラスnekodearuを追加する
$(“#sample02 .btn”)のテキストを「猫になりました！！」に変更する
もしそうでなくて
$(‘#sample02 .wagahai’)がクラスnekodearuを持っている場合に
$(‘#sample02 .wagahai’)からクラスnekodearuを削除する
$(‘#sample02 .wagahai’)からクラスnekodenaiを追加する
$(“#sample02 .btn”)のテキストを「猫でなくなりました！！」に変更する

2パターンの処理を.wagahaiが持っているクラスによって振り分けています。

様々な条件分岐

if文で判別できるものはid,classだけではありません。
数値、変数、演算子、正規表現などを利用することで様々な条件分岐を実現することが出来ます。
ここではいくつか実例を紹介します。

奇数か偶数かの判別

var test = 2;
if( test % 2 == 0) {
  alert('偶数です！');
}
else {
  alert("奇数です!");
}

変数

var test = 2;
これは変数といってtestという名前の入れ物の中に2が入っている状態です。
入れ物の名前を呼び出すことで何度でも利用することができます。
今回は「％」の前で呼び出していますね。
頻出する記述を変数に入れておくことで修正を容易にできたりするのでよく使います。

演算子

「%」という文字が出てきましたね。はじめて見た方は混乱するかと思いますが、これは「演算子」といって特別な意味を持つ文字で「%」は余剰を求める除算（割り算）を意味しています。
演算子は他にも
+…加算（足し算）
-…減算（引き算）
*…乗算（掛け算）
/…除算（割り算）
などがあります。
また=にも特別な意味があって
=…データの代入
==…等しい
===厳密に等しい
という意味になります。

今回の場合は
変数testの値が2で割り切れる数値だった場合
「偶数です！」というメッセージを表示する処理となります。

CSSプロパティでの判断

if($(".wagahai").css("display") == "none"){
  alert('吾輩は消えています！');
}

クラスwagahaiを持つ要素のCSSがdisplay:none;だった場合に
「吾輩は消えています！」というメッセージを表示する処理となります。

現在いるページのURLでの判断

if(url == "http://google.com/"){
　　alert('ぐーぐるのページです！');
}

現在いるページのURLがhttp://google.com/だった場合に
「ぐーぐるのページです！」というメッセージを表示する処理となります。

今回のまとめ

このようにif文を使うことで様々な条件分岐が実現できます。
classやidの操作とif文を組み合わせるだけでも色々できますよ！
振り分けの条件に関しては検索すればいくらでも情報が出てくるので思い浮かんだものを検索してみるといいでしょう。
条件分岐に少し慣れてくると実現できることが増えてきてプログラミングしているなぁという実感が湧いてきますよ！

次回は４回目となりますが、一区切りとして応用的なまとめをやろうと思っています。では！

Web制作

あなたにオススメの記事

  1. 2017.01.16

    脱jQuery初心者！コピペに頼らないプログラミング入門講座～その2 クラスの追加と...

  2. 2017.03.27

    脱jQuery初心者！コピペに頼らないプログラミング入門講座～その4 アコーディオン...

  3. 2016.12.05

    脱jQuery初心者！コピペに頼らないプログラミング入門講座～その1～

  4. 2017.07.10

    CSSで簡単アニメーション！CSS Transitionの基本をおさらいしよう

  5. 2017.08.17

    CSSで要素を変形！CSS Transformの基本をおさらいしよう～rotate、skew編～

  6. 2017.08.16

    CSSで要素を変形！CSS Transformの基本をおさらいしよう～translate、scale編～

  7. 2017.09.22

    Edgeでマウスオーバーしたボタンのアイコンがちらつく現象の解決方法

  8. 2018.12.10

    【JS・jQuery】配列の中身を一定間隔でランダムに表示する

TOP » Web制作 » 脱jQuery初心者！コピペに頼らないプログラミング入門講座～その3 if文を使った条件分岐～