The First React on Rails

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

The First React on Rails

Kohei Ito

The First React on Rails