vowsはCoffeeScriptでテストができる

CoffeeScriptでテストをできるライブラリを探していたらvowsで出来ることを知った。

vows = require 'vows'
assert = require 'assert'

vows
  .describe('Division by zero')
  .addBatch
    'when dividing a number by zero':
      topic: -> 42/ 0

      'we get Infinity': (topic) ->
        assert.equal topic, Infinity

    'but when dividing zero by zero':
      topic: -> 0 / 0

      'we get a value which':
        'is not a number': (topic) ->
          assert.isNaN topic

        'is not equal to itself': (topic) -> 
          assert.notEqual topic, topic

  .export(module)

これをvows --specすると

vows

かなり良い感じですね。

Joose(Javascript版のMoose)

sof見てたら見つけた。

名前からして、MooseのJavascript版ですね。マニュアルはあるけど、モダンPerl入門でperlのサンプルから理解する方がいいような気がする。

ProductName モダンPerl入門 (CodeZine BOOKS)
牧 大輔
翔泳社 / 2940円 ( 2009-02-10 )


買ったまま放置してあるMOPの本も読まなければいけない。

ProductName The Art of the Metabobject Protocol
Gregor Kiczales
The MIT Press / 4007円 ( 1991-07-30 )


ExpressのスケルトンをCoffeeScriptに変換する

sof見てたら「xxx.jsっていうjavascriptをCoffeeScriptにしたいんだけど」「js2coffee使え」っていう問答があったので、使ってみた。

$ npm install -g js2coffee
$ express testapp
$ cd testapp
$  js2coffee app.js

で、無事に変換された

app = module.exports = express.createServer()
app.configure ->
  app.set "views", __dirname + "/views"
  app.set "view engine", "jade"
  app.use express.bodyParser()
  app.use express.methodOverride()
  app.use app.router
  app.use express.static(__dirname + "/public")

app.configure "development", ->
  app.use express.errorHandler(
    dumpExceptions: true
    showStack: true
  )

app.configure "production", ->
  app.use express.errorHandler()

app.get "/", routes.index
app.listen 3000
console.log "Express server listening on port %d in %s mode", app.address().port, app.settings.env

となると、srcフォルダを掘ってそこに.coffeeを入れて、libにコンパイルしたjavascriptを生成するようなCakefieを書けばいいような気がするが、nodeunitのテスト入れたいばあいどうすればいいのかな?

perlみたいに

$ cake
$ cake test

ってやれればいいんだが。

CoffeeScript自体のソースコードを読むのがいい気がしているが、他にベストプラクティス的なものはあるんだろうか?

Promises/Aの実装にwhen.jsってのがあった

jQueryのdeferredはPromises/Aの実装らしい。テスト駆動javascriptではnode-promiseが載っていたんだけど、ほかにもwhen.jsっていうのがあったのでソースを読んでみた。

Promiseの提案にはいくつかあるらしい

仮想パネル: JavaScriptで非同期プログラミングを乗り切る方法(infoQ)も面白く読めた。

Canvasに富士山を描く関数

Canvasタグとflotを使って富士山を描いてみた。静岡県民だとこの関数は小学校高学年で習うのかな?

もしこの関数を知らない静岡県民がいたら、Canvasタグから勉強したほうがいいですね。タイミングよく来週HTML5読書会があります。しかもCanvasの章ですし、参加しないわけにはいけませんね。

$(function () {
    var f = function(x) { return Math.pow(x,4) - Math.pow(x,2) + 6 };
    var s = function(x) { return 12 / (Math.abs(x)+1) };
    var g = function(x) { return 1/2 * Math.cos(6*x) + 7/2 };

    var d1 = [];
    var d2 = [];
    var d3 = [];
    var d4 = [];

    for (var i = -1; i <= 1; i += 0.1)
        d1.push([i, f(i)]);

    for (var i = -7; i <= -1; i += 0.1)
        d2.push([i, s(i)]);

    for (var i = 1; i <= 7; i += 0.1)
        d3.push([i, s(i)]);

    for (var i = -2; i <= 2.1; i += 0.1)
        d4.push([i, g(i)]);

    $.plot($("#placeholder"), [ { data:d1, color: "rgb(0,0,255)" }
                  , { data:d2, color: "rgb(0,0,255)" }
                  , { data:d3, color: "rgb(0,0,255)" }
                  , { data:d4, color: "rgb(0,0,255)" }
    ]);
});

ProductName HTML5&CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )


クライアントサイドのMVCを考える本

Spineっていうクライアント側でMVCを実現するWebフレームワークが面白かったので、そのライブラリの作者が書いたJavascript Web Applicationsっていう本を読んでいる。

ProductName JavaScript Web Applications
Alex Maccaw
Oreilly & Associates Inc / 3020円 ( 2011-08-30 )


先週末の温泉旅行と、今日の出張の新幹線の行き帰りで7章まで読んだので感想をちょっと書いておくが、サイ本に対してフクロウ本って言われるようになるのかなぁって感じの内容だと思うがどうなんだろう。

手を動かしながら学ぶという本ではなくて、クライアント側でMVCを実現するにはどうしたらよいかという方法論を学ぶ本なので、写経して覚えるというより、自分の中の知識を統合して一つ上のレベルに昇格する感じ。

  • Spineを一通り使えるようになっていること
  • JGPの内容を理解していること
  • Javascriptパターンを理解していること

は必須な感じ。副題がjQuery developer's Guide to Moving State to the Clientと書いてあるんだけどjQueryの知識はあんまり必要でなくて、ググッて理解できるか、該当するソースコードを読めればOKだと思います。それよりもなぜそういう実装にしないといけないのか?っていうことを考えることを求められますね。

ProductName JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford
オライリージャパン / 1890円 ( 2008-12-22 )


ProductName JavaScriptパターン ―優れたアプリケーションのための作法
Stoyan Stefanov
オライリージャパン / 2940円 ( 2011-02-16 )


CoffeeScriptでObserverパターン

javascriptパターンの7章のサンプルをCoffeeScriptでかきなおしてみた。オリジナルのコードはこれ

コンソールログを開くと実行されていることがわかる。

ProductName JavaScriptパターン ―優れたアプリケーションのための作法
Stoyan Stefanov
オライリージャパン / 2940円 ( 2011-02-16 )


CoffeeScriptで書きなおしたほうの実行結果。ターミナルで確認できるので楽ですね。

$ coffee pubsub.coffee 
Just read big news today
Just read big news today
Just read big news today
About to fall asleep reading this interesting analysis

コード。デバッグ用にprintSubscribersっていうメソッドを付けた。それからオリジナルコードはmix-inしていたので最初はfor-of文でそのとおりに書いたんだけど、for-of文でtypeof methodするとfunctionじゃなくてstringが返ってくるのが嫌だったので、継承を使って実装してみた。

class Publisher
  constructor: ->
    @subscribers = { any:[] }

  subscribe: (fn, type) ->
    type = type or 'any'
    @subscribers[type] = [] unless @subscribers[type]?
    @subscribers[type].push(fn)

  unsubscribe: (fn, type) -> @visitSubscriers('unsubscribe', fn, type)

  publish: (publication, type) -> @visitSubscriers('publish', publication, type)

  visitSubscriers: (action, arg, type) ->
    pubtype = type or 'any'
    subscribers = @subscribers[pubtype]
    for subscribe,i in @subscribers[pubtype]
      switch action
        when 'publish' then subscribe(arg)
        else @subscribers[pubtype].splice(i,1) if subscribe is arg

  printSubscribers: -> console.log(@subscribers)

class Paper extends Publisher
  daily: => @publish('big news today')
  monthly: => @publish('interesting analysis','monthly')

class Subscriber
  drinkcoffee: (paper) -> console.log('Just read '+ paper)
  sundayPreNap: (paper) -> console.log('About to fall asleep reading this '+ paper)

paper = new Paper
joe = new Subscriber
paper.subscribe(joe.drinkcoffee)
paper.subscribe(joe.sundayPreNap, 'monthly')
#paper.printSubscribers()
paper.daily()
paper.daily()
paper.daily()
paper.monthly()

この本どうなんだろう、一度読んでおくべきなのかな?

ProductName CoffeeScript: Accelerated JavaScript Development
Trevor Burnham
Pragmatic Bookshelf / 2355円 ( 2011-08-03 )


javascriptにおけるホイスト(まきあげ)

javascriptパターンの5章までで気になったとこのメモ

ProductName JavaScriptパターン ―優れたアプリケーションのための作法
Stoyan Stefanov
オライリージャパン / 2940円 ( 2011-02-16 )


new Array()の振る舞い

引数が一つの場合には配列の長さがセットされる

>var ar = new Array(5);
undefined
>ar
[]
>ar.length
5

関数のホイスト

関数宣言はホイストされるが、関数式は変数のみがホイストされる。

(function(){
  console.log(typeof hoisted); // function までhoistされる
  console.log(typeof notHoisted); // 変数のみhoistされるのでundefined

  var notHoisted = function(){
  };

  function hoisted(){
  }

}());

実行してみる

$ node t.js
function
undefined

Closure Libraryはイントラのアプリ作るのにはいいかもと思った

jQueryで色々プラグインを入れると管理が大変だし、イントラになんか作るときにはclosureみたいにしっかり管理できるライブラリがいいのかなと。ちなみに一昨年の年末に購入した本だった。

ProductName Google API Expertが解説する Closure Libraryプログラミングガイド
伊藤 千光
インプレスジャパン / 3570円 ( 2010-12-10 )


Closure Libraryが得意とするのは、もちろんインタラクティブなWebアプリケーションの開発です。Googleのアプリケーションほど大規模でなくても、GUIを中心とするデスクトップライクなWebアプリケーションには効果的です。

そう思うが、ライブラリ特有のお作法を学ぶコストがかかるのかなぁと感じたのであった。

本書は全体を通してTiny WordっていうWebアプリを作ってGAE/Pにデプロイするところまでカバーしている。一通り写経してみたんだけど、理解しながら読み進めたというよりは欠かされている感があったかも。javaなヒトのほうがすんなりと理解しやすいのかなぁと。

個人的にはClosure LibraryのツールバーがWAI-AREA規格に対応していてキーボードショートカットがさくっと実装できるあたりや、特に企業のイントラアプリに必要そうなウィジェットが揃っているのが気に入った。職場でwebアプリを作るときには第一選択肢にしようっと。

写経してたときに気になったのはコードが断片すぎてコードを追いにくかった。メソッドも断片だったのでgogle cpdeのレポジトリの参照は欠かせなかった。

おまけ

Closure Libraryを利用したwebアプリがなかなか見つからないんだけどchemoinformatics関連ではちょくちょく見かける。というのは化学構造エディタをweb上に実装したいっていうニーズがあるからかなぁと。

ケミストだったらタブレットでさくっと書けるエディタとELNのセットが欲しいだろうしね。

これなどおもしろそうですね。 そもそもGoogle Closure - Building Complex Applications with JavaScriptで興味を持ったので買った本なんだけどね。製薬企業とかケミカルな会社のコミュニケーションツールの構築にはいいライブラリなんじゃないかなぁと。

実際に使っている製薬企業あるのかなぁ?

closure libraryはクラシカルな継承を実装してた

closure libraryを試している。

inheritsメソッドってクラス指向だよなぁと思いながらソースコード読んだら(1442行目)、javascpriptパターンでいうところのクラシカルパターンそのものだった。

goog.inherits = function(childCtor, parentCtor) {
  /** @constructor */
  function tempCtor() {};
  tempCtor.prototype = parentCtor.prototype;
  childCtor.superClass_ = parentCtor.prototype;
  childCtor.prototype = new tempCtor();
  childCtor.prototype.constructor = childCtor;
};

テンポラリのオブジェクトをかましていて継承関係はこんな感じになっているんだが、javascriptパターンの6章を読むとクラシカルなパターンの導出過程がわかりやすく書かれているのでオススメです。

classical

ちなみに図はblockdiagで書いてみたのだけど、クラス図っぽくないですね(あとでちゃんと書き方を調べる)。

ProductName JavaScriptパターン ―優れたアプリケーションのための作法
Stoyan Stefanov
オライリージャパン / 2940円 ( 2011-02-16 )