Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RailsでReact.jsを動かしてみた話
~ Reactプラグインを動かしてみる~
1
自己紹介
ティーエム21 吉岡
ウェブサイト制作
2
今日のお話のターゲット
react 使ったことがある。もしくは仕事で使ってる人
3
は対象外ですΣ(・口・)
4
これからreactを触ってみたい人が対象です。
5
アジェンダ
Reactを学ぶきっかけ
フロントエンドフレームワークについて
なぜReact?
Reactを動かす環境について
HTMLにリンクを貼る
Webpack(npm)を使う
react‑rails(Gemで管理)を使う
Webpacke...
Reactを学ぶきっかけ
jQueryとturbolinksの相性が致命的に悪すぎる…
jQueryのコードがとっちらかってきた。
javascriptのフレームワークが流行ってる。
7
条件
基本はRailsで書く!(Rubyで書けるところはRubyで書きたい。)
フロント(UI)だけjavascriptで書きたい。
Rubyのコードとjavascriptのコードをうまく分離したい。
こういうやつ嫌い⇩
application...
javascriptフレームワークを考える
以下、検討してみました。
Vue.js
Riot.js
Angular.js
React.js
注)以下のレビューはあくまで個人的な主観です。
9
Vue.js
軽量だし、学習コストも低いし便利な機能もいろいろあるしjQueryとの
親和性も悪く無い。
タグに属性を追加して表示をコントロール。
最近新しいバージョンも出てきていい感じ!(コンポーネント対応)
10
<div id="example‐3">
  <button v‐on:click="say('hi')">Say hi</button>
  <button v‐on:click="say('what')">Say what</button>...
Riot.js
実はこれ一番好き。
コンポーネント内にCSS記述できるのが良い。
Rubyとjavascriptの分離が一番しやすそう。
絶賛開発中の匂いがプンプンする。
12
<html>
  <head>
    <title>Hello Riot.</title>
  </head>
  <body>
    <sample></sample>
    <script type="riot/tag" src="s...
Angular.js
うーん。動かして無いけど(ドキュメントチラ見しただけ)
ちょっと難しそう。
結構サーバサイドもnode.jsで書くやり方をよく見かけた。
14
React.js
悪く無いけど学習コストがそこそこ。でも、一番信頼性がありそうなプ
ロダクト。ご存知FBで使用されている。
15
なぜReact?
16
昨年末の出来事です
以下の情報が自分の耳に入ってきて。。。
rails5.1からjQueryが廃止されるらしい。
それで、webpackでフロント周りのパッケージ管理ができるように
なるらしい。
さらに、reactもデフォルトになるかも…
17
Reactを動かす環境について
HTMLにリンクを貼る
webpackを使う(npm)
react‑rails(RubyGem)
webpacker(Yarn+ RubyGem)
18
HTMLにリンクを貼る
一番オーソドックスな試し方。
19
まぁ、これでもいいけどリンク色々貼らないといけないので面倒。
<html>
<head>
  <title>React sample CDN</title>
  <script src="https://unpkg.com/react@15/d...
webpackを使う(npm)
とりあえず流行っているので使ってみる。
21
# ディレクトリ構成
webpack‐sample
├─ node_module
│  └─ (省略)
├─ public
│  ├─bundle.js
│  ├─bundle.js.map
│  └─index.html
├─ src
│  ...
色々なことができるみたいだけど、正直学習コスト高い気がする。
(npmから出直しておいで)
23
サンプルファイル
https://github.com/yoshiokaCB/webpack‑react‑sample
24
react‑rails(RubyGem)
javascriptのファイルを全てSproketsで管理。
/app/assets/javascript/commponents/
react‑railsはgemがファイルを管理してくれる。
パスの設...
/app/views/comments/index.html.erb
<h1>Comments#index</h1>
<p>Find me in app/views/comments/index.html.erb</p>
<%= react_c...
サンプルファイル
https://github.com/yoshiokaCB/react‑rails‑sample
参考サイト
https://github.com/reactjs/react‑rails
http://qiita.com/jo...
疑問
import, requireってできるんだっけ?
別ファイルに書いたコンポーネント読み込みたいんですが…
プラグインってどうやって使うの?
28
webpacker(Yarn+ RubyGem)
githubのrailsの中にwebpackerなるものが…
とりあえずwebpackerを動かしてみる。
注)webpack‑rails とは別のgemになりますのでご注意ください。
29
動かし方は先々週したので今日はしない。詳しくはここをみる。
http://qiita.com/yoshiokaCB/items/564ed0440f0428c0009a
github
https://github.com/rails/webpa...
良いこと
Rails用の初期設定ファイルを書き出してくれる。
Railsとの相性が良い。webpackをとりあえず使える(学習コス
ト)。
Reactが簡単にインストールできる。
31
AngularもインストールできるようになってるΣ(゚д゚;)
32
プラグインを動かしてみる
react‑bootstrap
material‑ui
react‑jsonschema‑form
33
開発環境
34
エディター
Atom(おすすめ)
RubyMine
35
プラグイン(Atom)
atom‑beautify
autoconse‑html
autocomplete‑paths
japanese‑menu
project‑manager
file‑icons
vim‑mode
ex‑mode
reac...
ご静聴ありがとうございました。
37
Upcoming SlideShare
Loading in …5
×

RailsでReact.jsを動かしてみた話

3,507 views

Published on

フロントエンド勉強会01資料

Published in: Technology
  • Hello! I can recommend a site that has helped me. It's called ⇒ www.HelpWriting.net ⇐ So make sure to check it out!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

RailsでReact.jsを動かしてみた話

  1. 1. RailsでReact.jsを動かしてみた話 ~ Reactプラグインを動かしてみる~ 1
  2. 2. 自己紹介 ティーエム21 吉岡 ウェブサイト制作 2
  3. 3. 今日のお話のターゲット react 使ったことがある。もしくは仕事で使ってる人 3
  4. 4. は対象外ですΣ(・口・) 4
  5. 5. これからreactを触ってみたい人が対象です。 5
  6. 6. アジェンダ Reactを学ぶきっかけ フロントエンドフレームワークについて なぜReact? Reactを動かす環境について HTMLにリンクを貼る Webpack(npm)を使う react‑rails(Gemで管理)を使う Webpacker(webpack, yarn)を使う Reactプラグインの紹介 Material‑UI, react‑jsonschema‑form, React‑Bootstrap おまけ 開発環境について 6
  7. 7. Reactを学ぶきっかけ jQueryとturbolinksの相性が致命的に悪すぎる… jQueryのコードがとっちらかってきた。 javascriptのフレームワークが流行ってる。 7
  8. 8. 条件 基本はRailsで書く!(Rubyで書けるところはRubyで書きたい。) フロント(UI)だけjavascriptで書きたい。 Rubyのコードとjavascriptのコードをうまく分離したい。 こういうやつ嫌い⇩ application.js.erb function alert_task_name(name){   alert(name); } alert_task_name(<%= @item.name %>); <%  names = @items.map {|item| item.name }.to_json.html_safe %> var names = <%= names %> 8
  9. 9. javascriptフレームワークを考える 以下、検討してみました。 Vue.js Riot.js Angular.js React.js 注)以下のレビューはあくまで個人的な主観です。 9
  10. 10. Vue.js 軽量だし、学習コストも低いし便利な機能もいろいろあるしjQueryとの 親和性も悪く無い。 タグに属性を追加して表示をコントロール。 最近新しいバージョンも出てきていい感じ!(コンポーネント対応) 10
  11. 11. <div id="example‐3">   <button v‐on:click="say('hi')">Say hi</button>   <button v‐on:click="say('what')">Say what</button> </div> new Vue({   el: '#example‐3',   methods: {     say: function (message) {       alert(message)     }   } }) 11
  12. 12. Riot.js 実はこれ一番好き。 コンポーネント内にCSS記述できるのが良い。 Rubyとjavascriptの分離が一番しやすそう。 絶賛開発中の匂いがプンプンする。 12
  13. 13. <html>   <head>     <title>Hello Riot.</title>   </head>   <body>     <sample></sample>     <script type="riot/tag" src="sample.tag"></script>     <script src="https://cdn.jsdelivr.net/riot/3.0/riot+compiler.min.js"></script>     <script>riot.mount('sample')</script>   </body> </html> <sample>   <h3>{ message }</h3>   <ul>     <li each={ techs }>{ name }</li>   </ul>   <script>     this.message = 'Hello, Riot!'     this.techs = [       { name: 'HTML' },       { name: 'JavaScript' },       { name: 'CSS' }     ]   </script>   <style>     :scope { font‐size: 2rem }     h3 { color: #444 }     ul { color: #999 }   </style> </sample> 13
  14. 14. Angular.js うーん。動かして無いけど(ドキュメントチラ見しただけ) ちょっと難しそう。 結構サーバサイドもnode.jsで書くやり方をよく見かけた。 14
  15. 15. React.js 悪く無いけど学習コストがそこそこ。でも、一番信頼性がありそうなプ ロダクト。ご存知FBで使用されている。 15
  16. 16. なぜReact? 16
  17. 17. 昨年末の出来事です 以下の情報が自分の耳に入ってきて。。。 rails5.1からjQueryが廃止されるらしい。 それで、webpackでフロント周りのパッケージ管理ができるように なるらしい。 さらに、reactもデフォルトになるかも… 17
  18. 18. Reactを動かす環境について HTMLにリンクを貼る webpackを使う(npm) react‑rails(RubyGem) webpacker(Yarn+ RubyGem) 18
  19. 19. HTMLにリンクを貼る 一番オーソドックスな試し方。 19
  20. 20. まぁ、これでもいいけどリンク色々貼らないといけないので面倒。 <html> <head>   <title>React sample CDN</title>   <script src="https://unpkg.com/react@15/dist/react.min.js"></script>   <script src="https://unpkg.com/react‐dom@15/dist/react‐dom.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0‐alpha1/JSXTransformer.js"></script </head>  <body>     <div id="app"></div>    <script type="text/jsx">    var CommentBox = React.createClass({      render: function() {        return (          <div className="commentBox">Hello, world!</div>        );      }    });    ReactDOM.render( <CommentBox />, document.getElementById('app'));    </script>  </body> </html> 20
  21. 21. webpackを使う(npm) とりあえず流行っているので使ってみる。 21
  22. 22. # ディレクトリ構成 webpack‐sample ├─ node_module │  └─ (省略) ├─ public │  ├─bundle.js │  ├─bundle.js.map │  └─index.html ├─ src │  └─ app.js ├─ package.json └─ webpack.config.js src/app.js import React from 'react'; import ReactDom from 'react‐dom'; var CommentBox = React.createClass({      render: function() {        return (          <div className="commentBox"> Hello, world!</div>        );      }    }); ReactDom.render( <CommentBox />, document.getElementById('app')); 22
  23. 23. 色々なことができるみたいだけど、正直学習コスト高い気がする。 (npmから出直しておいで) 23
  24. 24. サンプルファイル https://github.com/yoshiokaCB/webpack‑react‑sample 24
  25. 25. react‑rails(RubyGem) javascriptのファイルを全てSproketsで管理。 /app/assets/javascript/commponents/ react‑railsはgemがファイルを管理してくれる。 パスの設定が簡単な感じ。(Rails知っている人なら簡単かも) Gemfile gem 'react‐rails' $ bundle $ rails g react:install 25
  26. 26. /app/views/comments/index.html.erb <h1>Comments#index</h1> <p>Find me in app/views/comments/index.html.erb</p> <%= react_component('CommentBox') %> <%= react_component('CommentBox1', notice: "引数渡すテスト") %> /app/assets/javascript/commponents/hellow_react.js.jsx var CommentBox = React.createClass({   render: function() {     return(       <h1>Hello React!</h1>     )   } }); /app/assets/javascript/commponents/comment_box.js.jsx class CommentBox1 extends React.Component {   constructor(props) {     super(props);   }   render() {     return(       <div className='commentBox'>       <h1>Hello world!</h1>         <p>notice:{this.props.notice}</p>       </div>     );   } } 26
  27. 27. サンプルファイル https://github.com/yoshiokaCB/react‑rails‑sample 参考サイト https://github.com/reactjs/react‑rails http://qiita.com/joe‑re/items/96f12dda4a62470d1d7c 27
  28. 28. 疑問 import, requireってできるんだっけ? 別ファイルに書いたコンポーネント読み込みたいんですが… プラグインってどうやって使うの? 28
  29. 29. webpacker(Yarn+ RubyGem) githubのrailsの中にwebpackerなるものが… とりあえずwebpackerを動かしてみる。 注)webpack‑rails とは別のgemになりますのでご注意ください。 29
  30. 30. 動かし方は先々週したので今日はしない。詳しくはここをみる。 http://qiita.com/yoshiokaCB/items/564ed0440f0428c0009a github https://github.com/rails/webpacker サンプルコード https://github.com/yoshiokaCB/react‑webpacker‑sample 30
  31. 31. 良いこと Rails用の初期設定ファイルを書き出してくれる。 Railsとの相性が良い。webpackをとりあえず使える(学習コス ト)。 Reactが簡単にインストールできる。 31
  32. 32. AngularもインストールできるようになってるΣ(゚д゚;) 32
  33. 33. プラグインを動かしてみる react‑bootstrap material‑ui react‑jsonschema‑form 33
  34. 34. 開発環境 34
  35. 35. エディター Atom(おすすめ) RubyMine 35
  36. 36. プラグイン(Atom) atom‑beautify autoconse‑html autocomplete‑paths japanese‑menu project‑manager file‑icons vim‑mode ex‑mode react react‑es6‑snippets 36
  37. 37. ご静聴ありがとうございました。 37

×