jQueryでいいじゃないですか

@nqounetです。

ちょっとしたスクリプトを書くときでもついつい使ってしまう。

jQueryはそんな奴なのですが、ちょっとだけ使うには結構重いサイズのライブラリです。

頼りになります

使いやすさは慣れなのでアレですが、jQueryは程々にブラウザ互換があり、プラグイン（言い方を変えればjQueryに依存したライブラリ）も沢山あります。

そんな中で、最近は私の開発手法が変わってきていて、CDNを使わないようになってきているので、小さいライブラリを使いたい、という欲求が出てきています。

昔は、CDNというとgoogleが大きく前進していて全世界キャッシュも有効だったと思うのですが、最近はjQuery自体もやっているし、MicroSoftもやっています。もちろん、googleも。

CDNは全世界のトラフィックを軽減する仕組みだと思うのですが、どうして皆さんがそれぞれ負担したがるんでしょうか？

私には理解できません。

CDNは良い仕組み（だった）

随分前ですが、jQueryの読み込み速度を測ってみたのですが、手元のサーバからよりもgoogleからのほうが早く読み込みができていました。

読み込みが早い上にキャッシュも期待できる、と考えればCDNを使わない手はありません。

ところで、bowerとgruntやgulpなどのツールを使っていると、ライブラリを追加したり削除したりするHTMLファイルの修正が不要になる（コマンドでできる）のでとても便利です。

そんな中で、例えばjQueryをCDNにしていて、読み込めなかった時のfallbackを行う、という手続きを敢えてするのが億劫になってきます。

まあ、その処理を実行するコマンドを入れれば済む話なのですが、ライブラリの読み込みについて考えることが既に面倒だと思うようになっているんでしょう。

CDNについては結構頑張ったつもりですが、最近はもういいかなと思うようになってきました。

jQueryの代用品を求めて

話を戻すと、jQueryは牛刀みたいなものなので、もっと手軽なフルーツナイフくらいのものでいいかな、と思うことがよくあります。

AJAXも使わないし、jQuery依存のライブラリも使わない、というような場合でも、onclickで書くのは微妙…、というような時に使えそうな、jQueryと（ある程度は）互換性がある軽量なライブラリがいくつかあります。

その中で、最近気に入っているのはDOMtasticというライブラリです。

webpro/DOMtastic

例によってmicrojsで見つけたライブラリですが、つい最近までEvergreenという名前だったようです。

uglifyしてgzipで圧縮すると、大体3.4KBくらいです。

同じ条件でjQueryはどうかというと、大体33KB（1.11.1の場合。2.1.1は大体30KB）です。10倍ですね。

DOM操作で必須とも言える$(document).ready(...);はもちろん使えますし、onやappend、prepend、$.extendなどよく使いそうなものはほぼ使えます。

ただ、APIのリストにはdataがあるのですが、コレが思ったように動かなくて、よくハマります。

値がほしいだけならattrを使えば良いので問題はないのですが、既にjQuery向けに書いてあるスクリプトを移植するのは大変ですね。

もう一つ、jBoneというのも使ってみたのですが、コレも結構良さそうです。

kupriyanenko/jbone

$(document).ready(callback);は使えないのですが、その代わりに$(document).on('DOMContentLoaded', callback)とすれば良いです。

また.each()がなく、代わりに.forEach()を使うことになるのですが、要素の入る順番がjQueryとは違う（ただし、配列のメソッドのforEachとは同じ）ので注意は必要だと思いました。

dataもちゃんと動作して、かつ、ファイルサイズも2.9KB程でした。

他にもzeptoというライブラリもあることは知っていますが、使ったことはありません。

注意してまで使うのか？

こうやって、色々と試すのは楽しいのですが、ふと我に返ると、そこまでして通信量を減らす利点は何だろうか？と思うことがあります。

特に思っているように動かなかった時ですね。

jQueryでも、よく使うメソッドは覚えています。

でも、代用品を使っていて、使いたいメソッドが使えなかった時に、プログラミングの流れが止まってしまいます。

DOMtasticではdataでハマるし、jBoneはeachでハマりました。

軽いのは良いと思いますし、ベンチマークで速度が速いのも良いと思います。

軽めのサンプルを作るくらいなら良いですが、ある程度の規模を見越して作る場合は、普段使っているメソッドがないのは苦痛ではないでしょうか？

少し使えば慣れるとは思いますが、アレは使える、コレは使えない、という風に気にしながら開発するくらいなら、jQueryでいいじゃないですか。

ねぇ。

…とは言うものの、使ってみると意外にjBoneは私の最近のプログラミングスタイルには合ってる気がしました。

配列の操作でforEachはよく使うので、eachよりは良いのかなと思ってみたりもします。

onclickの代わりに使うサンプル

jQueryでよく使っている自分用ライブラリをjBoneでも動くように変えてみました。

debug情報が多いですが、まあ、それなりに使えます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76


(function($, window, document, undefined){
    'use strict';
    var
    console,
    modules,
    vars,

    setVars = function(){
        console = window.console;
        window.modules = modules = window.modules || {};
        window.vars = vars = window.vars || {};
    },

    defined = function(args){
        return args !== undefined;
    },

    exec = function(controller, action, $el){
        var func = modules[controller][action];
        if (defined(func)) {
            func($el);
        }
        else {
            console.error('function not defined. arguments:', arguments);
        }
    },

    execByElement = function(el, separator){
        var sep = defined(separator) ? separator : ':',
        $el = $(el),
        args = $el.data('run').split(sep);
        args.push($el);
        exec.apply(null, args);
    },

    autoExec = function(el){
        execByElement(el);
    },

    clickExec = function(e){
        execByElement(e.target);
    },

    onDocumentLoaded = function(e){
        console.debug('onDocumentLoaded e:', e);
        $('.js-click-exec').on('click', clickExec);
        $('.js-auto-exec').forEach(autoExec);
        $('.js-vars').forEach(function(el){
            $.extend(vars, $(el).data());
        });
        console.debug('vars:', vars);
    },

    onWindowLoaded = function(e){
        console.debug('onWindowLoaded e:', e);
        console.debug('window.modules:', window.modules);
        console.debug('window.vars:', window.vars);
    },

    showConsole = function($el){
        console.debug('showConsole $el:', $el);
        var args = $el.data();
        console.debug('args:', args);
    },

    init = function(){
        setVars();
        modules.main = {
            thanks: showConsole,
            fine: showConsole
        };
        $(document).on('DOMContentLoaded', onDocumentLoaded);
        $(window).on('load', onWindowLoaded);
    };
    init();
})(window.jBone, window, document);

1
2
3
4
5
6


<button class="js-click-exec" data-run="main:fine">main:fine</button>
<button class="js-click-exec" data-run="main:thanks" data-thanks="bye">main:thanks</button>
<div class="js-vars" data-hoge="hoge"></div>
<div class="js-auto-exec" data-run="main:fine"></div>
<div class="js-vars" data-huge="huge"></div>
<div class="js-vars" data-hige="hige" data-hage="hage"></div>