[JavaScript] CoffeeScriptをmacにインストール

2011/12/16

こんにちは。きんくまです。

CoffeeScriptというものがあります。

coffee_install1

これはどういうものかといいますと、.coffeeファイルをJavaScriptへコンパイルするものです。

1. .coffeeという拡張子のファイルに、JavaScriptより簡潔な書き方で(ていうか独自)プログラムを書きます。
2. .coffeeファイルをJavaScriptファイルにコンパイル
3. この書き出されたJavaScriptファイルは普通のJSファイルなので手書きのものと変わらず、ブラウザで動く

CoffeeScriptのトップページに.coffeeファイルとコンパイル後のファイルが比較して載っているので、
参考にしてみるといいかもしれないです。

それで、今Canvasタグを練習していたのだけれど、CoffeeScriptで書いてみたくなったので、今回はそのインストール方法について書きますです。

ちょっと話を脱線するとCanvas2Dで3Dをやるのはjsdoitで検索をかけてみたらもう1年ぐらい前に盛り上がっていたみたいですね。こんな感じ。
>> 変体
>> HTML5で3D その6(ドーナツ)

これを自分でも作ってみたいなと思っているところです。
あとCanvas3Dの本命はWebGLになると思うので、こっちが終わったら、
そっちの方も今度やってみたいと思っています。
>> Learning WebGL
>> Learning Three.js

インストールの続き

CoffeeScriptのページを見ると、インストールにはNode.jsとnpmが必要と書いてあります。
>> Node.js
>> npm

Node.jsはブラウザの外で動かすJavaScript実行環境です。Chromeのv8エンジンで動いているみたいです。
npmはNode Package Managerの略で、Nodeを使ったツール(例えば今回のCoffeeScriptとか)をインストールときに依存関係のあるデータなどを自動で管理してくれるものです。これがあると、自分でライブラリを個別にインストールしたりしなくてもよいので楽になると思う。

で、さっきみたら、Node.jsのmac用のインストーラを使うとNode.jsとnpmがもれなくインストールされます。

coffee_install2

インストールが終わったら、ターミナルを起動して、バージョンを確認すれば、
インストールされていることが確認できると思います。

node -v
npm -v

それぞれ私の環境tだと、v0.6.6と1.1.0-beta-4と出力されました。
これでCoffeeScriptのインストールの準備が整ったので、
ターミナルで次のコマンドを入力。

sudo npm install -g coffee-script

パスワードを入力するように求められるので、アカウントのパスワードを入力すれば
あとは、自動でCofeeScriptのインストールが完了します。

ターミナル上でこう入力すると

coffee -v

CoffeeScript version 1.1.3と出力されました。
試しに、コンパイルしてみます。

test.coffee という名前のファイルにこう書きます。

square = (x) -> x * x

そのファイルのあるディレクトリにターミナルで移動して、以下を入力します。
ディレクトリパスを入れるのが面倒なときは、ツールを使ったり、フォルダをそのままターミナルにドラッグドロップすると便利です。

cd ディレクトリパス
coffee -c test.coffee

うまくいくとtest.jsというファイルが出力されます。

test.js

(function() {
  var square;

  square = function(x) {
    return x * x;
  };

}).call(this);

それで、jsとかhtmlはAptanaを気に入っているので、こっちでやるときの豆知識。
(ターミナル上のemacsを使ってファイルを書いて、戻ってコンパイルというのは良さそうなのですが、個人的にはemacsが使いこなせないのです。でも、キーバインドはemacsにしている。)

Aptana画面左上の部分にターミナルボタンがあるので、それを押すと、ターミナルがAptanaの画面の中に表示されます。

coffee_install3

coffee_install4

そうすると、編集中のファイルのディレクトリをカレントにしたターミナルが立ち上がり、普通に使えるようになります。
だから、Aptana上で編集して、Aptanaの中のターミナルでコンパイルできると。
おー、便利。

今回のエントリはこのAptana内部のターミナル機能に萌えーっとしたので、書きました。

※追記
-wを使うと便利みたい。ファイルが保存された時点で、勝手にコンパイルしてくれるという。どうもです。
>> CoffeeScript マジ Coffee でかわいい – glasses factory

こんな感じに書く。

coffee -w -c test.coffee

そしたら、保存するたびに、自動でコンパイルしてくれちゃうよ。
やめたくなったらControl+cだよ。


自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る