Rails 3.1 と CoffeeScript で HelloWorld 的な何か

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

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

ひな形を作成する

$ rails new sample
$ cd sample/
$ rails g controller projects
/usr/local/rvm/gems/ruby-1.9.2-p180@rails-3.1.0/gems/rack-1.3.4/lib/rack/backports/uri/common_192.rb:53: warning: already initialized constant WFKV_
      create  app/controllers/projects_controller.rb
      invoke  erb
      create    app/views/projects
      invoke  test_unit
      create    test/functional/projects_controller_test.rb
      invoke  helper
      create    app/helpers/projects_helper.rb
      invoke    test_unit
      create      test/unit/helpers/projects_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/projects.js.coffee
      invoke    scss
      create      app/assets/stylesheets/projects.css.scss

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

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

$ vi app/views/projects/index.html.erb
<h1>Projects#index</h1>
<p>Find me in app/views/projects/index.html.erb</p>
<input id="click_here_button" type="button" value="Click here" />

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

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

$ vi app/assets/javascripts/projects.js.coffee
square = (x) -> x * x
square4 = ->
        alert square(4)
$(->
        $("#click_here_button").click(-> square4())
)

動作確認

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

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

参考

• 今日から始めるCoffeeScript | tech.kayac.com – KAYAC engineers’ blog
• Ruby on Rails Guides: Asset Pipeline

投稿者紹介

株式会社ユニキャスト

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

最近のエントリ

• レポート2019.10.28ユニキャストレストランを開催しました🍳
• レポート2019.08.29社内研修ワークショップ～マシュマロ・チャレンジ～
• レポート2019.08.06Computex/InnoVEX　出展者・通訳として参加してきました。
• レポート2018.06.12Computex 2018 レポート