javascript / Drkcore

静岡Developers勉強会第4回HTML5読書会

Thu, 02 Feb 2012 06:46:45 +0900

三島でやります。

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

今回は、ローカルストレージ、websocket、History APIあたりなので、以下の話題に興味があれば参加すると面白いかもしれません。

次の本

入門Gitを推しておきます。GitHubでフォローしているShizudeverいないんだよね、増えたらいいなっていうのが理由の一つ（他のサービス使っているんだろうか？）。もうひとつはブランチの切り方がイマイチきちんと身についてないので、勉強会で人が集まれば複数人作業ってのを試すことができるかなと。

入門Git
濱野純(Junio C Hamano)
秀和システム / 2310円 ( 2009-09-19 )

TodoっていうNode.js製のtodo管理ツール

Tue, 31 Jan 2012 20:55:01 +0900

CLIで良い感じ

$ npm install -g todo

でインストールできる。

help:   
help:   todo - Todos in the CLI like what.
help:   
help:   Usage:
help:   
help:          todo Go shopping. - Adds new item.
help:          todo ls.          - Lists not finished items.
help:          todo ls --all     - Lists all items.
help:          todo rm 1         - Removes #1 item.
help:          todo check 1      - Marks #1 item as done.
help:          todo undo 1       - Marks #1 item as not done yet.
help:          todo clear        - Clears the whole list.
help:          todo version      - Lib version.
help:   
help:   Author: Veselin Todorov <hi@vesln.com>
help:   
help:

Node.jsのテスト系のライブラリなんかもそうなんだけど、ターミナルに色付きで表示されると見やすくていいですね。オプションもわかりやすいので、端末にちょっと入れておけばtodo管理ができてイイかも。普段はGmailのタスクを使っているので同期できると嬉しいんだけどねー

と思いながら調べたらGoogle Tasks APIってのがあったけど、これでいいんだろうか？あとで試してみよう。

PreziのズーミングプレゼンテーションのコツはBig Pictureを描くこと

Mon, 30 Jan 2012 13:53:15 +0900

Preziで始めるズーミングプレゼンテーション
筏井哲治
日経BP社 / 1575円 ( 2011-03-31 )

テスト駆動Javascriptでテスト駆動開発を学ぶ

Mon, 30 Jan 2012 08:22:23 +0900

中級者向けのJavascript開発の本として読んでもいいし、テスト駆動開発の入門書として読んでも良い感じ。名著だと思う。

テスト駆動JavaScript
Christian Johansen
アスキー・メディアワークス / 3780円 ( 2011-11-25 )

自分はプログラマーの集団的な組織に属したことがないため、開発の色々（特にペアプロ）なイメージが良くわからんし、TDDもイマイチ理解していない感があったので、本書のように丁寧に書いてある本はありがたかったりする。

第三部の「Javascriptテスト駆動開発の実際」のパートが面白いが、その中でも特にNode.jsによるサーバーサイドのテスト(14章)とクライアントサイドのテスト(15章)が非常に良かった。この2章だけで90ページくらいあるし、じっくり写経したら２日を費やしてしまったが、得るものは多かった。特に実際のコードとテストコードが絡み遭いながら完成に向かって進んでいく感を味わえたのはなかなか素晴らしい体験だった。

ちなみに14章ではNodeunitを使ってたけど、実際に自分が使うならVowsかなぁと(CoffeeScriptでも使えるしね)

エディタに関しては、Emacsの場合、縦分割して左にコード、右にテスト出して交互に切り替えながら進めていくのが調子良かった。

一部がテスト駆動開発の一般論で、二部がJavascriptの概論だけど、第４章の「学ぶためのテスト」というパートが面白かったかな。他の人が書いたライブラリを観察するために、テストの形で評価した内容を記述しておくという方法論は斬新だった。まぁ、よく考えてみると、自分も新しいモジュールを理解したい場合はまずテストを眺めて、よく分からない場合は、対応する部分のソースコードを読んでふるまいを理解したりするので、結局そういったやりかたの形を変えて、積極的に観察とその記録を取っていく手法って考えればいいのかと思った。

おまけ

html2jadeでHTMLを読みやすくする

Sat, 28 Jan 2012 08:01:53 +0900

HTML5ベースのスライドつくる場合はJadeみたいなインデントでブロックを表現するような形式のほうが見やすいし書きやすい。

html2jadeを使えば、逆にhtmlをjadeに変換して読みやすく出来るのでオススメです。

impress.jsのindex.htmlをjadeに変換してみた。読みやすい。

      #bored.step.slide(data-x='-1000', data-y='-1500')
        q
          | Aren't you just
          b bored
          | with all those slides-based presentations?

      .step.slide(data-x='0', data-y='-1500')
        q
          | Don't you think that presentations given strong in modern browsers
          | shouldn't strong copy the limits
          | of 'classic' slide decks?

      .step.slide(data-x='1000', data-y='-1500')
        q
          | Would you like to strong impress your audience
          | with strong stunning visualization
          | of your talk?

      #title.step(data-x='0', data-y='0', data-scale='4')
        span.try then you should try
        h1
          | impress.js
          sup *
        span.footnote
          sup *
          | no rhyme intended

      #its.step(data-x='850', data-y='3000', data-rotate='90', data-scale='5')
        p
          | It's a
          strong presentation tool
          br
          | inspired by the idea behind
          a(href='http://prezi.com') prezi.com
          br
          | and based on the
          strong power of CSS3 transforms and transitions
          | in modern browsers.

      #big.step(data-x='3500', data-y='2100', data-rotate='180', data-scale='6')
        p
          | visualize your
          b big
          span.thoughts thoughts

      #tiny.step(data-x='2825', data-y='2325', data-z='-3000', data-rotate='300', data-scale='1')
        p
          | and
          b tiny
          | ideas

vowsはCoffeeScriptでテストができる

Thu, 26 Jan 2012 20:57:53 +0900

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すると

かなり良い感じですね。

Joose(Javascript版のMoose)

Tue, 24 Jan 2012 20:35:28 +0900

sof見てたら見つけた。

Joose

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

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

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

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

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

Tue, 24 Jan 2012 19:44:03 +0900

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ってのがあった

Sun, 22 Jan 2012 17:38:52 +0900

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

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

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

Canvasに富士山を描く関数

Thu, 19 Jan 2012 20:49:15 +0900

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)" }
    ]);
});

Rで富士山関数