Program LOG

勉強した内容をまとめ中。。。間違ってたら教えて。。。

今さら聞けないcoffeescript入門

CoffeeScript

Sassに関しては、今までいじってきた事があったのですが、
CoffeeScriptに関しては皆無状態・・・ｗ
なんとな～くSassっぽくJavaScriptを書けるって事くらいしか知識がありません。
それすらもあっているのどうか・・・？ｗ
って事で今回は、Gruntを導入したので、せっかくだから、Coffeeも勉強していきたいと思います。
実際には、jQueryを使いたいんで、上手く組み込めるのか？も合わせて勉強したいと思います。

参考にしたサイト

CoffeeScript入門 (全13回) - プログラミングならドットインストール
CoffeeScriptとjQueryの実例 - Railsドキュメント
CoffeeScript入門 - プログラムdeタマゴ

そもそもCoffeeScriptって何？

色んなサイトを見ると、一番多い説明として、
「JavaScriptのコードを生成（変換）する為の便利なrubyライクなスクリプト言語」
JavaScriptに比べると3分の１くらいのボリューム感で記述が可能らしいです。
自動的にコンパイルする手段がいくつもあるので、手間無く導入する事が可能みたいです。
また、調べると、jQueryとの共存が可能らしい！これはいい情報です。

CoffeeScriptのインストール

CoffeeScriptはNodejsで作られているため、Nodeをインストールしておいて下さい。
これは、前回までにやっているので、ここでは説明をはぶきます。
またもやNode・・・Windows＋Cygwinユーザーだとしんどいｗ
今回はコマンドプロンプトで以下のように実行します。

$ npm install -g coffee-script

Nodeのインストールが終わっていれば、これだけでインストールは完了です！
一応正常にインストール出来ているかバージョンを確認してみましょう！

$ coffee -v
CoffeeScript version 1.7.1

コンパイルしてみよう。

まずは、テスト的に「hello.coffee」ってファイルを作成します。
そのファイルに、以下のような一行を書いてみましょう！

alert "hello world!"

作成が完了したら、以下のコマンドを実行します。

$ coffee -c hello.coffee

エラーが帰ってこない場合は、問題なく「hello.js」というファイルが生成されているはずです。
変換後の内容を確認したいと思います。

// Generated by CoffeeScript 1.7.1
(function() {
  alert("hello world!");

}).call(this);

とまぁ、非常に簡単でしたねｗ

これだけじゃ、つまらないので、どんな所が便利なのか、
簡単な構文を元に書いてみたいと思います。
といっても、Javascriptをそんなに使って開発する事が最近無いので、
もっと実践的に使いたいって事で、jQueryを書いてみたいと思います。

CoffeeScriptでjQuery！

表題のとおり、CoffeeScriptでjQueryを使ってみたいと思います。
まずは、普通によくあるような構文をjQueryで書いてみたいと思います。

普通に書いたjQuery構文

$(function(){
    //jQuery Start!
    $name = $("#name").val();
    $('#btn').click(function(){
        alert ("こんにちは"+name+"です");    
    });
});

まぁ、普通にこんなのはありますよね？
coffeeで書くと以下のようになります。

$ ->
    # jQuery Start!
    var name = $("#name").val()
    $('#btn').click ->
        alert "こんにちは#{name}です！"

コンパイルすると、以下のように出力されます。

// Generated by CoffeeScript 1.7.1
(function() {
  $(function() {
    var name;
    name = $("#name").val();
    return $('#btn').click(function() {
      return alert("こんにちは" + name + "です！");
    });
  });

}).call(this);

だいぶスッキリ書けるのが分かってきました！
基本的な構文は一緒なので、慣れてしまえば問題なく入れそうな気がします。
構文に関しては、railsのサイトに提供されていたり、ドットインストールを参考にしてもらえれば
簡単に分かると思います。
Rubyで採用されていたので、簡略的に記述できるのはなんとなくわかっていましたが、
varがいらないとか、インデント構文になっていたりと非常に簡略的になりますね！

さて、Coffeeを導入したら、ますますWindows+Cygwinユーザーには、
Nodejsの存在が微妙にうざくなってきましたｗ
Cygwinで動作しないので、gruntjsで自動コンパイルを行う為に、
コマンドプロンプトを常時起動しておかないといけない・・・。

やっぱり、vagrantでgruntの実行環境を用意した方がいいんかなぁ・・・？ｗ
基本的に、PHPプログラマーだったから、こんな悩みなんて無かったんだがｗ

phpの開発環境を作成するChefを作成しましたが、
Sass+Compass+Coffee+Grunt環境を一発作成するChefを書いてしまって、
プロビジョニングで、自動的に監視コンパイルしてくれる状況にしてしまえばいいかも・・・。

次回作成してみたいと思います！

使用環境