Ruby on Rails への組み込み（2）

前回に引き続き、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

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

---

続いて、テキストエディタで 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) { ...} と（ほぼ）同等です。

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

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

---

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