SaCSS vol.29 で JavaScript についてお話してきました

Clean JavaScript というタイトルで、 JavaScript の良いコードについてお話しました。

• SaCSS vol.29 : ATND

Clean Javascript

View more presentations from Ryunosuke SATO

JavaScript 自体の良い書き方というのは、ここ数年で体系が確立されてきたように思います。

良質な書籍が多数出版されていて、いくつかのパターンが見いだされてきているのではないでしょうか。

しかし、クライアントサイド、特にブラウザの中で DOM を扱う際の難しさについては、
まだこれといった決め手になる方法が定まってないように感じます。

そこで、ぼくが今考えている "良いコード" について、お話してきました。

今回自分がテーマにしていたのは、 DOM と JavaScript をいかに分離して管理するか、です。

それぞれの関係が疎になれば、DOM 構造の変更に強い、
もしくは JavaScript のリファクタリングが容易な設計になり、
これが良いコードと呼べるのではないかと思います。

また、良いコードを心がけると別の環境への移植も簡単になることを証明するために、
発表の最後にライブコーディングを行いました。

内容は以下のような感じでした。

1. ブラウザ内で Canvas の画像を表示する
2. リファクタリングして、コードを良い状態に整える
3. 同じ JavaScript コードを利用し、Mac のターミナルに Canvas の画像を表示させる

利用したライブラリは、こちらです。

• visionmedia/term-canvas · GitHub

その時のコードはこちらにあげてあります。

• refactoring-demo for SaCSS vol.29

今回の発表で紹介した良いコードを書くためのポイントを、コミット単位で適用しています。

よろしければご参考くださいませ！

JavaScript 第5版

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScriptパターン ―優れたアプリケーションのための作法

Express のテンプレートエンジンとして haml + CoffeeScript を使う

Express の標準テンプレートエンジンは jade ですが、あの html の閉じタグを毎回書くのがぼくは好きになれません。
そこで、 haml をテンプレートエンジンとして利用するようにしてみようと思います。

これについては Express のガイドページにもやり方が書いてあります。
http://expressjs.com/guide.html

まず、 hamljs をインストールします。

$ npm install hamljs

そして Express を使うときに設定を行います。

# app.coffee
app = require('express').createServer()
app.register '.haml', require('hamljs')

閉じタグを書かなくてすむのはとてもすばらしいですね！

さて、これで haml を利用できるようになったわけですが、テンプレート中に書く JavaScript 部分も CoffeeScript を使ってお手軽に書けるようにしてみたいと思います。

haml には filter という機能があって、独自にコンパイラを指定できます。
この辺りは ruby の haml でも同じですね。

# app.coffee
app = require('express').createServer()

coffee = require 'coffee-script'
hamljs = require 'hamljs'

hamljs.filters.coffee = (str) ->
  @javascript coffee.compile(str)

app.register '.haml', require('hamljs')

こうしておくと、haml のテンプレート中で CoffeeScript を書けるようになります。

%head
  :coffee
    jQuery ($) ->
      alert "Generated from 'CoffeeScript'!"

すっきりと書けますね！
すばらしい！！

C言語の勉強

C言語の勉強をしようと思って買っていた本があったのですが途中までやって中断してしまっていたので、
最初からちゃんと勉強しなおすことにしました。

ふつうのLinuxプログラミング Linuxの仕組みから学べるgccプログラミングの王道

ちゃんと人から見えるとこで勉強した方が良いと思ったので、 GitHub にあげてみました。
https://github.com/tricknotes/normal-linux-programing

とりあえず、一冊写経するところから！

rack でカレントディレクトリを公開する

rack でカレントディレクトリを公開したいときの config.ru の書き方をいつも忘れてしまうので、自分用に備忘録を残しておきます。
https://gist.github.com/1109610.js?file=config.ru

ルートパスへのアクセスでディレクトリの一覧が出したければ1行目は不要ですし、 public ディレクトリ以下を公開させたい場合には、2行目を書き換えてやればOKです。

で、これを Heroku にデプロイしようとしたときにハマりました。

push して サーバが起動するところまでは確認できるのですが、アプリケーションにアクセスしようとすると、エラーメッセージが表示されます。

2011-07-27T15:40:09+00:00 app[web.1]: !! Unexpected error while processing request: type mismatch: Array given

どうやら、Heroku でデフォルトで利用される Rack のバージョンが古く、 Rack::Static が受け取れるオプションの形式が最新の Rack のものではないのが原因のようでした。

なので、 Gemfile も一緒にデプロイするとよいです。
https://gist.github.com/1109610.js?file=Gemfile

Heroku で利用される Rack のバージョンって、公式に発表されてないんですかねぇ。

MacでCoffeeScriptを簡単にインストールする

久々にHemebrewをアップデートしてみました

$ brew update

すると更新一覧の中に見慣れた名前がありました。

==> The following formulae were updated:
coffee-script

おぉっ！？
今までみたいに、 node → npm → coffee-script のインストール手順を踏まなくてもいいの！？

というか、どんな風にインストールされるのか気になったのでさっそく試してみました。

まずは、元から入れていたCoffeeScriptを削除します。
(CoffeeScriptをインストールしていない場合は不要)

npm uninstall -g coffee-script

そしてすかさずHomebrewでインストールします。

brew install coffee-script

すると Node.js のインストールが開始されました。

==> Downloading http://nodejs.org/dist/node-v0.4.9.tar.gz######################################################################## 100.0%
==> ./configure --prefix=/usr/local/Cellar/node/0.4.9
==> make install
==> Caveats
Please add /usr/local/lib/node to your NODE_PATH environment variable to have node libraries picked up.
==> Summary
/usr/local/Cellar/node/0.4.9: 72 files, 7.6M, built in 4.6 minutes
==> Downloading https://github.com/jashkenas/coffee-script/tarball/1.1.1
######################################################################## 100.0%
==> ./bin/cake --prefix /usr/local/Cellar/coffee-script/1.1.1 install
==> Caveats
coffee-script can also be installed via `npm install coffee-script`.
This has the advantage of supporting multiple versions (of any Node libs)
at the same time.

Since coffee-script syntax changed pretty drastically between 0.7.2 and
0.9.x, you may want to install it via npm instead.

This formula may be retired from a future version of Homebrew.
==> Summary
/usr/local/Cellar/coffee-script/1.1.1: 34 files, 496K, built in 2 seconds

ふむふむ。なるほど。

Node.js のインストールが完了すると、CoffeeScriptがリポジトリから直接インストールされます。

npm 経由でインストールされていないのでアップデートする際は手動で行う必要がありそうですが、
ちょっとにCoffeeScriptを試してみたい、という場合にはとても楽だと思いました。

OSC 2011 Hokkaidoに参加しました

2011.06.11 に、オープンソースカンファレンス2011北海道に参加してきました。

OSCはぼくが初めて参加したIT系のイベントで、毎年参加することを楽しみにいます。そして今回で参加は３回目。

今回、発表の機会をいただけたのでNode.jsについて発表をさせていただきました。
Node.jsっていう名前は聞いたことあるけど、あまり触ったことがない人向けの内容でお話させてもらいました。

今回、LOCAL企画セミナーということで、次のようなテーマで発表しました。

• 「破」 ”キーワードは聞いたことがあるけど、実際それってどんなものなの？”

Node.jsってどうなの？

View more presentations from Ryunosuke Sato

ブレストに付き合ってくれた @onjiro_mohyahya 、応援してくれた @EnnuiR 、レビューに付き合ってくれた @snoozer05 、 @darashi 、 @mayuco ありがとうございました。

そして、この素晴らしいイベントを開催してくださったスタッフのみなさま、ありがとうございました！！

EnvjsがRuby1.9で動かない件

テスト用に capybara-envjs を使ってみようと思ったのですが、上手くインストールできませんでした。

js_land_proxy.h:11:18: error: node.h: No such file or directory

いろいろ調べたところ、githubに答えがありました。
https://github.com/smparkes/capybara-envjs/issues/48

ruby1.9はサポートしていないし、しばらくサポートの予定もないとのことでした。

rails3+envjsの組み合わせで、JSのテストをRubyで書きたい場合は、Ruby1.8.7しかないみたいです。
Ruby1.9でさくっとJSのテストを書きたいんだけど、うーん、何かよい方法はないものかなぁ。