drkcore

2012/02/02 06:46:45

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

三島でやります。

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


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

次の本

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

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


2012/01/31 20:55:01

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

CLIで良い感じ

$ npm install -g todo

でインストールできる。

node_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ってのがあったけど、これでいいんだろうか?あとで試してみよう。

2012/01/30 08:22:23

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

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

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


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

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

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

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

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

おまけ

2012/01/28 08:01:53

html2jadeでHTMLを読みやすくする

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

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

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

impress

      #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

2012/01/26 20:57:53

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

かなり良い感じですね。

2012/01/24 20:35:28

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 )


2012/01/24 19:44:03

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

2012/01/22 17:38:52

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

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

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

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

2012/01/19 20:49:15

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 )


2012/01/17 19:12:36

クライアントサイドの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 )