react-rails を導入してみました
RailsでWebページのレスポンスや、ユーザビリティ（最近はUXとういうキーワードを使った方がかっこいい感じですが）の改善のため、一部のデータを書き換える方式を導入することも多くなっているかと思います。
一旦ページ表示し、マウスやキーボードのイベントを取得してAjax通信を行う場合はとくに問題ないのですが、初期表示用のデータ取得のため、ページをロードした直後にAjaxリクエストを送信したいということがあるかと思います。
このような場合にはRailsのViewのファイルに script タグを書いてリクエストを送信処理を呼び出すのが一般的?でしょうか。
Reactはビューの部分のフレームワークであり、サーバとのAjax通信部分はピュアなJavaScriptで記述するか、jQueryのajax関数を使うケースが多いかと思います。ただ、RailsのビューのファイルにJavaScriptを記述しなければならないのってなんとなく違和感ありませんか？
オープンソースの世界では困ったことがあっても調べてみると何らかの解決策が見つかりますよね。
ReactをRailsで利用しやすくするためのgemも既に公開されていました。
react-rails
です。
このgemを導入することによって、erbファイルが少しすっきりします。
導入方法
導入については、react-railsのGitHubのページに記載されている通りです。
- Gemfile
gem 'react-rails', '~> 1.0'bundle update を実行します。
続いて
rails g react:install
を実行すると、app/assets/javasripts/components.js
が生成されます。
application.jsも更新します。
- application.js
//= require react
//= require components
//= require react_ujs※更新 >>>>>>>>>>>>
//= require components の位置が //= require react_ujs より上でないと作成したコンポーネントを認識してもらえませんでした。（ドキュメントと違う？）
それから、ドキュメントではインストールコマンドでapplication.jsが更新されるはずらしいのですが、再度試しても更新されませんでした。
コンソールには更新ログが出ていますが・・・
2015-07-10 update
<<<<<<<<<<<<
設定ファイルも一部更新します。（development環境のみ記載します）
- config/environments/development.rb
AppName::Application.configure do
config.react.variant = :development
endこれで、ひとまず準備完了だと思います。
Viewへの反映
react-railsを導入するとヘルパーメソッド react_component が利用できるようになります。
Reactのコンポーネントを利用したい場所に下記のように追記すればいいでしょう。 プロパティも設定できます。下記の例ではラベルとイベントハンドラを記述しています。
<%= react_component('FormatCheckBox', label: 'Markdown', onChange: 'handleChange') %>Reactコンポーネント(JavaScript)をjs.jsx形式で作成した場合、グローバルで利用できるようにしておく必要があります。
(function() {
$(function() {
"use strict";
:
var FormatCheckBox = React.createClass({
:
});
:
window.FormatCheckBox = FormatCheckBox;
});
}).call(this);ざっとこんな感じで簡単にgemを導入できました。gemの副作用が出てくるかどうか十分に試せていませんが、ヘルパーメソッド react_component にプロパティをセットできますので今のところ全く問題なく利用できています。
