こんにちは、ほそ道です。
今回からよりアジャイリーな開発を目指して、とりあえずCofeeScriptを取り上げます。
今後Yeoman/anguler.js/Synthまたはsails.jsなども取り上げながらリッチなアプリケーションをよりカジュアルに作りたいなという狙いがあり、その第一歩となります。
今回は文法的な所はスルーします。実行方法とコンパイル、その為の環境構築を取り上げます
Coffeeを飲んでみた理由
TypeScript/Scala.js/PureScriptも少し触ってみましたが下記の３点を評価基準にしたときに一番良いかなーと思いました。
- 短く書けそう
- 小回りが効き、他ツールと連携の選択肢もある
- コンパイルされたJSが見易く、ファットにならない
- 変換後のJSコードのグッドパーツな感じを見たい
TypeScriptはJS拡張的な位置づけの為、元のJSがイケてないとグッドパーツにしてくれないのでは？という懸念があり今回は見送り。
ScalaベースのScala.jsは出力されたJSがファットで、元の構文がライブラリ内に散らばる感じが惜しいなという感じ。
HaskellライクなPureScriptは動作させるまでにHaskellのパッケージインストールが結構面倒だったのと、出力されたJSはまとまっているのすが大量のコードに囲まれていて何となく重々しい感じ。
きっとどの言語も素敵だと思いますが、今回はCoffeeScriptのフットワークの軽さと他ツール連携が多いと思われる部分を取りました。
Nodeでインストール＋実行
インストール
Nodeで実行出来るよう、コンソールで下記のコマンドを叩きましょう。
どこからでも叩きたいのでグローバルインストールとします。
sudo npm install -g coffee-script
coffeeコマンドを叩くと対話型のコンソールになりますね。アラ簡単。
実行
さっそくコードを書いてみましょう。ファイル名はfirst.coffeeとします。
JSには無いキーワードclassを使ってみます。わくわくです。
class Man
constructor: (@name, @age) ->
greet: (arg) ->
console.log 'Hello I\'m ' + @name + "!";
h = new Man "Hosomichi", 30
h.greet()
ファイルを保存したらコンソールで実行です。
coffee first.coffee # Hello I'm Hosomichi!
とりあえずイイ感じ！
JSコンパイル
今度はコードをJavaScriptコードに変換してみましょう。
コンソールで下記のコマンドを叩きましょう。
coffee -c first.coffee
同じディレクトリにfirst.jsというのが出来上がっております。サクサク出来ますね。
中身を拝見してみましょう。
// Generated by CoffeeScript 1.7.1
(function() {
var Man, h;
Man = (function() {
function Man(name, age) {
this.name = name;
this.age = age;
}
Man.prototype.greet = function(arg) {
return console.log('Hello I\'m ' + this.name + "!");
};
return Man;
})();
h = new Man("Hosomichi", 30);
h.greet();
}).call(this);
フムフム、即時関数の中に収まる形で作られるんですね。
そしてclassで宣言したオブジェクトは即時関数の内部でクロージャを使って安全に生成され、
メソッドはprototypeに設定されると。
そして記述量が３倍ほど違います。
面白いですねぇ。
ブラウザで実行
さてaltJsという事でブラウザでも使いたいですね。
フツーにJSコンパイルして出力ファイルをブラウザに読み込ませるのが常套手段だと思いますが、公式で紹介していた面白い方法を試してみます。
まずcoffee-script.jsをダウンロードしてHTMLから参照できる場所に配置します。
HTMLファイルは次のようにしてみました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FirstCoffeeScript!</title>
</head>
<body>
<script src="js/coffee-script.js" type="text/javascript"></script>
<script type="text/coffeescript">
class Man
constructor: (@name, @age) ->
greet: (arg) ->
alert 'Hello I\'m ' + @name + "!";
h = new Man "Hosomichi", 30
h.greet()
</script>
</body>
</html>
重要ポイントは下記の二点です。
- scriptタグのtype属性が
text/coffeescript - ダウンロードしたcoffee-script.jsを読み込ませている
Node実行の際のconsole.logは折角なのでalertにしてみました。
この状態でブラウザを開いて読み込むとメッセージダイアログが表示されます。
これはカジュアルに実行できて非常によろしいですね！
今回は以上です。