こんにちは。
\n昼夜逆転が一周してやっと普通の生活に戻って来ました。れこです
最近、CoffeeScriptというJavaScriptのライブラリにハマっています。
\n半年前くらいに流行った、賛否両論なjsライブラリです。
\n非常にシンプルにjsを書くことができて、Ruby on Railsでも公式採用されています。
\nそのCoffeeScriptでjQueryのプラグインを１つ書いてみて、CoffeeScriptで開発していくことについて感じたことをメモします。
CoffeeScriptやjQueryプラグインの基礎については特に触れません。ご了承下さい。
\n\nCoffeeScriptはJavaScriptを楽にシンプルに書けるライブラリです。おおまかな特徴は、
\nなど、素のjsでは考えられないほどタイプ数が減ります。
\nそのため、コーディング速度や保守性が高まり、複数人で書いても品質の高く統一されたコードを書くことができます。
あまり簡素なものでは練習にならないので、今回は、[jQuery.masonry]のような要素をタイル状に並べるプラグインを作りました。
\nページの横幅からはみ出さないように横に並べる個数を調整できます。
\n完成品を見てもらったほうが早いのでデモを。
[ページ内の要素をタイル上に並べるjQueryプラグイン jQuery.Tile.js]
\nプラグインに少し上乗せして、私のTwitterのつぶやきを表示しています。
\nプラグインとは無関係に、一番下までスクロールすると、次のツイートを読み込む無限スクロールも入れてあります。
\n余計なもの盛り込みました。はい。
普通のjsでjQueryプラグインを作ると、だいたいこのような感じになると思います。
\n(function($) {\n $.fn.pluginName = function(config) {\n var defaults = {\n option: \"オプション\"\n };\n option = $.extend(defaults, config);\n return this.each(function() {\n // ここにプラグインの処理を書く\n });\n };\n})(jQuery);すごく、カッコカッコしています。
\nなど、しょうもないミスを頻発している私は、基本的な文法にもイライラします。
\nただ初心者なだけですね。はい。
\nで、これをCoffeeScriptで書くと、こうなります。
do ($=jQuery) -> \n $.fn.pluginName = (config) -> \n defaults option: \"オプション\"\n option = $.extend(defaults, config)\n @.each -> \n # ここに処理を記述非常にシンプルです。
\nループや関数の終わりはインデントで表現されるため、閉じカッコが不要です。
\nそのため、非常にシンプルに書くことができます。
\nこっちのほうが書きやすい！ 見やすい！ とおもいます。
ざっとプラグインを作ってみて思ったことをまとめると、以下の通りです。
\n今回のプラグインではかなり無理やりCoffeeScriptのclassを使った感がありました。
\nclassを使いこなせていないし、並びにオブジェクト指向への理解がまだ足りないと感じました。
また、htmlに要素を追加した際に、再描画するメソッドを用意しておらず、再度プラグインを呼び出すという記述になってしまっています。
\nそして、今の実装方法だと、横幅の違う要素があるときれいに並びません。
jsでの面倒な書き方などを上手いこと包み込んでくれています。
\nなので、書く側はロジックに集中でき、精神衛生上すごく優しいと感じました。
ただし、CoffeeScriptはjsの面倒は見てくれるけれど、書き手のロジックまでは面倒を見てくれませんので、結局ウンコードはウンコードのままです。
\nQ,今後もCoffeeScriptを使いますか？
\nA,使いたいけど、タイミングがあまり無さそう。
\njsはファイル数増えると読み込み速度が下がるので、結合コンパイルとかは非常にいいと思うのですが、すでにjsで書かれているファイルとCoffeeの連結は都合が悪く一からCoffeeScript100％で書かないと威力を発揮しにくいと感じました。
\nとは言え、使えるタイミングではとことん使えると思うので、機会があったらガンガン使っていこうと思います。
今回の記事で掲載したプラグインはGithubに公開してあります。
\nhttps://github.com/Leko/jquery.tile.js
\nまだ実用的では無いので、プラグインの紹介記事はプラグインの修正後に公開します。
\n最後まで読んで下さいまして、ありがとうございました。