ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから

ReactをRailsとどっぷり使ってみた話と、 フロントエンド×AWSのこれから

Presented by BEST10 Inc.

1

2015/11/12 村田佑介

2

自己紹介

BEST10 Inc. CTO 村田佑介

@muratayusuke

http://muratayusuke.com

京都大学経済学部 ↓

楽天の人事（新卒採用） ↓

楽天のエンジニア ↓

BEST10株式会社CTO

略歴

3

自己紹介

スタンディングデスク派

4

行きつけグルメアプリ BEST10

5

MagicMovie for Instagram

6

旅行系サービス

？

7

旅行系サービス

•React •Rails •Coffeescript •Jade •Browserify •Gulp

8

React

•これなに？ “A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES” →　View用のjavascriptライブラリ https://facebook.github.io/react/

9

React導入の経緯

•JSで細かいことし出すとjQueryがどんどんしんどくなる •サーバー構築秘伝のタレ→chefと同じように、jQueryでゴリゴリ操作→Reactに変えることで状態を管理することなく宣言的にDOMが作れる！ →大きめのJSのメンテがしやすくなりそう！

※参考：伊藤直也氏が語る、モダンなWebテクノロジーに共通する傾向とは？ http://www.publickey1.jp/blog/15/qcon_tokyo_2015_1.html

10

React導入にあたって考えたこと

•バックエンド（Rails）とモノリシックに作る？ソース分ける？ •React部分的に使う？まるっと使っちゃう？ •flux使う？ •asset pipelineはどこまで使う？ •サーバーサイドレンダリングどうする？

11

React導入にあたって考えたこと

•バックエンド（Rails）とモノリシックに作る？ソース分ける？ →　デプロイめんどいし、どうせバックエンドと連動するのでソースもコミットも一緒にしよう。どうしても分けたくなったら考えよう。

12

React導入にあたって考えたこと

•React部分的に使う？まるっと使っちゃう？ →　部分的に始めて後から拡張すんのめんどそうやから最初からまるっとReactで書いちゃおう。テンプレートはjsx気持ち悪いからjadeでがんばってみよう。

※参考：React.jsをCoffeeScriptとjadeで書く https://uzimith.github.io/2015/02/13/react-jade-coffee/

13

React導入にあたって考えたこと

•flux使う？ →　とりあえず使ってみよう。 →　やっぱstoreとかdispatcherとかいちいちファイル増やすのめんどい。flux使わずに1ページ1ファイルでsetStateでがんばってみよう。storeとかactionとか分けたくなったら考えよう。

※参考：React.jsとFlux http://qiita.com/koba04/items/b32ba449d753fdb2b597

14

React導入にあたって考えたこと

•asset pipelineはどこまで使う？componentのファイル達は全部application.jsで結合しちゃう？それともgulpでビルドしたファイルだけapplication.jsに書く？ →　gulp全然慣れてないしとりあえずまるっとapplication.jsでつないじゃおう。 →　やっぱり他のnpmモジュール使い出すとこんがらがってくるからgulpでビルドした1ファイルだけapplication.jsに書こう。

15

React導入にあたって考えたこと

•サーバーサイドレンダリングどうする？ →　react-railsでサーバーサイドもreactで描画しよう。

※参考：react-railsでサーバーサイドレンダリングしつつクライアントでsetStateできて最高になった http://qiita.com/mizchi/items/c34c3ff88d73a7bd2c88

16

React周りの構成

routes.rb

controller

view(.haml)

リクエスト

Rails

component(.coffee)

template(.jade)

React

= react_component('T.Home', {}, prerender: true)

17

フロントエンド×AWSの今後

http://www.slideshare.net/keisuke69/ss-52562743

フロントエンド×AWSの今後

http://www.slideshare.net/keisuke69/ss-52562743

18

フロントエンド×AWSの今後

•サーバーサイドレンダリングって必要？ •Google botにクロールしてもらう必要ある？ →　必要ないならサーバーサイドレンダリングいらない •というかGoogle botはもうJS実行した状態で動いてる？ →　もしそうならサーバーサイドレンダリングいらない

→　サーバーサイドレンダリングいらなければ、サーバーレスアーキテクチャーありかも

19

20

Contact

BEST10 Inc. CTO 村田佑介

@muratayusuke

http://muratayusuke.com