animationとcallbackのあれこれ
※「パリピ 写真 フリー」で検索したけど良い画像がなかった・・・
8月に入り学生さんは夏休みですかね。 海にプールに花火大会・・・。
カリスマギタリストもキラキラした学生時代を送りたかったです。
現実は辛く悲しいものです。 敗北を知りたい(言ってみたかった)
でも良いんです。 僕達エンジニアはコードを書く事でキラキラ出来る。
エディタという夜空に一花咲かせてやりましょう。
↓↓↓そんな時に是非使って頂きたいエディタをご紹介↓↓↓
少々話が逸れましたが、今回はanimationに関するあれこれ。
まずはこれをフェードして次は消えて～その次はこれをこう移動させて～...etc
頭を空にしてそのまま実装するとお察しのコールバック地獄ですね。
恐ろしいです。 書く側も見る側も悲しい気持ちになります。
その悲しみの連鎖は【Deferred】で断ち切りましょう！
その昔、メゾンマークの某常勝無敗エンジニアは言いました。
良いコードの条件とは・・・
- 可読性が高いこと
だれもが読めるものでないと保守性が低くなってしまいます。 - 拡張性が高いこと
仕様変更に耐えうるものが好ましいです。
上記を踏まえてまずは、悲しみのコードから見ていきましょう。
$('#hoge')
.animate({
opacity: 1,
}, 1000, 'linear', function () {
～次の処理～
}, 1000, 'linear', function () {
～次の処理～
}, 1000, 'linear', function () {
～次の処理～
}, 1000, 'linear', function () {
～次の処理～
});
ネストが深くなり一見何がどの処理をしているのかわかり辛く修正し難い・・・
これでは良いコードの条件に当てはまりませんね。
次は1つ1つ関数として独立させ、最後にそれらを指定した順に呼び出す書き方。
喜びのコードです。
function firstAnimate() {
var dfd = $.Deferred();
$('#hoge').animate({
opacity: 1,
}, 1000, () => {
dfd.resolve();
})
return dfd.promise();
};
function secondAnimate() {
var dfd = $.Deferred();
$('#対象').animate({
～次の処理～
}, 1000, () => {
dfd.resolve();
})
return dfd.promise();
};
function thirdAnimate() {
var dfd = $.Deferred();
$('#対象').animate({
～次の処理～
}, 1000, () => {
dfd.resolve();
})
return dfd.promise();
};
function fourthAnimate() {
var dfd = $.Deferred();
$('#対象').animate({
～次の処理～
}, 1000, () => {
dfd.resolve();
})
return dfd.promise();
};
function fifthAnimate() {
var dfd = $.Deferred();
$('#対象').animate({
～次の処理～
}, 1000, () => {
dfd.resolve();
})
return dfd.promise();
};
firstAnimate()
.then(secondAnimate)
.then(thirdAnimate)
.then(fourthAnimate)
.then(fifthAnimate)
コード量は多少増えますがどうでしょう。
一連の処理を関数化し再利用までし易い為、可読性や拡張性も高くなったのではないでしょうか？
ざっくり何をしているかと言うと・・・
- $.Deferred();でDeferredオブジェクトを作成
- Deferredオブジェクトと処理を関連付ける
- Promiseオブジェクトをreturnする
- then()により処理を繋げる
これだけ聞いても何のこっちゃわからんばいって感じですね。
【Deferred】に関しては使用するメリットが他にもあるので、気になった方は是非詳しく調べてみて下さい。
このリファレンスとかわかりやすいです
今回のDeferredもそうですが、わからないことを調べる⇒調べている最中にまたわからないことが増える⇒わからないことを調べる(無限ループ)
わからないことが壁になる事は多々ありますが、それって純粋に楽しい事ですよね。
とはいえ要求にすぐ答えられる様、日々精進であります。
次回はライブハウスと23時以降の渋谷で使えるカリスマギタリストのコミュニケーション講座でもお届けしましょうかね
それではまた会う日まで！ アデュー！
