今更ですが、CoffeeScript をかまってみた。

9468 ワード
CoffeeScript jQuery CoffeeScript テキストリンク

とりあえず書き方など

ずいぶんラフな書き方ができる、といろんなサイトに書いてあります（嘘です）が、今ひとつイメージできないので、公式サイトにある CoffeeScript -> JavaScript 変換ページで確認しながら見てみます。
CoffeeScript公式 -> TRY COFFEESCRIPT のタブで確認します。

詳しいことなどは、ここ とか ここ などにありますので、参照してください。

今回のポイント

今までは、クラスを定義してそれを利用していました。その資産をなるべく変更せずに使いたいなぁと思います。
ちなみに各クラスはそれぞれ独立したファイルに保存してあります。
例）hoge.js tara.js

書き方（ざっくり）

Rubyライクとかっていうお話ですが、ガッツリ JavaSript な印象ですw
※まだ触ったばっかりなので。。。

インデントが重要な役割をしています。
関数とか条件式とかそういうのの中身？はインデントで認識してるらしいので、気をつけましょう。
それから、基本的には値を返すので、返さない（若しくは返さなくても良い）ものは最後に空の return 行を追加します。

それから、ライン終端の ; は基本いらないので気をつけようw
jQuery も普通に使えます。

class定義

class Hoge
  hello: () ->
    alert("Hello world!")
    return

(function() {

  var Hoge;

  Hoge = (function() {
    function Hoge() {}

    Hoge.prototype.hello = function() {
      alert("Hello world!");
    };

    return Hoge;
  })();

}).call(this);

※ちなみに 公式サイトのインタプリタでは変換後の (function(){ ... }).call(this); は隠れて見えないようです。
どうやらここがポイントらしく、これは 即時関数 と呼ばれているようです。
これに囲まれると、中身はすべてローカル扱い、ということで、ライブラリを扱うときは注意が必要とのことです。

解決方法としては、CoffeeScript の最後に

class Hoge
  hello: () ->
    alert("Hello world!")
    return

window.Hoge = Hoge

とすると良いようです。windowクラスはグローバルなので、それに登録して利用する、ということのようです。

あと、クラス名の前に @ を付けてもいいらしい。

class @Hoge

これでも大丈夫です。

(function() {
  this.Hoge = (function(){ ... })();
}).call(this);

となって、window.Hoge = Hoge とほぼ同じことになります。。。たぶんw

function定義

関数の定義の仕方も簡潔になっています、

calculate_age: (birth_year, name) ->
  if name is 'yukari'
    age = 17
  else
    date = new Date()
    nowyear = date.getYear() + 1900
    age = nowyear - birth_year

  return age

(function() {

  ({
    calculate_age: function(birth_year, name) {
      var age, date, nowyear;
      if (name === 'yukari') {
        age = 17;
      } else {
        date = new Date();
        nowyear = date.getYear() + 1900;
        age = nowyear - birth_year;
      }
      return age;
    }
   });

}).call(this)

まあこんな感じ。
ポイントは -> が function() ということです。
これは例えば jQuery などを使うときも同じです。

  $.post(target_url, data_hash,
    (html) ->
      $("#show_html").html(html)
      return
  )

です。

その他

条件式とかでなんか ？ とか使えたりとかするらしいです
あと == は使えないとか。

でも細かいところはそれくらいかな。
インデントが気になるところですが、それくらいなので、過去の資産を移植するのは意外と楽かもです。

あと、グローバルで使いたい場合はトップの方で

<head>
  <script type="text/javascript">
    var h = new Hoge();
  </script>
</head>

ってしておくと良いでしょう。

単純キュー
Acdream 1670数一のアイドル2(ACdreamer javaスペシャル)