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

RailsでReact.jsを動かしてみた話
～ Reactプラグインを動かしてみる～
1

自己紹介
ティーエム21 吉岡
ウェブサイト制作
2

今日のお話のターゲット
react 使ったことがある。もしくは仕事で使ってる人
3

は対象外ですΣ(･口･)
4

これからreactを触ってみたい人が対象です。
5

アジェンダ
Reactを学ぶきっかけ
フロントエンドフレームワークについて
なぜReact？
Reactを動かす環境について
HTMLにリンクを貼る
Webpack(npm)を使う
react‑rails(Gemで管理)を使う
Webpacker(webpack, yarn)を使う
Reactプラグインの紹介
Material‑UI, react‑jsonschema‑form, React‑Bootstrap
おまけ
開発環境について
6

Reactを学ぶきっかけ
jQueryとturbolinksの相性が致命的に悪すぎる…
jQueryのコードがとっちらかってきた。
javascriptのフレームワークが流行ってる。
7

条件
基本は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

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>
</div>
new Vue({
  el: '#example‐3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
11

Riot.js
実はこれ一番好き。
コンポーネント内にCSS記述できるのが良い。
Rubyとjavascriptの分離が一番しやすそう。
絶賛開発中の匂いがプンプンする。
12

<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

Angular.js
うーん。動かして無いけど（ドキュメントチラ見しただけ）
ちょっと難しそう。
結構サーバサイドもnode.jsで書くやり方をよく見かけた。
14

React.js
悪く無いけど学習コストがそこそこ。でも、一番信頼性がありそうなプ
ロダクト。ご存知FBで使用されている。
15

昨年末の出来事です
以下の情報が自分の耳に入ってきて。。。
rails5.1からjQueryが廃止されるらしい。
それで、webpackでフロント周りのパッケージ管理ができるように
なるらしい。
さらに、reactもデフォルトになるかも…
17

Reactを動かす環境について
webpackを使う（npm）
react‑rails（RubyGem）
webpacker（Yarn+ RubyGem）
18

一番オーソドックスな試し方。
19

まぁ、これでもいいけどリンク色々貼らないといけないので面倒。
<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

webpackを使う（npm）
とりあえず流行っているので使ってみる。
21

# ディレクトリ構成
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';
       return (
         <div className="commentBox"> Hello, world!</div>
       );
     }
   });
ReactDom.render( <CommentBox />, document.getElementById('app'));
22

色々なことができるみたいだけど、正直学習コスト高い気がする。
（npmから出直しておいで）
23

サンプルファイル
https://github.com/yoshiokaCB/webpack‑react‑sample
24

react‑rails（RubyGem）
javascriptのファイルを全てSproketsで管理。
/app/assets/javascript/commponents/
react‑railsはgemがファイルを管理してくれる。
パスの設定が簡単な感じ。（Rails知っている人なら簡単かも）
Gemfile
gem 'react‐rails'
$ bundle
$ rails g react:install
25

/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
    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

サンプルファイル
https://github.com/yoshiokaCB/react‑rails‑sample
参考サイト
https://github.com/reactjs/react‑rails
http://qiita.com/joe‑re/items/96f12dda4a62470d1d7c
27

疑問
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/webpacker
サンプルコード
https://github.com/yoshiokaCB/react‑webpacker‑sample
30

良いこと
Rails用の初期設定ファイルを書き出してくれる。
Railsとの相性が良い。webpackをとりあえず使える（学習コス
ト）。
Reactが簡単にインストールできる。
31

AngularもインストールできるようになってるΣ(ﾟдﾟ;)
32

プラグインを動かしてみる
react‑bootstrap
material‑ui
react‑jsonschema‑form
33

エディター
Atom（おすすめ）
RubyMine
35

プラグイン（Atom）
atom‑beautify
autoconse‑html
autocomplete‑paths
japanese‑menu
project‑manager
file‑icons
vim‑mode
ex‑mode
react
react‑es6‑snippets
36

ご静聴ありがとうございました。
37

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

Similaire à RailsでReact.jsを動かしてみた話 (20)

Plus de yoshioka_cb

Plus de yoshioka_cb (7)

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