TECH::EXPERT【jQuery】【71日目】

【学習内容】

・制御文
・動きのある表現の基本

【制御文】

○if文

複数の値を比較し、その結果によって処理を分岐する場合はif文を使用します。

条件式は( )で囲い、処理のあとには「;(セミコロン)」をつけます。

if( 条件式 ) {
条件がtrueの場合の処理 ;
}

else if, elseの場合の処理も同様です。
インテンドを工夫し、処理の内容を視覚的にわかりやすく書くとgoodだと思います。

var a = 100;
var b = 200;
var c;

if( a == 200) {
 c = a ;
}else if (b == 200) {		//この場合変数cにはbの値が代入されます。
 c = b;
}else {
 c = 300;
}

□ルール
・条件式にはtrue / falseや、比較演算子を用いた式を書く
・条件には論理演算子を組み合わせることができる
・else if は何個でも書ける
・else は1つだけ
・else はif文の最後に記述する

○switch文

switch文は、「ある1つのデータと、複数のデータを比較して処理を分岐する」際に使用します。

switch文でできることはif文で書き換えることもできますが、switchを使用すると条件を省略することができます。

switch (比較元の対象) {
 case 比較する値1;
		比較元 === 比較する値の結果がtrueのときの処理
		break;
 case 比較する値2;
		比較元 === 比較する値の結果がtrueのときの処理
		break;
 case 比較する値3;
		比較元 === 比較する値の結果がtrueのときの処理
		break;
 default;
		どの場合にも当てはまらない処理
		break;
}

var a = 100;
var b = 200;
var c;

switch (200) {
 case a;
     c = a;
break;
 case b;
     c = b;	//この処理が実行される
break;
 default;
     c = 300;
break;
}

○for文

特定の処理を複数回繰り返す際に使用する制御文です。
耳にたこができるほど聞いたやつです。

for (初期化; 条件; 更新) {
 繰り返す処理;
}

var a = [1, 2, 3, 4, 5, 6];
var b = 0;

for (var i = 0, len = a.length; i < len; i++) {
 b += a[i];
}

このように繰り返し処理を書くと、数値が格納されている配列の中の数字を全て足すことができます。
よって、変数bには21が格納されます。

・for文とif文

var a = [1, 2, 3, 4, 5, 6];
var b = 0;

for (var i = 0, len = a.length; i < len; i++) {
　var num = a[i];
 if(num % 5 === 0) {
      break;
}else if(num % 2 === 1){
      continue;
}
b += num;
}

上記のコードでは、「5の倍数のときはfor文を終了させ」、「5の倍数ではなく、かつ、奇数の場合は処理を先頭に戻す」ようにしています。

【動きのある表現の基本】

ここからは複数のボタンにアニメーションを加えて、jQueryが持つ様々な演出について学習を進めていきます。

まずは複数のボタンを設置するために、HTMLから記述していきます。

□HTML

<div class=”page-main” role=”main”>
 <div id=”buttons1”>
   <h2>BUTTONS1</h2>
   <div class=”inner clearfix”>
     <button>ボタン1</button>
     <button>ボタン2</button>
     <button>ボタン3</button>
     <button>ボタン4</button>
     <button>ボタン5</button>
     <button>ボタン6</button>
     <button>ボタン7</button>
     <button>ボタン8</button>
     <button>ボタン9<span class=”bg”><span>ボタン9</span></span></button>
     <button>ボタン10<span class=”bg”><span>ボタン10</span></span></button>
     <button>ボタン11<span class=”bg”><span>ボタン11</span></span></button>
     <button>ボタン12<span class=”bg”><span>ボタン12</span></span></button>
   </div>
 </div>
</div>

□CSS

#buttons1 button {
 display: block;
 float: left;
 width: 224px;
 height: 80px;
 margin: 0 10px 20px;
 padding: 0;
 font-size: 16px;
 letter-spacing: 0.15em;
 color: #ebc000;
 border: none;
 border-radius: 20px;
}

ここからは、JavaScriptを記述しボタンごとにそれぞれ変化を加えていきます。

□ボタン1～4に施す処理
・マウスオーバーすると、そのボタンの背景色が徐々に変化する
・マウスアウトすると、そのボタンの背景色が徐々に戻る

$(function(){
 var duration = 300;
 $(‘#buttons1 button:nth-child(-n+4)’)
   .on(‘mouseover’, function() {
     $(this).stop(true).animate({
       background-color: #ae5e9b,
       color: ‘#fff’
     }, duration);
   })
   .on(‘mouseout’, function(){
      $(this).stop(true).animate({
        background-color: #ae5e9b,
       color: ‘#fff’
      }, duration);
   });
});

<実装のステップ>
①最初に変数durationを用意して、あらかじめ秒数を指定しておく（あとで使う）

このように、複数回使うであろう値に対して変数を用意し、先に定義しておくことで可読性が上がるかつ効率的にコードが書けます。

②button:nth-child(-n+4)’)で1個目～4個目のボタンを選択する

nth-schildは引数を渡すことで、複数の子要素を選択することができます。

③選択されたボタンに対して、on()メソッドで処理をする

第一引数には、発火条件を設定します。（今回はmouseoverとmouseout）
第二引数には、無名関数を指定します。

④無名関数の中身を記載する

.animate()メソッドを使用して、背景色と文字色を徐々に変化させます。
第一引数には、変化させたいCSSを指定します。
第二引数には、どのくらいの時間をかけるか記載します。

ここで第二引数には、あらかじめ用意しておいた変数durationを置けばOKです。

□ボタン5～8に施す処理
・マウスオーバーすると、そのボタンの外枠から徐々に色面が表示される
・マウスアウトすると、徐々に色素が増える

$(function(){
 var duration = 300;
 $(‘#buttons1 button:nth-child(-n+5) :nth-child(-n+8)’)
   .on(‘mouseover’, function() {
     $(this).stop(true).animate({
       borderWidth: ‘12px’,
       color: ‘#ae5e9b’
     }, duration, easeOutSine);
   })
   .on(‘mouseout’, function(){
      $(this).stop(true).animate({
       borderWidth: ‘0px’,
       color: ‘#ebc000’
     }, duration, easeOutSine);
   });
});

<実装のステップ>
①対象のボタンを選択する
$(‘#buttons1 button:nth-child(-n+5) :nth-child(-n+8)’)
これにより5番目～8番目のボタンをセレクタに指定することができます。

②.animete()メソッドを利用して、borderwidthとcolorの値を変化させる
CSSであらかじめ用意しておいたプロパティ：値をjQueryを使用して変化させることで徐々に変化しているように見せることができます。

□CSS

#buttons1 button {
 border: solid 0px rgba(174,94,155,1.0)
}

□ボタン9～12に施す処理
・マウスオーバーすると、色素が左側からスライドインして背景色と文字色が異なるボタンに変化する
・マウスアウトすると、元に戻る

これまでと大きく異なるのは、ボタンの中に<span>が2つ入っている点です。

また、CSSでは重ねたボタンに異なる色を設定し、overflow:hidden;を指定します。

これにより、要素のボックスからはみ出てしまった部分は隠れて見えなくなります。

JavaScriptでは、overflow: hidden;が指定された要素の幅をアニメーションさせることでそれっぽく見せることができます。

□CSS

#buttons1 button {
 position:relative;
}
#buttons1 button .bg {
 position:absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 100%;
 overflow:hidden;
}

JavaScript

$(function() {
 var duration = 300;
 $(‘buttons1 button:nth-child(n+9)’)
   .on(‘mouseover’, function() {
     $(this).find(‘> span’).stop(true).animate({
       width; ‘100%’
     }, duration, ‘easeOutQuad’);
   })
   .on(‘mouseout’, function() {
     $(this).find(‘> span’).stop(true).animate({
       width; ‘0%’
     }, duration, ‘easeOutQuad’);
   });
});

<実装のステップ>

①9番目～12番目をセレクタに指定

9番目以降の子要素を全て選択します。

②さらに要素を絞り込む

find()メソッドを使用して、jQueryオブジェクトに含まれる各要素の子孫要素の中から、セレクタを使用してさらに要素を絞り込むメソッドです。
ここではspan要素を指定することで、重ねた方のボタンに限定しています。

③アニメーションを付与する

あとはこれまでの処理と一緒です。
あえて見えなくしていたwidth(0%)をmouseoverするとwidthが100%になるので、徐々に色が変化するエフェクトを付与することができます。

【所感】

だんだんjQuery楽しくなってきたぞい！