{"id":1551,"date":"2017-04-13T11:55:48","date_gmt":"2017-04-13T02:55:48","guid":{"rendered":"http:\/\/lovelinux.mydns.jp\/?p=1551"},"modified":"2017-04-13T11:55:48","modified_gmt":"2017-04-13T02:55:48","slug":"rails5-0-%e3%81%ab-react%e3%80%81redux%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%a6%e3%80%81redux%e6%9c%ac%e5%ae%b6%e3%81%aetodo%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%92%e5%8b%95%e3%81%8b-2","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=1551","title":{"rendered":"Rails5.0 \u306b React\u3001Redux\u3092\u5c0e\u5165\u3057\u3066\u3001Redux\u672c\u5bb6\u306eTodo\u30b5\u30f3\u30d7\u30eb\u3092\u52d5\u304b\u3059"},"content":{"rendered":"

\u306f\u3058\u3081\u306b<\/h3>\n

Rails\u3068React\u3001Redux\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e\u6e96\u5099\u624b\u9806\u3092Redux\u672c\u5bb6\u306eTodo\u30b5\u30f3\u30d7\u30eb\u3092\u4f7f\u3063\u3066\u793a\u3057\u3066\u307f\u307e\u3059\u3002
\nReact\u3001Redux\u306fnpm\uff08node_modules\uff09\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u3082\u306e\u3092\u4f7f\u3046\u3053\u3068\u3068\u3057\u307e\u3059\u3002<\/p>\n

\u6700\u7d42\u7684\u306b\u52d5\u3044\u305f\u5f62\u306e\u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3093\u306a\u611f\u3058\u3002
\n\"redux-11\"<\/a><\/p>\n

\u6700\u7d42\u7684\u306a\u30bd\u30fc\u30b9\u30c4\u30ea\u30fc\u306f\u3053\u3093\u306a\u611f\u3058
\n\"redux-10\"<\/a><\/p>\n

Rails\u30a2\u30d7\u30ea\u306e\u65b0\u898f\u4f5c\u6210\u3001React\u5c0e\u5165<\/h3>\n

[bash]
\n$ rails new rails_redux<\/p>\n

$ cd rails_redux\/
\n$ nano Gemfile
\n[\/bash]<\/p>\n

\u8db3\u308a\u306a\u3044Gem\u30923\u3064\u8ffd\u52a0\u3057\u3066\u3001bundle install<\/h4>\n

\u672b\u5c3e\u306b\u8ffd\u8a18<\/p>\n

[bash]<\/p>\n

+ gem ‘therubyracer’, platforms: :ruby
\n+ gem ‘react-rails’
\n+ gem ‘browserify-rails’
\n[\/bash]<\/p>\n

bundle install<\/p>\n

[bash]
\n$ bundle install
\n[\/bash]<\/p>\n

application.rb\u3092\u7de8\u96c6<\/h3>\n

\u4f5c\u3063\u305f ES6\uff08JavaScript\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\uff09\u306e\u30bd\u30fc\u30b9\u3092ES5\u306b\u81ea\u52d5\u5909\u63db\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\u3092\u8ffd\u8a18
\nconfig.browserify_rails\u3000\u306e\u884c\u3092\u8ffd\u52a0<\/p>\n

config\/application.rb
\n[bash]
\nrequire_relative ‘boot’<\/p>\n

require ‘rails\/all’<\/p>\n

# Require the gems listed in Gemfile, including any gems
\n# you’ve limited to :test, :development, or :production.
\nBundler.require(*Rails.groups)<\/p>\n

module RailsRedux
\n class Application < Rails::Application\n # Settings in config\/environments\/* take precedence over those specified here.\n # Application configuration should go into files in config\/initializers\n # -- all .rb files in that directory are automatically loaded.\n+ config.browserify_rails.commandline_options = '-t babelify'\n end\nend\n\n\n[\/bash]\n\n\n\n

Rails \u306b React\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n

[bash]
\n$ rails g react:install
\n[\/bash]<\/p>\n

application.js\u306e\u7de8\u96c6<\/h3>\n

app\/assets\/javascripts\/application.js<\/p>\n

\u30fbReact\u306f npm\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u3082\u306e\u3092\u4f7f\u3046\u306e\u3067\u30ab\u30c3\u30c8\u3002
\n\u30fbrequire_tree . \u3082\u30ab\u30c3\u30c8<\/p>\n

\u5909\u66f4\u524d
\n[bash]
\n\/\/= require jquery
\n\/\/= require jquery_ujs
\n\/\/= require turbolinks
\n\/\/= require react
\n\/\/= require react_ujs
\n\/\/= require components
\n\/\/= require_tree .
\n[\/bash]<\/p>\n

\u5909\u66f4\u5f8c<\/p>\n

[bash]
\n\/\/= require jquery
\n\/\/= require jquery_ujs
\n\/\/= require turbolinks
\n\/\/= require react_ujs
\n\/\/= require components
\n[\/bash]<\/p>\n

React\u3001Redux\u3001etc…\u306e\u6e96\u5099(node_modules\uff09<\/h3>\n

React\u3001Redux\u305d\u306e\u4ed6\u8af8\u3005\u3092 npm \u3092\u4f7f\u3063\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n

[bash]
\n$ npm init -y
\n$ npm install –save-dev browserify browserify-incremental babelify babel-preset-es2015 babel-preset-react<\/p>\n

$ npm install –save react react-dom react-redux redux redux-thunk<\/p>\n

[\/bash]<\/p>\n

.babelrc \u30d5\u30a1\u30a4\u30eb\u3092Rails\u306e\u30eb\u30fc\u30c8\u30d5\u30a9\u30eb\u30c0\u306b\u4f5c\u6210<\/h3>\n

[bash]
\n{
\n “presets”: [“es2015”, “react”]
\n}
\n[\/bash]<\/p>\n

Redux\u306e\u6a19\u6e96\u7684\u306a\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210<\/h3>\n

[bash]
\n$ cd app\/assets\/javascripts\/
\n$ mkdir actions containers reducers<\/p>\n

[\/bash]<\/p>\n

components.js\u7de8\u96c6<\/h3>\n

app\/assets\/javascripts\/components.js<\/p>\n

todos.js\u306f\u30a2\u30d7\u30ea\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u306a\u308bJS\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002\u3053\u3053\u306b\u5b9a\u7fa9\u3057\u305f\u30af\u30e9\u30b9\u540d\uff08const\u5ba3\u8a00\uff09\u3092
\nwindow\u306e\u4e0b\u306b\u30bb\u30c3\u30c8\uff08\u5909\u6570\u3068\u3057\u3066\u516c\u958b\uff09\u3057\u3066\u3084\u308b\u3002
\n\uff08\u610f\u5473\u306f\u3044\u307e\u3044\u3061\u7406\u89e3\u3067\u304d\u3066\u3044\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u5fc5\u9808\u307f\u305f\u3044\u3067\u3059\uff09<\/p>\n

\u5909\u66f4\u524d
\n[bash]
\n\/\/= require_tree .\/components
\n[\/bash]<\/p>\n

\u5909\u66f4\u5f8c
\n[bash]
\nwindow.React = require(‘react’);
\nwindow.ReactDOM = require(‘react-dom’);
\nwindow.Todos = require(‘.\/todos.js’);
\n[\/bash]<\/p>\n

Redux\u672c\u5bb6\u306eTodo\u30b5\u30f3\u30d7\u30eb\u3092\u79fb\u690d<\/h3>\n

\u3053\u3053\u304b\u3089\u306f redux\u672c\u5bb6\u306eTodo\u30a2\u30d7\u30ea\u306e\u30bd\u30fc\u30b9<\/a>\u3092\u30b3\u30d4\u30fc\u30a2\u30f3\u30c9\u30da\u30fc\u30b9\u30c8\u3067\u3059\u3002<\/p>\n

\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u306eJS\u8abf\u6574<\/h4>\n

\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u306a\u308b(Entry Point) index.js\u306f todos.js\u3068\u3044\u3046\u540d\u524d\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n

app\/assets\/javascripts\/todos.js<\/p>\n

[bash]
\nimport React, { Component } from ‘react’
\nimport { render } from ‘react-dom’
\nimport { Provider } from ‘react-redux’
\nimport { createStore } from ‘redux’
\nimport todo from ‘.\/reducers’
\nimport App from ‘.\/components\/App’<\/p>\n

let store = createStore(todo)<\/p>\n

const Todos = ({}) => {
\n return (
\n
\n
\n <\/Provider>
\n )
\n}<\/p>\n

export default Todos<\/p>\n

[\/bash]<\/p>\n

\u305d\u306e\u4ed6\u306e\u30d5\u30a1\u30a4\u30eb\u7fa4\u306e\u30b3\u30d4\u30da<\/h4>\n

\u305d\u306e\u4ed6\u306e\u30d5\u30a1\u30a4\u30eb\u306f\u540c\u3058\u30d1\u30b9\u3067\u3001\u5168\u304f\u540c\u3058\u5185\u5bb9\u3067\u30ac\u30ea\u30ac\u30ea\u30b3\u30d4\u30da\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

\u51fa\u6765\u4e0a\u304c\u308a\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002
\n\"redux-12\"<\/a><\/p>\n

Rails\u3067\u30c6\u30b9\u30c8\u7528\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3068\u30d3\u30e5\u30fc\u3092\u4f5c\u6210<\/h3>\n

[bash]
\n$ rails g controller todos index
\n[\/bash]<\/p>\n

\u30d3\u30e5\u30fc\u306e\u8abf\u6574<\/h4>\n

1\u884c React\u306eTodo\u30a2\u30d7\u30ea\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u308b\u90e8\u5206\u3092\u8ffd\u8a18\u3057\u307e\u3059\u3002
\napp\/views\/todos\/index.html.erb<\/p>\n

[bash]<\/p>\n

Todos#index<\/h1>\n

Find me in app\/views\/todos\/index.html.erb<\/p>\n

+ <%= react_component('Todos') %><\/p>\n

[\/bash]<\/p>\n

\u52d5\u4f5c\u78ba\u8a8d<\/h3>\n

[bash]
\n$ cd Rails\u306e\u30eb\u30fc\u30c8\u30d5\u30a9\u30eb\u30c0
\n$ rails s<\/p>\n

[\/bash]<\/p>\n

\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u4ee5\u4e0b\u306eURL\u3078\u30a2\u30af\u30bb\u30b9\u3057\u3001\u3053\u3093\u306a\u611f\u3058\u306b\u8868\u793a\u3055\u308c\u308c\u3070\u6210\u529f<\/p>\n

http:\/\/localhost:3000\/todos\/index<\/p>\n

\"redux-11\"<\/a><\/p>\n

\u4ee5\u4e0a<\/p>\n","protected":false},"excerpt":{"rendered":"

\u306f\u3058\u3081\u306b Rails\u3068React\u3001Redux\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e\u6e96\u5099\u624b\u9806\u3092Redux\u672c\u5bb6\u306eTodo\u30b5\u30f3\u30d7\u30eb\u3092\u4f7f\u3063\u3066\u793a\u3057\u3066\u307f\u307e\u3059\u3002 React\u3001Redux\u306fnpm\uff08node_modules\uff09\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u3082\u306e\u3092\u4f7f\u3046\u3053\u3068\u3068\u3057\u307e\u3059\u3002 \u6700\u7d42\u7684\u306b\u52d5\u3044\u305f\u5f62\u306e\u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3093\u306a\u611f\u3058\u3002 \u6700\u7d42\u7684\u306a\u30bd\u30fc\u30b9\u30c4\u30ea\u30fc\u306f\u3053\u3093\u306a\u611f\u3058 Rails\u30a2\u30d7\u30ea\u306e\u65b0\u898f\u4f5c\u6210\u3001React\u5c0e\u5165 [bash] $ rails new rails_redux $ cd rails_redux\/ $ nano Gemfile [\/bash] \u8db3\u308a\u306a\u3044Gem\u30923\u3064\u8ffd\u52a0\u3057\u3066\u3001bundle install \u672b\u5c3e\u306b\u8ffd\u8a18 [bash] + gem ‘therubyracer’, platforms: :ruby + gem ‘react-rails’ + gem ‘browserify-rails’ [\/bash] bundle install [bash] $ bundle install [\/bash] application.rb\u3092\u7de8\u96c6 \u4f5c\u3063\u305f ES6\uff08JavaScript\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\uff09\u306e\u30bd\u30fc\u30b9\u3092ES5\u306b\u81ea\u52d5\u5909\u63db\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\u3092\u8ffd\u8a18 config.browserify_rails\u3000\u306e\u884c\u3092\u8ffd\u52a0 config\/application.rb [bash] require_relative ‘boot’ require ‘rails\/all’ # Require the gems listed in Gemfile, including any gems # you’ve limited to :test, :development, or :production. Bundler.require(*Rails.groups) module RailsRedux class Application < Rails::Application # Settings in config\/environments\/* take precedence over those specified here. # Application configuration should go into files in config\/initializers # -- all .rb files in that directory are automatically loaded. + config.browserify_rails.commandline_options = '-t babelify' end end [\/bash] Rails \u306b React\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb [bash] $ rails g react:install [\/bash] application.js\u306e\u7de8\u96c6 app\/assets\/javascripts\/application.js \u30fbReact\u306f npm\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u3082\u306e\u3092\u4f7f\u3046\u306e\u3067\u30ab\u30c3\u30c8\u3002 \u30fbrequire_tree . \u3082\u30ab\u30c3\u30c8 \u5909\u66f4\u524d [bash] \/\/= require jquery \/\/= require jquery_ujs \/\/= require turbolinks \/\/= require react \/\/= require react_ujs \/\/= require components \/\/= require_tree . [\/bash] \u5909\u66f4\u5f8c [bash] \/\/= require jquery \/\/= require jquery_ujs \/\/= require turbolinks \/\/= require react_ujs \/\/= require components [\/bash] React\u3001Redux\u3001etc…\u306e\u6e96\u5099(node_modules\uff09 React\u3001Redux\u305d\u306e\u4ed6\u8af8\u3005\u3092 npm \u3092\u4f7f\u3063\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002 [bash] $ npm init -y $ npm install –save-dev browserify browserify-incremental babelify babel-preset-es2015 babel-preset-react $ npm install –save react react-dom react-redux redux redux-thunk [\/bash] .babelrc \u30d5\u30a1\u30a4\u30eb\u3092Rails\u306e\u30eb\u30fc\u30c8\u30d5\u30a9\u30eb\u30c0\u306b\u4f5c\u6210 [bash] { “presets”: [“es2015”, “react”] } [\/bash] Redux\u306e\u6a19\u6e96\u7684\u306a\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210 [bash] $ cd app\/assets\/javascripts\/ $ mkdir actions containers reducers [\/bash] components.js\u7de8\u96c6 app\/assets\/javascripts\/components.js todos.js\u306f\u30a2\u30d7\u30ea\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u306a\u308bJS\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002\u3053\u3053\u306b\u5b9a\u7fa9\u3057\u305f\u30af\u30e9\u30b9\u540d\uff08const\u5ba3\u8a00\uff09\u3092 window\u306e\u4e0b\u306b\u30bb\u30c3\u30c8\uff08\u5909\u6570\u3068\u3057\u3066\u516c\u958b\uff09\u3057\u3066\u3084\u308b\u3002 \uff08\u610f\u5473\u306f\u3044\u307e\u3044\u3061\u7406\u89e3\u3067\u304d\u3066\u3044\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u5fc5\u9808\u307f\u305f\u3044\u3067\u3059\uff09 \u5909\u66f4\u524d [bash] \/\/= require_tree .\/components [\/bash] \u5909\u66f4\u5f8c [bash] window.React = require(‘react’); window.ReactDOM = require(‘react-dom’); window.Todos = require(‘.\/todos.js’); [\/bash] Redux\u672c\u5bb6\u306eTodo\u30b5\u30f3\u30d7\u30eb\u3092\u79fb\u690d \u3053\u3053\u304b\u3089\u306f redux\u672c\u5bb6\u306eTodo\u30a2\u30d7\u30ea\u306e\u30bd\u30fc\u30b9\u3092\u30b3\u30d4\u30fc\u30a2\u30f3\u30c9\u30da\u30fc\u30b9\u30c8\u3067\u3059\u3002 \u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u306eJS\u8abf\u6574 \u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u306a\u308b(Entry Point) index.js\u306f todos.js\u3068\u3044\u3046\u540d\u524d\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4f5c\u6210\u3057\u307e\u3059\u3002 app\/assets\/javascripts\/todos.js [bash] import React, { Component } from ‘react’ import { render } from ‘react-dom’ import { Provider } from ‘react-redux’ import { createStore } from ‘redux’ import todo from ‘.\/reducers’ import App from ‘.\/components\/App’ let store = createStore(todo) const Todos = ({}) => { return ( ) }…<\/p>\n","protected":false},"author":1,"featured_media":1425,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[6,77],"tags":[71,72,76],"class_list":{"0":"post-1551","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-rails","8":"category-react","9":"tag-rails","10":"tag-reactjs","11":"tag-redux"},"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t