CoffeeScriptはじめました - 40歳からのキャリアチェンジ

会社の若手がJavaScriptというかCoffeeScriptの勉強をしたいということを少し前に相談されました

ちなみにその若手もエンジニアじゃなくって、Webエンジニア、クリエイターさん向けのイベント企画やってる人間なんですが、自分で少しコード書けるようになりたいという状況だったのと自分の勉強にもなるかなと思って教えることにしました

ネタ探しに少しハマる

お互いMac使ってるので、環境が基本同じなので、その点では教え易い環境にあります。ただ、彼の目的は、JavaScriptというかCoffeeScriptでひとまず何か作ってみたいということでした。

取り上げるネタとして

Titanium Mobile
Chrome Extention
Node.js

の3点を思いついたのですが、最終的にNode.jsにしました。

TitaniumMobileでの開発をネタにしてしまえば、いいのかもしれませんが、そうなると、Xcodeインストールして、Titaniumインストールして・・・と環境構築のハードルがあがりそうなので、一旦Tiは却下しました。

Chrome Extentionは、作ってすぐ試せるし、以前に非プログラマーな人向けのプログラミング勉強会やった時の資料があるので、これでいこうかとおもってました。ただ、Chrome Extention は、HTML/CSSもそこそこ書かないといけず、プログラミングしてる感覚を少し味わい辛いかなと思って一旦保留にしました

幸い、CoffeeScriptを実行できるように、node.js環境までは自力で整えたということを事前に聞いていたので、そこまで出来る知識、スキルあるなら、まぁ何とかなるかなと思って、Node.js な何かを作る方針にしました

作ったもの

単体で動作するようなツールっぽいものがいいかなと思い、適当にググッてたら、node.jsの標準モジュールを使ったサンプルクローラーをGistで見つけました。

コードがそれほど長くないので、これを少しだけアレンジして、CoffeeScriptでこんな感じで書き直しました

あとは以下のようなJSONファイル（url_list.json）を準備

[
    'http://blog.summerwind.jp/',
    'http://www.apple.com/',
    'http://twitter.com/',
    'http://nodejs.org/',
    'http://www.google.co.jp/',
    'http://www.livedoor.com/',
    'http://www.yahoo.co.jp/',
    'http://cookpad.com/',
]

ターミナルでCoffeeScriptのファイルをコンパイルしてから

node ./main.js url_list.json

とやれば

start
http://www.apple.com/ - 200
http://nodejs.org/ - 200
http://www.google.co.jp/ - 200
http://www.yahoo.co.jp/ - 200
http://twitter.com/ - 200
http://blog.summerwind.jp/ - 200
http://www.livedoor.com/ - 200
http://cookpad.com/ - 200

という感じで無事動作しました。

最後にCoffeeScript取り組んでみた感想

CoffeeScriptは以前から手を付けようかと思っていたのですが、その前にまずはJavaScriptについてある程度理解を深めてからにしようと決めていたので、あえて着手していませんでした。

今回きっかけがあって取り組んでみたのですが、CoffeeScript は慣れてくるとかなり書きやすいというのが最初に感じた所。

けれど、引数のカッコが省略できる記法は、タイプ量が減るのはいいのかもしれないけど、CoffeeScriptのコーディング規約みたいなものをまだよく理解してないので、コード書いててなんとなく、自分なりのルールが確立できないので、その点がちょっと気持ち悪い感じがしてます。

あと、生成されるJavaScriptが理解できないと、何かハマった時に対処できなくなるので上記で書いた「JavaScriptについてある程度理解を深めてから・・」というアプローチを取っておいて正解でした

※実際、今回Nodeのサンプル作ってて、生成されたJavaScriptで

  Crawler.prototype.crawl = function(list) {
    var self, u, _i, _len, _results;
    self = this;
    _results = [];
    for (_i = 0, _len = list.length; _i < _len; _i++) {
      u = list[_i];
      _results.push(self.fetch(u));
    }
    return _results;
  };

みたいな感じで中途半端な知識しかなかった以前の自分だったらこのコード見て完全にお手上げだったろうし