Ruby on Rails への組み込み(2)

2015/06/02

前回に引き続き、Cape.JS を Ruby on Rails に組み込む手順を解説していきます。


Rails アプリケーションの開発を始める前に、もうひとつ「下ごしらえ」をしておきましょう。テキストエディタで config/application.rb を開き、次のように修正します。

    # (1-23行省略)
    config.active_record.raise_in_transactional_callbacks = true

    config.generators do |g|
      g.helper false
      g.assets false
      g.skip_routes true
      g.test_framework false
    end
  end
end

この修正により(筆者の考えでは)余計なファイルの生成や書き換えが抑制されます。

bin/rails g コマンドでコントローラを生成したときに、ヘルパーモジュール、スタイルシート、JavaScript ファイルなどが作られないように、また config/routes.rb が書き換えられないようにしています。そして、今回はテストを書かない(省略する)ので、g.test_framework false を指定して、テストスクリプトのひな形が自動生成されないようにしています。


続いて、テキストエディタで config/routes.rb を開き、コメント行(# で始まる行)をすべて取り除いてから、次のように修正します。

Rails.application.routes.draw do
  root 'top#index'
end

そして、ターミナルで次のコマンドを実行します。

$ bin/rails g controller top index

テキストエディタで app/views/top/index.html.erb を開き、次のように書き換えます。

<div class="container">
  <div class="page-header">
    <h1>
      <i class="fa fa-list"></i> TODO LIST
      <small>Cape.JS Demo on Rails</small>
    </h1>
  </div>

  <div class="page-body" id="todo-list"></div>
</div>

<script>
var app = new TodoList();
app.mount('todo-list');
</script>

ここで、いったん動作確認をしましょう。ターミナルで次のコマンドを実行し、Rails アプリケーションを起動します。

$ bin/rails s

ブラウザで http://localhost:3000 を開き、次のような画面が表示されれば OK です。

画面キャプチャ


さて、ここからが佳境です。

app/assets/javascripts ディレクトリに新規ファイル todo_list.es6 を作成し、テキストエディタで次のように記入します。

class TodoList extends Cape.Component {
  render(m) {
    m.ul(m => {
      m.li(m => {
        m.label(m => {
          m.input({ type: 'checkbox' }).sp();
          m.span('猫のえさを買う。');
        });
      });
      m.li(m => {
        m.label(m => {
          m.input({ type: 'checkbox' }).sp();
          m.span('歯医者に行く。');
        });
      });
    });
  }
}

これは JavaScript のプログラムですが、ES6 (ECMAScript 6) のシンタックスを使っているため、慣れない方は戸惑うかもしれません。簡単に説明しておきましょう。

1行目の class TodoList extends Cape.Component では Cape.Component というクラスを継承して TodoList という新しいクラスを定義しています。

2行目の render() では render というメソッドを定義しています。

ソースコードの各所に現れる m => { ... } は「アロー関数」を定義する構文です。これは、function(m) { ...} と(ほぼ)同等です。

アロー関数は function キーワードで定義される伝統的な匿名関数よりも簡潔に書けるので、Cape.JS のように深いネスティングを多用するライブラリで特に効果を発揮します。アロー関数には this の値を「レキシカルに束縛する」というもうひとつの重要な側面があります。詳しくは、MDNのアロー関数の項を参照してください。

では、うまく動くかどうか試してみましょう。ブラウザをリロードして、次のような画面が表示されれば OK です。

画面キャプチャ

私たちはすでに Gem パッケージ sprockets-es6 を組み込んでいますので、拡張子 .es6 を持つファイルは自動的に伝統的な JavaScript のコードに変換され、ページに読み込まれます。


以上で、Cape.JS がうまく Rails アプリケーションに組み込まれました。次回は、データを用いてコンポーネントをレンダリングする方法について解説します。