【学習内容】

・アニメーション
・thisの使い方
・関数の使い方

※一応jsファイルだけでも何をやっているかはわかりますが、HTMLのコードを読みたい方は69日目のnoteをご覧ください。

【アニメーション】

■animate()メソッドの基本

ここではanimate()メソッドを利用してCSSが徐々に変化するような動きを加えていきます。

$(function)({
 $(‘#typo’).on(‘click’, function(){
   $(‘#typo .inner’).animate({
       opacity: 0,
       fontsize: ‘0px’
    },
    1500
   );
});

上記のコードでは、(‘#typo .inner’)の要素内のCSSに対してanimate()メソッドが適用されています。

animate()メソッドは、「処理対象をアニメーション化するメソッド」です。

基本的な使い方は下記の通りです。

.animate({
	‘CSSプロパティ’: ‘値’,
	‘CSSプロパティ’: ‘値’,
	‘CSSプロパティ’: ‘値’
   },
   アニメーション時間
);

このようにanimateメソッドは大きく分けて2つの引数を渡します。

1つ目の引数には、「アニメーション完了時の見た目を表現するCSSプロパティと値」
2つ目の引数には、「どのくらい時間をかけて変化するか」

この2つの引数を渡すことで、CSSが徐々に変化し、結果的にアニメーションを付け加えるような見た目を演出することができます。

$(function(){
   $(‘#typo .inner’).on(‘click’, function(){
	$(‘#typo .inner’).animate({
	    Color: ‘#ebc000’
       },
       1500
     );
});
});

■animate()メソッドのその他の引数

animate()メソッドの引数には、2つの引数以外に、「イージングの種類」と「アニメーション終了時に実行する処理」を渡すことができます。

また、これらは基本的に省略可能な引数です。

「イージング」とは、「アニメーションの変化の度合い」を示し、「linear(等速)」、「swing(軽い緩急)」の２種類が存在します。（省略した場合はswingが適用されます）

（※ちなみに、jQuery UIを使用するともっとたくさんのイージングを使用できるようになります。）

$(function(){
   $(‘#typo .inner’)
.css(‘top’, ‘-100px’)
       .on(‘click’, function(){
	    $(‘#typo .inner’).animate({
	    top: ‘100px’
       },
       1500,
       ‘linear’
     );
});
});

上記のコードは、大きく3ステップでCSSを変化させています。

①jQueryの力で、文字列をtopの位置から100px分位置を変更する
②要素をクリックした時点でanimateメソッド()を発火させる
③animate()メソッドで、文字列を下がった位置から100px分位置を変更する

■アニメーション終了時に実行する処理

上記のコードでは、アニメーションが完了したあとに、移動させた要素を画面中央に配置したいときは下記のように記述をします。

$(function(){
   $(‘#typo .inner’)
.css(‘top’, ‘-100px’)
       .on(‘click’, function(){
	    $(‘#typo .inner’).animate({
	    top: ‘100px’
       },
       1500,
       function(){
$(‘#typo .inner’).animate({top: ‘0px’}, 500);
}
     );
});
});

第3引数の’linear’を削除し、新たに関数を定義しました。

これにより要素はtopから-100px⇒100px⇒0pxの位置に移動するアニメーションになります。

■animateメソッドの順番待ち問題

MicrosoftのPowerPointでアニメーションを付けた経験がある方はイメージしやすいと思いますが、アニメーションAが実行されている最中にアニメーションBが実行されるように設定していても、途中段階のアニメーションAはキャンセルされず、「順番待ち」の状態になります。

この問題（アニメーションを途中でキャンセル）を解決するには、stop()メソッドを利用します。

stop()メソッドは、「要素のアニメーションを停止するメソッド」です。
引数には、「true」または「false」を指定します。

引数を「true」に設定した場合は、stop()メソッドが適用状態になるので、途中でアニメーションを中断できる許可をする形になります。

$(function(){
   $(‘#typo’)
     .on(‘mouseover’, function(){
         $(‘#typo’).stop(true).animate({
	  background-color: ‘#ae5e9b’
            },
            500
          );
})
.on(‘mouseout’, function(){
   $(‘#typo’).stop(true).animate({
       Background-color: ‘#3498db’
      },
      500
    );
});
});

stop()メソッドは、animate()メソッドよりも前に記述します。

【thisの使い方】

Javascriptでは、データを格納する入れ物として、主に「オブジェクト」、「変数」、「配列」の3種類が存在します。（基本的な内容なので省略します）

この3種類の入れ物に加えて、「this」という少し特殊な入れ物を使用することができます。

thisは、「データ取得専用の変数」のようなもので、英文でいうと「it」のような指示語のイメージです。

thisに格納されるデータは、javascriptの実行内容によって使い方が変化します。（英文でいうと主語が変わるとitが持つ意味合いが若干変わるのと一緒です）

メソッドの第2引数に命令を渡すメソッドでは、その命令内でthisを使用できます。

下記の場合は、thisは「on()メソッドに指定してあるイベントが発生した要素」です。

今回は、‘#typo’が格納されます。

(thisを使わないパターン)

$(function(){
   $(‘#typo’).on(‘mouseover’, function(){
       $(‘#typo’).css(‘color’, ‘#ebc000’);
)};
});

(thisを使うパターン)

$(function(){
   $(‘#typo’).on(‘mouseover’, function(){
       $(this).css(‘color’, ‘#ebc000’);
)};
});

■thisを使用する理由
①処理のパフォーマンスが向上する

理由はメソッドチェーンとだいたい同じです。省略します。

②内側のコードを使いやすくなる

thisを使用すると、処理対象を自動的に切り替えることができるため、メソッド内のコードの使い回しが容易になります。

$(function(){
   function ChangeColor(){
       $(this).css(‘color’, ‘#ebc000’);
   };
   $(‘#typo’).on(‘mouseover’, ChangeColor);
   $(‘#header’).on(‘mouseover’, ChangeColor);
});

このように一度thisを使用した定義を書いてしまえば、対象がいくつ増えようと、その定義を含んだ関数を呼び出せば、簡単に適用させることができます。

③$( )関数に複数のセレクタを指定した場合に処理の切り分けが可能になる

$(function(){
   $(header, ‘#typo, footer’).on(‘mouseover’, function(){
       $(‘header, ‘#typo, footer’).css(
‘background-color’, ‘#ebc000’
);
)};
});

このように複数のセレクタが指定されている関数内では、3つのセレクタのうちいずれかの要素にmouseoverすると、指定されている全ての要素の色が変化します。（意図していない部分も変化してしまう）

これをthisをつかって書き換えることで、header要素にmouseoverしたら
hedaer’だけ’が変化するようになります。

$(function(){
   $(header, ‘#typo, footer’).on(‘mouseover’, function(){
       $(this).css(
‘background-color’, ‘#ebc000’
);
)};
});

このように、thisを利用するとイベントが起きた対象にのみ処理を実行することができます。

【関数の使い方】

なにを今さら・・という感じではありますが、関数とは「何らかの一連の処理を行う複数の命令の集まり」です。

関数の基本形は下記の通りです。

function 関数名(引数1, 引数2, ・・・) {
 実行する処理(引数を使える)
　return 値;
}

■無名関数

下記の構文を利用すると、関数名を省略した関数を作成することができます。
これを無名関数と呼び、しばしばjQueryのメソッドに登場します。

無名関数内の処理は、あくまで引数として一連の処理を直接渡す際に利用するものであり、プログラム内のいたるところで使い回すためのものではありません。

function (引数1, 引数2, ・・・) {
 実行する処理(引数を使える)
　return 値;
}

ちなみに、無名関数は変数の中に格納することもできます。

var 変数名 = function (引数1, 引数2, ・・・) {
 実行する処理(引数を使える)
　return 値;
}

これにより通常の関数のように別の場所からも呼び出すことができるようになりますが、通常の関数とは関数を実行できるタイミングに違いがあります。

a();　　　　　　//呼び出せる
function a() {
処理
}

b();　　　　　　//呼び出せない
var b = function() {
処理
}

これはスコープの違いによるもので、変数に格納された無名関数は、上記のように関数の作成箇所よりも下でないと呼び出すことができません。

【所感】

なんとなく使っていたthisや無名関数などの理解が深まりました。

本格的に学習を初めてからまだ２ヶ月ちょっとですが、ある程度のコードであれば読めるようになってきました。

しかし、コードを読むだけではわかりにくいデータ間のやり取りや

変数を跨いだデータの受け渡しにおいて、それぞれのオブジェクトがどんな形を取っていて、どういったプロセスで渡されているのか正確に理解することが重要だと思います。

なんとなく読めるからといって、基礎をおざなりにしていると技術面接で「あの時ちゃんとやっておけばよかった」となってしまうかもしれません。

とにかく学習あるのみです。