すでに動いているRailsアプリケーションにReact.jsを実践投入する http://qiita.com/khrtz/items/a43d58cad54af2425ced

1. The First React on Rails
2016/2/19 @khrtz
1

2. 伊藤晃平
2
職業 Web Engineer
業務内容は主にグロースハックとかフロントエンド
UI作ったり、ABテストしたり、Ruby書いたり、RailsのView作ったり
Twitter @khrtz
自己紹介
アイコンと名前はころころ変わる
Webサービスを運営している会社に所属
雑兵meetup参加は2回目でLT2回目

3. 今回の内容
3
RailsにReactを導入するまでの記事はたくさんある
やってみた記事はたくさん溢れているけど、実際に運用してみた情報
があまりないのでまとめてみた
現在運用しているRailsアプリケーションにReact.jsを導入してみたの
で、溜まった知見を少し
実際に運用しているコードを参考に説明していきます
React.js
JUST THE UI VirtualDOM DATA FLOW

4. JS Frameworkを導入した理由
4
スマホのEC購入って使いづらいという意識を変えたい
Webページからの脱却
jQueryが複雑。もう再利用できない状態で管理もできていない。泣き
ながら書いてる

5. Reactにした理由
5
・Viewレイヤーだけ扱う
・サーバーサイドレンダリングに対応(SEOのため、ユーザーを待たせたくない場面
)
・Adminの管理画面についてAngular2.0(今は時期が悪い)、Ember.jsなど
検討中(今はjQuery)
・書きたいから
・フレームワークのなかでも安定している
・腐ったらすぐ捨てられるし、気楽に入れた
・エンドユーザー向けページにおいて、データを渡せば描画できるReact
一択

6. 6
運用しているRailsアプリケーションにReact.jsを導入するにあたって
・SPA化は諦める
・とりあえずRubyで出力しているHTMLを
JavaScriptで書き換えることを考える
・Fluxは使わない
・Railsがある程度わかってないと苦しい
・react-railsを使う
・ReactRouterを無理に導入しようとしない

7. 7
運営しているサービスのデザインをリニューアルするついでにReactにし
た
実験のためとりあえずスマホサイトだけ(7割くらいはReactに書き換えた)
問題は特に起こってない。PCでもReact読み込ませているんだけどエ
ラーは見られない(polyfillはいれてる)
まだES2015の機能しか使ってない
in progress
ページングもまだ未実装
簡単なstatelessくらいしかしてない
ほとんどjQuery書かなくて済んだのは良かった

8. 8
ルートディレクトリに/clientを作り、client/react-
client/src/component/*.js のようなコンポーネント群を作っていく
client/react-client/src/ClientGlobal.jsをエンドポイントとして、グローバル変数
を管理
import Items from ‘./comnents/items.js’
import CommentPage from './container/CommentPage'
window.Items = Item
window.CommentPage = CommentPage
React

9. 9
gulp.task('compile-es6', function() {
var files;
files = glob.sync('./client/react-client/src/ClientGlobal.js');
return browserify({entries: files, debug: true})
.transform('babelify')
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('app/assets/javascripts/components'));
});
import CommentPage from './container/CommentPage'
window.CommentPage = CommentPage
ClientGlobal.js
gulpfile.js

10. 10
react-client/src/container/CommentPage.js
import React from 'react'
import Comment from '../components/comment.js'
export default class CommentPage extends React.Component {
render () {
var commentsNodes = this.props.comments.map(( comment, i) => {
return(<Comment comment={comment} key={i}></Comment>)
}.bind(this));
return (
<div>
{commentsNodes}
</div>
);
}
}

11. 11
react-client/src/components/Comment.js
import React from ‘react'
export default class Comment extends React.Component {
render() {
return(
<section className="comment Project-cheer">
<h1 className="u-d_none">コメント</h1>
<article className="Project-cheer__comment Media">
<div className="Project-cheer__comment-img Media__img">
<img className="Project-cheer__comment-img-prop"
src={this.props.comment.profile_image} width="20" height="20"
alt={this.props.comment.user.name} />
</div>
<div className="Project-cheer__comment-main Media__body">
<header className="Project-cheer__comment-header u-clrfix">
<h1 className="Project-cheer__comment-name u-d_ib"><b className="u-
em">{this.props.comment.user.name}</b>さん</h1>
<time className="Project-cheer__comment-date">{this.props.comment.days}</time>
</header>
<div className="Project-cheer__comment-body">
<p>{this.props.comment.body}</p>
</div>
</div>
</article>
</section>
);

12. <%= react_component(‘CommentPage', render(template:
'/projects/comments.json.jbuilder'), {prerender: false}) %>
12
comments_smart_phone.html.erb
json.comments do
json.partial! partial: 'comments', collection: @items, as: :item
end
comments.json.jbuilder

13. _comment.json.jbuilder
13
json.cache! [item], expires_in: 1.hours do
json.days item.reserved_at.strftime('%Y年%m月%d日')
if item.user.is_deleted?
nil
else
json.user_link user_path(item.user)
end
json.profile_image asset_url item.user.my_image_url
json.user item.user, :name
if item.comment.present?
json.body item.comment
else
json.body "頑張ってください！！"
end
end
partial

14. _comment.json.jbuilder
14
json.comments do
json.partial! partial: 'comments', collection: @orders, as: :order
end

15. 15
DHH Say

16. 16

17. 17
Rails 5 feature
ActionCable
リアルタイム通信を標準で装備
React × ActionCableを使ったリアルタイムチャットアプリ、Twitter
みたいな通知機能などを搭載したサービスが増える
Turbolinks3
部分的な更新ができるように
やってることは大体React
RailsAPI
バックエンドとReactを切り離した Rails + React + FluxのSPAアプリが
作りやすく
rails-apiが標準搭載

18. 18
React導入してみて
土台を作ってからは、React、ES6書くの楽しい。
statelessなコンポーネントをたくさん作っていきたい
でも…

19. 墓場にならないように、ここから抜けだしてやる
という強い意思が必要
19
Railsはフロントエンドエンジニアにとっての牢獄

20. ありがとうございました
20
Enjoy! JavaScript