Rails 3.1 と CoffeeScript で HelloWorld 的な何か


この記事の所要時間: 243

Node.js のインストールがまだな人は事前に入れてください。

Rails 3.1 を使うときに出たエラー | MyNotebook

ひな形を作成する

ビューの編集 app/views/projects/index.html.erb

ボタンクリックされたらアラートが出る仕様とします。以下はお馴染みのコードですね。

CoffeeScript を書く app/assets/javascripts/projects.js.coffee

いよいよ CoffeeScript を書きます。以下はボタンがクリックされたら 4 の 2 乗の値をアラートで表示するサンプルです。

動作確認

rails server したあと http://localhost:3000/projects/index にアクセスします。

ボタンをクリックして 16 がアラートで表示されれば成功です。^^
ちなみにさっきの CoffeeScript のコンパイル結果は以下のようになります。

(function() {
  var square, square4;
  square = function(x) {
    return x * x;
  };
  square4 = function() {
    return alert(square(4));
  };
  $(function() {
    return $("#click_here_button").click(function() {
      return square4();
    });
  });
}).call(this);

まとめ

今回は Rails 3.1 でデフォルトに採用された jQuery, CoffeeScript を合わせて使ってみました。jQuery で JavaScript コードを HTML から排除し、CoffeeScript を使用することで簡潔にスクリプトを書くことができました。Ruby や Python ライクなので知っている人は覚えるのも速いと思います。もちろんこれらの機能は無効にできます。

因みに、Rails はデフォルトで development モードで自動的に CoffeeScript に変換して結果を返却し、production モードではアセットが圧縮、コンパイル済みのものが静的に配置されます。

Rails はこれからもどんどんその時その時に合ったベストプラクティスを示し続けるでしょう。その波にのるかどうかは開発者に任せられています。

詳細は参考文献を見てください。

参考

投稿者紹介

株式会社ユニキャスト
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。

人気の記事

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP