こういうの書きたい。

// unk.js
$('#unk').click(function(){
  alert('unk')
})

けどcoffeeでは、

# unk.coffee
$('#unk').click ->
  alert 'unk'
,

キモイー。何かあるのかな?

最近のpowはコンフリクトしない。完。

あなたの Web サイト

powはversion毎のディレクトリを作ってlatestなものにcurrentからsymlinkが張られるのでupdateも普通にインストールするだけでいい。

$ curl get.pow.cx | sh
// fib.js
function fib(n) {
  if (n == 0 || n == 1) return n;
  return fib(n - 1) + fib(n - 2);
}
$ npm install js2coffee -g
$ js2coffee fib.js > fib.coffee
// fib.coffee
fib = (n) ->
  if n == 0 or n == 1
    return n
  fib(n - 1) + fib(n - 2)

「(既存プロジェクトのjsを変換して)ふー・・・」

「弊社もcoffee導入しました(キリッ」

  • nave = rvm
  • node.js = ruby(ex:mri-ruby)
  • npm = rubygems

nave

$ git clone git://github.com/isaacs/nave.git ~/.nave
$ cd ~/.nave
$ ./nave.sh install stable

ここで普通は~/.zshrcとかにnave.sh use stableとか書けとありますが、設定したshellをもう一段階開くのが何か嫌だ。(確かにVirtual Environment for Nodeって感じではあるが)

Terminal — zsh — 80×24

キモス。

% env | grep NODE
NODE_PATH=/Users/komagata/.nave/installed/0.4.8/lib/node
% env | grep NAVE
NAVEVERSION=0.4.8
NAVE=0.4.8
NAVELVL=1
NAVE_DIR=/Users/komagata/.nave
NAVE_ROOT=/Users/komagata/.nave/installed
NAVE_SRC=/Users/komagata/.nave/src

それっぽい環境変数+PATHを手動で.zshrc設定に手動で設定することにした。

export PATH=~/.nave/installed/0.4.8/bin:$PATH
export NODE_PATH=/Users/komagata/.nave/installed/0.4.8/lib/node
export NAVEVERSION=0.4.8
export NAVE=0.4.8
export NAVELVL=1
export NAVE_DIR=/Users/komagata/.nave
export NAVE_ROOT=/Users/komagata/.nave/installed
export NAVE_SRC=/Users/komagata/.nave/src

npm

$ curl http://npmjs.org/install.sh | sh

インストールは楽。

1.0.0から?は普通にnpm installするとcurrent directoryのnode_module以下に入る。この名前も嫌だなあ。そうするとライブラリはプロジェクト毎のnode_moduleに入り、普段使いのコマンドとして使えない。その場合は-g(global)オプションを付けてinstallすればいいらしい。

$ npm install coffee-script -g

これでcoffeeコマンドが使えるようになりました。

しかし、これだとrequire出来なくなっちゃうのでnpm link fooでglobalな場所に入ったライブラリからcurrentのnode_moduleへシンボリックリンクを貼る必要がある。これはsucksでございます。

動きの早い界隈なので暫くしたらもっと便利になるかもしれません。

vim-coffee-script

Bundle 'kchmck/vim-coffee-script'

vundlerを使ってる場合は上記を.vimrcに追加して:BundleInstall。また、autocmdでファイル保存と同時にcompileするようにしてもいいけど、railsとかだとディレクトリ違うのでウザイかも。

:CoffeeMakeでコンパイル。

Terminal — vim — 80×24

:'<,'>CoffeeCompile
console.log('foo');

visual選択してcompileなんてシャレオツなことも。

cofeescriptを使ってみました。気になっていたのは親クラスのコンストラクタを呼ぶ方法(のスマートな書き方)。

以前は、JavaScript Good Partsに載っていたnewやprototypeを使わない方法でやっていたんですが、coffeeのextendsはどういうコードを吐くんだろう?

// foo.coffee
class Foo
  constructor: (name) ->       
    console.log name           

class Bar extends Foo          
  constructor: ->
    super 'unk'
// foo.js
var Bar, Foo;
var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) { 
  for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } 
  function ctor() { this.constructor = child; } 
  ctor.prototype = parent.prototype;
  child.prototype = new ctor;
  child.__super__ = parent.prototype;
  return child;
};
Foo = (function() { 
  function Foo(name) { 
    console.log(name);
  } 
  return Foo;
})();
Bar = (function() { 
  __extends(Bar, Foo);
  function Bar() { 
    Bar.__super__.constructor.call(this, 'unk');
  } 
  return Bar;
})();

オブジェクト指向で書けるライブラリによくあるextends関数を作ってそれを使ってるだけでした。まあ、そりゃそうか。

coffee自体は綺麗だし、SASS/SCSSみたいに最初のうちは吐かれたjsを確認しながらになるけど、段々js見る頻度が減ってきてるので殆ど見ないで行けるようになれば使えるなーと思いました。

JPNewTechのイベントに行ってビックリした - komagata [p0t]

こんな事書きましたが、そういえば今まで誰にも共感されたことないし、当時かなり衝撃を受けて熱中してたので自分の中では自明のこと過ぎて説明が足りなすぎるかなと思ったのでもう少し詳しく書いてみます。

まず、「XHRでもWebDAV使えるっぽい」っていうエントリーがあって、その時点で、「うお、マジかよ。その発想は無かったわ」って感じです。で、「ってことはもしかして・・・?」ってうっすら。

XMLHttpRequestでWebDAV - snippets from shinichitomita’s journal

で、WebDAVサービス上で動く、HTML+JavaScriptだけで作られたブログエンジンというエントリーでwebdablogという形で僕の様な貧弱一般人(@ブロントさん)にも露骨に分かるソフトウェアの形で公開されました。そのソースコードを読んでビックリしました。

2006年の時点でもWebDAVなんて一昔前の技術で、その存在とかは誰でも知ってたわけでそれを使ってクライアントサイド実装のみでJSONで保存して表示もやるというのが面白かったし、裏技的に見えてHTTPの本質をついてると思いました。

webdav.jsのコードの字面を見ても「そんなに興奮するものか?」って思うかもしれないけど、webdav.jsは単独で公開されたものじゃなくて、上記のwebdablogの中に数あるソースコードのうちの1ファイル。僕が勝手にwebdav.jsだけ取り上げて騒いでるだけなんですが、webdablogのコンセプトも面白かったし、そのコンセプトをwebdav.jsという形に切り出しているのがとてもスマートだと思いました。

どう実装するか?ということより、何を実装するのか?という問題設定とプログラムの粒度の設定がとてつもなくスゴイと思ったのです。

そして、どう実装するか?の部分も力技でゴリゴリと書いてあったら興醒めだけど、全く力の抜けたシンプルでスマートな書き方がしてある。こういうのこそ僕が目指したいコードだと思った訳です。だから一般的に"凄いコード"と聞いて連想する感じとはちょっと違うかもしれません。

「わざわざそんな事言わんでも@stomitaがスゴイことなんてわかっとるわ」

という方もおられるとは思いますが、5年前にそんなことがあったよというお話でした。