WEB EGG

CoffeeScriptでjQueryプラグインを書いてみて思ったこと

February 17, 2013 · 5 min read

こんにちは。
昼夜逆転が一周してやっと普通の生活に戻って来ました。れこです

最近、CoffeeScriptというJavaScriptのライブラリにハマっています。
半年前くらいに流行った、賛否両論なjsライブラリです。
非常にシンプルにjsを書くことができて、Ruby on Railsでも公式採用されています。
そのCoffeeScriptでjQueryのプラグインを１つ書いてみて、CoffeeScriptで開発していくことについて感じたことをメモします。

CoffeeScriptやjQueryプラグインの基礎については特に触れません。ご了承下さい。

CoffeeScriptとは

CoffeeScriptはJavaScriptを楽にシンプルに書けるライブラリです。おおまかな特徴は、

文法はRubyやPythonに近い
関数呼び出しの際に引数の括弧を省略できる
インデントでループや関数などのブロックを表現する
行末のセミコロンやオブジェクトのリテラルなども省略可能
従来のjsでは扱えない拡張された文法がもろもろ

など、素のjsでは考えられないほどタイプ数が減ります。
そのため、コーディング速度や保守性が高まり、複数人で書いても品質の高く統一されたコードを書くことができます。

作ったもの

あまり簡素なものでは練習にならないので、今回は、[jQuery.masonry]のような要素をタイル状に並べるプラグインを作りました。
ページの横幅からはみ出さないように横に並べる個数を調整できます。
完成品を見てもらったほうが早いのでデモを。

[ページ内の要素をタイル上に並べるjQueryプラグイン jQuery.Tile.js]

プラグインに少し上乗せして、私のTwitterのつぶやきを表示しています。
プラグインとは無関係に、一番下までスクロールすると、次のツイートを読み込む無限スクロールも入れてあります。
余計なもの盛り込みました。はい。

Coffee版jQueryプラグインのテンプレート

普通のjsでjQueryプラグインを作ると、だいたいこのような感じになると思います。

(function($) {
    $.fn.pluginName = function(config) {
        var defaults = {
            option: "オプション"
        };
        option = $.extend(defaults, config);
        return this.each(function() {
            // ここにプラグインの処理を書く
        });
    };
})(jQuery);

すごく、カッコカッコしています。

コードを書き換えた時に、カッコの対応がズレる
オブジェクトや配列を書くときに、最後の要素にもカンマを入れちゃう

など、しょうもないミスを頻発している私は、基本的な文法にもイライラします。
ただ初心者なだけですね。はい。
で、これをCoffeeScriptで書くと、こうなります。

do ($=jQuery) -> 
  $.fn.pluginName = (config) -> 
    defaults option: "オプション"
    option = $.extend(defaults, config)
    @.each -> 
      # ここに処理を記述

非常にシンプルです。
ループや関数の終わりはインデントで表現されるため、閉じカッコが不要です。
そのため、非常にシンプルに書くことができます。
こっちのほうが書きやすい！見やすい！とおもいます。

感想、反省

ざっとプラグインを作ってみて思ったことをまとめると、以下の通りです。

Coffeeに使われている

今回のプラグインではかなり無理やりCoffeeScriptのclassを使った感がありました。
classを使いこなせていないし、並びにオブジェクト指向への理解がまだ足りないと感じました。

設計ミス

また、htmlに要素を追加した際に、再描画するメソッドを用意しておらず、再度プラグインを呼び出すという記述になってしまっています。
そして、今の実装方法だと、横幅の違う要素があるときれいに並びません。

感想

もっと大規模のjsじゃないと真価を発揮できなさそう
でもすごく書きやすい
jsが多少分ければすぐに書けるようになる

jsでの面倒な書き方などを上手いこと包み込んでくれています。
なので、書く側はロジックに集中でき、精神衛生上すごく優しいと感じました。

注意点

ただし、CoffeeScriptはjsの面倒は見てくれるけれど、書き手のロジックまでは面倒を見てくれませんので、結局ウンコードはウンコードのままです。

まとめ

Q,今後もCoffeeScriptを使いますか？
A,使いたいけど、タイミングがあまり無さそう。
jsはファイル数増えると読み込み速度が下がるので、結合コンパイルとかは非常にいいと思うのですが、すでにjsで書かれているファイルとCoffeeの連結は都合が悪く一からCoffeeScript100％で書かないと威力を発揮しにくいと感じました。
とは言え、使えるタイミングではとことん使えると思うので、機会があったらガンガン使っていこうと思います。

今回の記事で掲載したプラグインはGithubに公開してあります。
https://github.com/Leko/jquery.tile.js
まだ実用的では無いので、プラグインの紹介記事はプラグインの修正後に公開します。
最後まで読んで下さいまして、ありがとうございました。

CoffeeScript JavaScript jQuery