続・jQueryの書き方

ノンプログラマに jQuery のおまじない部分でつまずくと言われたのと、自分も少し使い分けが整理できてきたのでまとめてみる。意外とルーブとか条件判定は悩まんけど、その前後にあるごにょごにょした部分がひかかるのだとか。

誤解を恐れずにまとめると JavaScript はグローバル変数を汚染しやすく、コンフリクトしたら嫌なので回避しようぜってコトよね。
んで、その書き方がいくつかありますよと。

<head> タグ内でサクッと済ませたい時

1
2
3
jQuery(function($){
    // $('#id').click() とかココに書いてく…
});

Onload前に実行したい場合にこう書いてます。
<head> タグ内だけじゃなく別ファイルでも使えるけど、ちょっと試したい時とか、簡単な処理の時によく使うかな。

$(function(){…}); って書き方もあるけど、古くは prototype.js と競合したり、気が付けばWordPressのデフォルトで呼ばれる jQuery が noConfrict になってて使えなかったりするので、こう書くようにしてます。
また、noConfrict をあえて宣言して $ を使わず、$j = jQuery; として置き換えたり、潔く全て jQuery(…) で書いてもいいんだけど、$ で書くのが手軽だし最初にこう書くだけで、その中ではいつも通りというのが楽なんよね。

先読みするファイル内で jQuery 使いたい時

1
2
3
(function($){
    // $('#id').click() とかココに書いてく…
})(jQuery);

自前の関数とかでも jQuery 使いたい時とか。別ファイルだと読み込みのタイミングで評価されるので、実行部分よりも関数とかあらかじめ指定する時によく使うかな。
(function(){})(); って書き方は function ooo(){…} 的な指定と ooo(); って実行をまとめて書いてるだけです。これに引数として jQuery を渡して、内側では $ で記述できるようにしてます。

あ、でも、関数定義して他の js ファイルからもこれを利用したい場合は、そのままでは使えません。その場合は、下記のようにしてあえてグローバルにしたりします。

1
2
3
4
5
6
(function($){
    function ooo(){
        ...
    }
    window.ooo = ooo;
})(jQuery);

※蛇足かも…

jQuery のプラグイン

1
2
3
jQuery.fn.ooo = function(){
...
};

これプラグイン書かないと使わないので、なんでこんな書き方なんだという説明だけしとく。
jQuery も当たり前にコンフリクト対策してあって、グローバル変数は jQuery と $ しか使わないように工夫されてます。プラグインであってもこのルールに乗っかれるようになってて、jQuery.fn.ooo のように指定すれば、$(‘#id’).ooo() といった統一の書き方になるように作られてます。

たまにコンフリクト考えてなくて $.fn.ooo から書かれてるプラグインあったりするので、その場合は2番目の方法でプラグイン指定を囲んでやると良いす。一行目に (function($){ 、最後の行に })(jQuery); って書けばうまく行く事もあれば、行かない事もあるよ。

あ、ちなみに JavaScript では下記2つは大体同じ意味です。
※厳密には評価されるタイミングが違う

1
2
3
4
5
6
7
function ooo() {
...
}

var ooo = function(){
...
};

うーん、あんまりまとまってないかな?
んでも、書き方はイロイロあるけど簡潔に書かれてるものが好まれてるだけと思う。

HTML5 / Canvas で拡大・縮小・回転

前回、CSS3とJavaScriptでもやったので今度はCanvasでやってみる。

変換系は移動が translate(x, y)、回転が rotate(r)、拡大・縮小が scale(sx, sy) と用意されてます。
が、回転の中心が左上になるため、最初に対象物の中心にずらす移動が必要です。

1
2
3
4
5
ctx.translate(x, y);
ctx.rotate(r);
ctx.scale(sx, sy);
ctx.translate(-w/2, -h/2);
ctx.fillRect(0, 0, w, h);

変換は実行する逆順に処理していくことに注意。

一連の処理をまとめて行列で指定できる setTransform もあります。上記の処理を同じように行列で指定すると下記のようになります。
※前もって行列計算してあります

1
2
3
4
5
6
7
8
9
10
11
var sin = Math.sin(r);
var cos = Math.cos(r);
var m = [
    sx * cos,
    sx * sin,
    -sy * sin,
    sy * cos,
    -sx * cos * w/2 + sy * sin * h/2 + x,
    -sx * sin * w/2 - sy * cos * h/2 + y
];
ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]);

これでフレームごとに各値を変えていけばアニメーションにも使えます。
サンプル

Canvas Transform – jsdo.it – share JavaScript, HTML5 and CSS