AWS Startup Tech Meetup #008 発表資料

1. ReactをRailsとどっぷり使ってみた話と、
フロントエンド AWSのこれから
Presented by BEST10 Inc.
1
2015/11/12 村田佑介

2. 2
自己紹介
BEST10 Inc. CTO 村田佑介
@muratayusuke
http://muratayusuke.com
京都大学経済学部
↓
楽天の人事（新卒採用）
↓
楽天のエンジニア
↓
BEST10株式会社CTO
略歴

3. 3
自己紹介
スタンディングデスク派

4. 4
行きつけグルメアプリ BEST10

5. 5
MagicMovie for Instagram

6. 6
旅行系サービス
？

7. 7
旅行系サービス
•React
•Rails
•Coffeescript
•Jade
•Browserify
•Gulp

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

9. 9
React導入の経緯
•JSで細かいことし出すとjQueryがどんどんしんどくなる
•サーバー構築秘伝のタレ→chefと同じように、jQueryでゴリゴ
リ操作→Reactに変えることで状態を管理することなく宣言的に
DOMが作れる！
→大きめのJSのメンテがしやすくなりそう！
※参考：伊藤直也氏が語る、モダンなWebテクノロジーに共通する傾向とは？
http://www.publickey1.jp/blog/15/qcon_tokyo_2015_1.html

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

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

12. 12
React導入にあたって考えたこと
•React部分的に使う？まるっと使っちゃう？
→ 部分的に始めて後から拡張すんのめんどそうやから最初から
まるっとReactで書いちゃおう。テンプレートはjsx気持ち悪い
からjadeでがんばってみよう。
※参考：React.jsをCoffeeScriptとjadeで書く
https://uzimith.github.io/2015/02/13/react-jade-coffee/

13. 13
React導入にあたって考えたこと
•flux使う？
→ とりあえず使ってみよう。
→ やっぱstoreとかdispatcherとかいちいちファイル増やすの
めんどい。flux使わずに1ページ1ファイルでsetStateでがんばっ
てみよう。storeとかactionとか分けたくなったら考えよう。
※参考：React.jsとFlux
http://qiita.com/koba04/items/b32ba449d753fdb2b597

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

15. 15
React導入にあたって考えたこと
•サーバーサイドレンダリングどうする？
→ react-railsでサーバーサイドもreactで描画しよう。
※参考：react-railsでサーバーサイドレンダリングしつつクライアントでsetStateできて最高
になった
http://qiita.com/mizchi/items/c34c3ff88d73a7bd2c88

16. 16
React周りの構成
routes.rb
controller
view(.haml)
リクエスト
Rails
component(.coffee)
template(.jade)
React
= react_component('T.Home', {}, prerender: true)

17. 17
フロントエンド AWSの今後
http://www.slideshare.net/keisuke69/ss-52562743

18. フロントエンド AWSの今後
http://www.slideshare.net/keisuke69/ss-52562743
18

19. フロントエンド AWSの今後
•サーバーサイドレンダリングって必要？
•Google botにクロールしてもらう必要ある？
→ 必要ないならサーバーサイドレンダリングいらない
•というかGoogle botはもうJS実行した状態で動いてる？
→ もしそうならサーバーサイドレンダリングいらない
→ サーバーサイドレンダリングいらなければ、サーバーレスアー
キテクチャーありかも
19

20. 20
Contact
BEST10 Inc. CTO 村田佑介
@muratayusuke
http://muratayusuke.com