おもしろwebサービス開発日記

Ruby や Rails を中心に、web技術について書いています

edge rails(Rails 3.1)の新機能を調べてみる

Rails 3.1 の機能がもう試せるらしいので、下記のエントリを参考にしつつ試してみました。

How to Play with Rails 3.1, CoffeeScript and All That Jazz Right Now

edge な rails アプリの作成

rvm でインストールしたての(gemのはいってない) Ruby 1.9.2 を使って試しました。 まずは github から railsリポジトリを取得して、ワーキングディレクトリに含まれる rails コマンドを--edgeオプションを付けて実行します。--edge オプションを指定すると、railsgithub リポジトリ上の最新のコードから Rails アプリを作成します。

cd ~/work/github/
git clone git://github.com/rails/rails.git
~/work/github/rails/bin/rails new yourapp --edge

そしたらエラー。

You don't have i18n installed in your application. Please add it to your Gemfile and run bundle install

これからrailsアプリ作るのに Gemfile も bundle install もやりようがないので、普通に gem install で i18n をインストール

gem install i18n

でもう一度。でもまだダメ

Thor is not available.
If you ran this command from a git checkout of Rails, please make sure thor is installed,
and run this command as `ruby /Users/maeshima/work/github/rails/bin/rails yourapp --edge --dev`

今度はthorが入っていないのが原因。

gem install thor

でもう一度・・・まだダメ。

/Users/maeshima/.rvm/gems/ruby-1.9.2-p180@global/gems/bundler-1.0.0.rc.5/lib/bundler/ui.rb:46:in `<class:UI>': uninitialized constant Gem::SilentUI (NameError)

今度は bundler まわりでエラー。bundler が古いので1.0.12にアップデート。

gem update bundler

これでようやく edge な rails アプリが作れました。--edge オプションの指定により、自動で github からもりもり edge な gem がインストールされていきます。

edge な rails を眺める

Rails 3.1 から始まる CoffeeScript と sass 対応のために、javascriptcss を置くディレクトリが変わっていました。それぞれ js 用には

  • app/assets/javascripts
  • vendor/assets/javascripts

css用には

  • app/assets/stylesheets
  • vendor/assets/stylesheets

というディレクトリが新しく作られています。デフォルトでは

  • app/assets/javascripts/application.js
  • vendor/assets/javascripts/jquery.js
  • vendor/assets/javascripts/jquery_ujs.js

のようなファイルが用意されている*1ことから推測すると、

app/assets/javascripts
ユーザが編集したjsファイルを置く
vendor/assets/javascripts
ライブラリ系のjsファイルを置く

というようなディレクトリの使い分けを意識しているのではないでしょうか。

sprockets

上記で書いたような js や css まわりの変更は、Gemfileで新しく指定されるようになった sprocketsというライブラリが関係しているようです。ちなみに、sprocketは「自転車のチェーンとかみ合う鎖車」という意味です。

sprocketsは、下記の機能を持ったrackベースのプラグインのようです。

  • 複数のjsファイルやcssファイルを一つに結合する機能
  • CoffeeScript, Less, Sass, SCSSをコンパイル
  • ドキュメントルート以外に置かれているファイルを配信する

sprockets の機能 js 編

app/assets/javascripts/application.js には下記のようなコードが書かれていました。

//= require jquery
//= require jquery_ujs
//= require_tree .

この "//=" というのは、sprockets のディレクティブ宣言用のおまじないです。続く require ディレクティブによって、結合する javascript の名前を指定しています。require ディレクティブが探すのは下記の二箇所なようです。

  • app/assets/javascripts
  • vendor/assets/javascripts

require_tree ディレクティブは、指定したディレクトリのファイルを全部 require するというディレクティブです。指定したディレクトリの下の階層のディレクトリも再帰的に読み込みます。


view ファイルで

<%= javascript_include_tag "application" %>

のようにすると、/assets/application.js を読み込みます。/assets/application.js へのリクエストが投げられると、

  1. app/assets/javascripts/application.js が読まれる
  2. ディレクティブが解釈される
  3. vendor/assets/javascripts/jquery.js, vendor/assets/javascripts/jquery_ujs.js, app/assets/javascripts 配下の他のjsファイルが(もしあれば)連結されて返される

という流れで、一つの /assets/application.js ファイルの中に複数の js が詰め込まれる形でレスポンスが返ります。

CoffeeScriptも簡単に扱うことが出来ます。.coffee という拡張子CoffeeScript を書いて require すると、自動で js にコンパイルされて他の js ファイルと同じように連結されます。手動でコンパイルしなくていいのは楽ですね。

sprockets の機能 css

基本的にjsとぼぼ同じ感じです。sassを使いたい場合は.scssという拡張子を付けると、CoffeeScriptと同じく自動でコンパイルされます。これも便利ですね。

感想

3.1になってますます綺麗なコードでアプリを書けるようになったように思います。ただ、初心者への敷居もどんどん上がっているような気も。

あとsprocketsはまだ便利機能を隠している気がするので、また別の機会に調べようと思います。

*1:3.1からデフォルトのjsライブラリはjqueryになりました