{"id":1545,"date":"2017-04-13T11:47:42","date_gmt":"2017-04-13T02:47:42","guid":{"rendered":"http:\/\/lovelinux.mydns.jp\/?p=1545"},"modified":"2017-04-13T12:24:04","modified_gmt":"2017-04-13T03:24:04","slug":"rails%e3%81%a8reactjs%e3%82%92%e7%94%a8%e3%81%84%e3%81%a6%e3%81%a1%e3%82%87%e3%81%a3%e3%81%a8%e3%81%97%e3%81%9f%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%be-3","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=1545","title":{"rendered":"Rails\u3068ReactJS\u3092\u7528\u3044\u3066\u3061\u3087\u3063\u3068\u3057\u305f\u63b2\u793a\u677f\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u3087\u3046 vol.1"},"content":{"rendered":"<h3>\u306f\u3058\u3081\u306b<\/h3>\n<p>Rails\u3068ReactJS\u3092\u7528\u3044\u3066\u3061\u3087\u3063\u3068\u3057\u305f\u63b2\u793a\u677f\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3068\u3044\u3046\u306e\u304c\u4eca\u56de\u306e\u30b3\u30f3\u30bb\u30d7\u30c8<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/?p=1543\">\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d<\/a>\u3001\u3053\u308c\u304b\u3089\u4f55\u56de\u304b\u306b\u308f\u305f\u308a\u9023\u8f09\u3059\u308b\u5185\u5bb9\u306fGitHub\u306e\u4e0b\u8a18\u306eURL\u3067\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/github.com\/h-mito\/rails_with_react\">https:\/\/github.com\/h-mito\/rails_with_react<\/a><\/p>\n<h3>\u30e2\u30c7\u30eb\u306e\u4f5c\u6210\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u30c6\u30fc\u30d6\u30eb\u4f5c\u6210<\/h3>\n<p>\u63b2\u793a\u677f(board)\u3001\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc(user)\u3001\u6295\u7a3f(comment)\u306e\uff13\u3064\u306e\u30c6\u30fc\u30d6\u30eb\u3092\u4f5c\u308a\u307e\u3059\u3002<br \/>\n\u30ab\u30e9\u30e0\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n<p>rails g model \u3067\u30e2\u30c7\u30eb\u3068\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\n$ rails g model board title:string description:text<br \/>\n$ rails g model user name:string sex:integer age:integer<br \/>\n$ rails g model comment board_id:integer user_id:integer comment:text<br \/>\n[\/bash]<\/p>\n<p>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u4f5c\u6210<br \/>\n[bash]<br \/>\n$ rake db:migrate<br \/>\n[\/bash]<\/p>\n<p>\u51fa\u6765\u4e0a\u304c\u3063\u305f\u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-1.png\" alt=\"rails-1\" width=\"827\" height=\"747\" class=\"alignnone size-full wp-image-1350\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-1.png 827w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-1-300x271.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-1-768x694.png 768w\" sizes=\"auto, (max-width: 827px) 100vw, 827px\" \/><\/a><\/p>\n<h3>Seed\u30c7\u30fc\u30bf\u306e\u4f5c\u6210<\/h3>\n<p>\u4f55\u3082\u306a\u3044\u3068\u3053\u308d\u304b\u3089\u30c7\u30fc\u30bf\u6295\u7a3f\u307e\u3067\u3064\u304f\u308a\u4e0a\u3052\u308b\u306e\u306b\u306f\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30b7\u30fc\u30c9(seed)\u30c7\u30fc\u30bf\u3092<br \/>\n\u4f5c\u3063\u3066\u304a\u3044\u3066\u3001\u307e\u305a\u306f\u305d\u306e\u30c7\u30fc\u30bf\u3092\u8aad\u3093\u3067\u3001\u4e00\u89a7\u8868\u793a\u3059\u308b\u3053\u3068\u3050\u3089\u3044\u304b\u3089\u59cb\u3081\u307e\u3057\u3087\u3046\u3002<\/p>\n<h4>\u63b2\u793a\u677f\u30c6\u30fc\u30d6\u30eb\u306eCSV\u30c7\u30fc\u30bf<\/h4>\n<p>[bash]<br \/>\n$ nano db\/csv\/boards.csv<br \/>\n[\/bash]<\/p>\n<p>[bash]<br \/>\n1,ReactJS\u3092\u5b66\u307c\u3046,\u3042\u3044\u3046\u3048\u304a<br \/>\n2,ReactJS \u3068 Rails\u9023\u643a,\u304b\u304d\u304f\u3051\u3053<br \/>\n3,ReactJS \u767a\u5c55\u7de8,\u3055\u3057\u3059\u305b\u305d<br \/>\n4,jQuery\u5165\u9580,\u305f\u3061\u3064\u3066\u3068<br \/>\n5,jQuery\u5f97\u610f\u306a\u4eba\u96c6\u307e\u308c,\u306a\u306b\u306c\u306d\u306e<br \/>\n6,AngularJS\u5165\u9580,\u306f\u3072\u3075\u3078\u307b<br \/>\n7,vue.js\u3063\u3066\u306a\u3093\u305e,\u307e\u307f\u3080\u3081\u3082<\/p>\n<p>[\/bash]<\/p>\n<h4>\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u30c6\u30fc\u30d6\u30eb\u306eCSV\u30c7\u30fc\u30bf<\/h4>\n<p>[bash]<br \/>\n$ nano db\/csv\/users.csv<br \/>\n[\/bash]<\/p>\n<p>[bash]<br \/>\n1,\u82b1\u5b50,2,23<br \/>\n2,\u592a\u90ce,1,30<br \/>\n3,\u5e78\u6b21\u90ce,1,15<br \/>\n4,\u6d69\u8f1d,1,40<br \/>\n5,\u5927\u6a39,1,35<br \/>\n6,\u3059\u305a,2,28<br \/>\n7,\u96c5\u4ee3,2,38<br \/>\n[\/bash]<\/p>\n<h4>Seed\u30c7\u30fc\u30bf\u3092\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u53cd\u6620\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8<\/h4>\n<p>seeds.rb\u3092\u7de8\u96c6<br \/>\n[bash]<br \/>\n$ nano db\/seeds.rb<br \/>\n[\/bash]<\/p>\n<p>[bash]<br \/>\nrequire &#8216;csv&#8217;<\/p>\n<p>CSV.foreach(&#8216;db\/csv\/boards.csv&#8217;) do |row|<br \/>\n  Board.create!(id: row[0], title: row[1], description: row[2])<br \/>\nend<\/p>\n<p>CSV.foreach(&#8216;db\/csv\/users.csv&#8217;) do |row|<br \/>\n  User.create!(id: row[0], name: row[1], sex: row[2], age: row[3])<br \/>\nend<\/p>\n<p>[\/bash]<\/p>\n<h3>Seed\u30c7\u30fc\u30bf\u306e\u6295\u5165<\/h3>\n<p>[bash]<br \/>\n$ rake db:seed<br \/>\n[\/bash]<\/p>\n<h3>\u63b2\u793a\u677f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u30da\u30fc\u30b8\u3092\u3064\u304f\u3066\u307f\u308b<\/h3>\n<p>\u3053\u3053\u304b\u3089\u304c\u672c\u984c\u3002\u30b5\u30f3\u30d7\u30eb\u30c7\u30fc\u30bf\u304c\u5165\u3063\u305f\u63b2\u793a\u677f\u3092\u4e00\u89a7\u8868\u793a\u3059\u308b\u51e6\u7406\u3092\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<h4>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u4f5c\u6210<\/h4>\n<p>[bash]<br \/>\n$ rails g controller boards index<br \/>\n[\/bash]<\/p>\n<p>\u51fa\u6765\u4e0a\u304c\u3063\u305f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306b\u63b2\u793a\u677f\u4e00\u89a7\u3092\u8aad\u307f\u8fbc\u3080\u884c\u3092\u8ffd\u8a18\u3059\u308b\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardsController < ApplicationController\n  def index\n    @boards = Board.all\n  end\nend\n\n[\/bash]\n\n\n\n<h4>\u4e00\u89a7\u753b\u9762\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u3092\u30a4\u30e1\u30fc\u30b8\u3059\u308b<\/h4>\n<p>\u63b2\u793a\u677f\u4e00\u89a7\u3068\u306f\u3069\u3093\u306a\u753b\u9762\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\uff1f\uff1f<br \/>\nReactJS\u3067\u306f\u51fa\u6765\u4e0a\u304c\u308a\u306e\u30a4\u30e1\u30fc\u30b8\u3092\u982d\u306e\u4e2d\u3067\u4f5c\u3063\u3066\u3001<br \/>\n\u305d\u306e\u30a4\u30e1\u30fc\u30b8\u306b\u3042\u3046\u30af\u30e9\u30b9\u7fa4\u3092\u4f5c\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-2.png\" alt=\"rails-2\" width=\"799\" height=\"540\" class=\"alignnone size-full wp-image-1353\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-2.png 799w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-2-300x203.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-2-768x519.png 768w\" sizes=\"auto, (max-width: 799px) 100vw, 799px\" \/><\/a><\/p>\n<ul>\n<li>\u63b2\u793a\u677f\u4e00\u89a7\u5168\u4f53\u3092\u8868\u3059 BoardList\u30af\u30e9\u30b9<\/li>\n<li>\u63b2\u793a\u677f\u4e00\u884c\u3092\u8868\u3059 BoardLine\u30af\u30e9\u30b9<\/li>\n<\/ul>\n<h4>React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4f5c\u6210<\/h4>\n<p>\u3058\u3083\u3042\u3001\u30af\u30e9\u30b9\u306f\u6c7a\u307e\u3063\u305f\u306e\u3067\u3001\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>[bash]<br \/>\n$ rails g react:component BoardList<br \/>\n[\/bash]<\/p>\n<p>\u4ee5\u4e0b\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002<br \/>\napp\/assets\/javascripts\/components\/board_list.js.jsx<\/p>\n<p>\u3067\u306f\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u7de8\u96c6\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\nRails\u3067\u81ea\u52d5\u4f5c\u6210\u3055\u308c\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u306f\u3061\u3087\u3063\u3068\u53e4\u3044\u5f62\u5f0f\u306e\u3082\u306e\u306a\u306e\u3067\u3001<br \/>\n\u5168\u90e8\u6d88\u3057\u3061\u3083\u3044\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardList extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div>\n<h2>\u63b2\u793a\u677f\u4e00\u89a7<\/h2>\n<div className=\"blist\">\n           \u3053\u3053\u306b\u4e00\u89a7\u304c\u8868\u793a\u3055\u308c\u308b\u4e88\u5b9a\n        <\/div>\n<\/p><\/div>\n<p>    );<br \/>\n  }<\/p>\n<p>}<\/p>\n<p>[\/bash]<\/p>\n<p>View\u30d5\u30a1\u30a4\u30eb\u3092\u7de8\u96c6\u3057\u307e\u3059\u3002<br \/>\napp\/views\/boards\/index.html.erb<\/p>\n<p>[bash]<br \/>\n<%= react_component('BoardList') %><\/p>\n<p>[\/bash]<\/p>\n<h4>\u52d5\u4f5c\u78ba\u8a8d<\/h4>\n<p>[bash]<br \/>\n$ rails s<br \/>\n[\/bash]<\/p>\n<p>\u30d6\u30e9\u30a6\u30b6\u30fc\u3067<br \/>\nhttp:\/\/localhost:3000\/boards\/index<\/p>\n<p>\u3053\u3093\u306a\u611f\u3058\u306e\u3082\u306e\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u6210\u529f\u3067\u3059\u3002<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-3.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-3.png\" alt=\"rails-3\" width=\"587\" height=\"264\" class=\"alignnone size-large wp-image-1357\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-3.png 587w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-3-300x135.png 300w\" sizes=\"auto, (max-width: 587px) 100vw, 587px\" \/><\/a><\/p>\n<h4>Rails\u3067\u8aad\u307f\u8fbc\u3093\u3060\u30c7\u30fc\u30bf\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6e21\u3057\u3066\u4e00\u89a7\u8868\u793a\u3059\u308b<\/h4>\n<p>\u5148\u307b\u3069\u306e\u52d5\u4f5c\u78ba\u8a8d\u3067\u306f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u3093\u3060\u306b\u3082\u304b\u304b\u308f\u3089\u305a\u3001<br \/>\n\u305d\u306e\u30c7\u30fc\u30bf\u3092\u4e00\u5207\u5229\u7528\u3057\u3066\u3044\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u4eca\u56de\u306f\u8aad\u307f\u8fbc\u3093\u3060\u30c7\u30fc\u30bf\u3092\u4f7f\u3063\u3066<br \/>\n\u4e00\u89a7\u8868\u793a\u3092\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n<h4>View<\/h4>\n<p>View\u30d5\u30a1\u30a4\u30eb\u3092\u7de8\u96c6\u3057\u307e\u3059\u3002<br \/>\napp\/views\/boards\/index.html.erb<\/p>\n<p>[bash]<br \/>\n<%= react_component('BoardList', {datas: @boards}) %><\/p>\n<p>[\/bash]<\/p>\n<h4>BoardList\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8abf\u6574<\/h4>\n<p>\u3053\u3053\u3067\u4f55\u304c\u8d77\u3053\u3063\u3066\u3044\u308b\u304b\u3068\u3044\u3046\u3068\u3001 View\u306ereact_component \u306e\uff12\u3064\u76ee\u306e\u5f15\u6570\u306b<br \/>\n\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u8aad\u307f\u8fbc\u3093\u3060 \u63b2\u793a\u677f\u4e00\u89a7\u30c7\u30fc\u30bf(@boards)\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>datas : @boards<\/p>\n<p>\u3068\u306a\u3063\u3066\u3044\u308b\u306e\u306f\u3001 BoardList\u30af\u30e9\u30b9\u3067\u306f datas\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u63b2\u793a\u677f\u4e00\u89a7\u30c7\u30fc\u30bf\u3092<br \/>\n\u30bb\u30c3\u30c8\u3059\u308b\u3088\u3068\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3059\u3002<\/p>\n<p>\u3053\u3053\u3067\u3088\u3046\u3084\u304f\u30c7\u30fc\u30bf\u304c\u6e21\u3063\u3066\u304d\u305f\u306e\u3067BoardList\u30af\u30e9\u30b9\u5185\u3067<br \/>\n\u63b2\u793a\u677f\u4e00\u89a7\u3092\u51fa\u529b\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>lines \u3068\u3044\u3046\u914d\u5217\u5909\u6570\u3092\u5b9a\u7fa9\u3057\u3001View\u304b\u3089\u6e21\u3055\u308c\u305f @boards\u306e\u5185\u5bb9\u3092<br \/>\nthis.props.datas\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4ecb\u3057\u3066\u8aad\u307f\u8fbc\u307f\u3001\u30eb\u30fc\u30d7\u3057\u306a\u304c\u3089<br \/>\nDataLine\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u51fa\u529b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardList extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    var lines = [];<br \/>\n    var i;<\/p>\n<p>    for (i = 0 ; i < this.props.datas.length ; i++){\n      var data = this.props.datas[i];\n      lines.push(<BoardLine data={data} key={data.id} \/>);<br \/>\n    }<\/p>\n<p>    return (<\/p>\n<div>\n<h2>\u63b2\u793a\u677f\u4e00\u89a7<\/h2>\n<div className=\"blist\">\n           {lines}\n        <\/div>\n<\/p><\/div>\n<p>    );<br \/>\n  }<\/p>\n<p>}<\/p>\n<p>[\/bash]<\/p>\n<p>DataLine\u30af\u30e9\u30b9\u3092\u51fa\u529b\u3057\u307e\u3057\u305f\u304c\u3001\u809d\u5fc3\u306eDataLine\u30af\u30e9\u30b9\u304c\u7121\u3044\u306e\u3067<br \/>\n\u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u304a\u4f5c\u6cd5\u7684\u306b\u306f\u5225\u30d5\u30a1\u30a4\u30eb\u306b\u8a18\u8ff0\u3059\u308b\u306e\u304c\u826f\u3044\u306e\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001<br \/>\n\u3068\u308a\u3042\u3048\u305a\u3001BoardList\u30af\u30e9\u30b9\u3068\u540c\u3058\u30d5\u30a1\u30a4\u30eb\u306b\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardLine extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div className=\"board-line\">\n        <label className=\"board-id\"><br \/>\n           {this.props.data.id}<br \/>\n        <\/label><br \/>\n        <label className=\"board-title\"><br \/>\n           {this.props.data.title}<br \/>\n        <\/label><\/p><\/div>\n<p>    );<br \/>\n  }<br \/>\n}<\/p>\n<p>[\/bash]<\/p>\n<p>\u3061\u3087\u3063\u3068\u898b\u6804\u3048\u304c\u60aa\u3044\u306e\u3067CSS\u3082\u8ffd\u52a0\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\napp\/assets\/stylesheets\/boards.scss<\/p>\n<p>[bash]<br \/>\ndiv.board-line{<br \/>\n  .board-id{<br \/>\n    display: inline-block;<br \/>\n    width: 50px;<br \/>\n    padding: 5px;<br \/>\n  }<br \/>\n  .board-title{<br \/>\n    display: inline-block;<br \/>\n    width: 500px;<br \/>\n  }<\/p>\n<p>}<br \/>\n[\/bash]<\/p>\n<h4>\u52d5\u4f5c\u78ba\u8a8d<\/h4>\n<p>[bash]<br \/>\n$ rails s<br \/>\n[\/bash]<\/p>\n<p>\u30d6\u30e9\u30a6\u30b6\u30fc\u3067<br \/>\nhttp:\/\/localhost:3000\/boards\/index<\/p>\n<p>\u3053\u3093\u306a\u611f\u3058\u306e\u3082\u306e\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u6210\u529f\u3067\u3059\u3002<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-4.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-4.png\" alt=\"rails-4\" width=\"616\" height=\"388\" class=\"alignnone size-full wp-image-1356\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-4.png 616w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-4-300x189.png 300w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u306f\u3058\u3081\u306b Rails\u3068ReactJS\u3092\u7528\u3044\u3066\u3061\u3087\u3063\u3068\u3057\u305f\u63b2\u793a\u677f\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3068\u3044\u3046\u306e\u304c\u4eca\u56de\u306e\u30b3\u30f3\u30bb\u30d7\u30c8 \u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d\u3001\u3053\u308c\u304b\u3089\u4f55\u56de\u304b\u306b\u308f\u305f\u308a\u9023\u8f09\u3059\u308b\u5185\u5bb9\u306fGitHub\u306e\u4e0b\u8a18\u306eURL\u3067\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002 https:\/\/github.com\/h-mito\/rails_with_react \u30e2\u30c7\u30eb\u306e\u4f5c\u6210\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u30c6\u30fc\u30d6\u30eb\u4f5c\u6210 \u63b2\u793a\u677f(board)\u3001\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc(user)\u3001\u6295\u7a3f(comment)\u306e\uff13\u3064\u306e\u30c6\u30fc\u30d6\u30eb\u3092\u4f5c\u308a\u307e\u3059\u3002 \u30ab\u30e9\u30e0\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u3059\u3002 rails g model \u3067\u30e2\u30c7\u30eb\u3068\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 [bash] $ rails g model board title:string description:text $ rails g model user name:string sex:integer age:integer $ rails g model comment board_id:integer user_id:integer comment:text [\/bash] \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u4f5c\u6210 [bash] $ rake db:migrate [\/bash] \u51fa\u6765\u4e0a\u304c\u3063\u305f\u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3093\u306a\u611f\u3058\u3002 Seed\u30c7\u30fc\u30bf\u306e\u4f5c\u6210 \u4f55\u3082\u306a\u3044\u3068\u3053\u308d\u304b\u3089\u30c7\u30fc\u30bf\u6295\u7a3f\u307e\u3067\u3064\u304f\u308a\u4e0a\u3052\u308b\u306e\u306b\u306f\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30b7\u30fc\u30c9(seed)\u30c7\u30fc\u30bf\u3092 \u4f5c\u3063\u3066\u304a\u3044\u3066\u3001\u307e\u305a\u306f\u305d\u306e\u30c7\u30fc\u30bf\u3092\u8aad\u3093\u3067\u3001\u4e00\u89a7\u8868\u793a\u3059\u308b\u3053\u3068\u3050\u3089\u3044\u304b\u3089\u59cb\u3081\u307e\u3057\u3087\u3046\u3002 \u63b2\u793a\u677f\u30c6\u30fc\u30d6\u30eb\u306eCSV\u30c7\u30fc\u30bf [bash] $ nano db\/csv\/boards.csv [\/bash] [bash] 1,ReactJS\u3092\u5b66\u307c\u3046,\u3042\u3044\u3046\u3048\u304a 2,ReactJS \u3068 Rails\u9023\u643a,\u304b\u304d\u304f\u3051\u3053 3,ReactJS \u767a\u5c55\u7de8,\u3055\u3057\u3059\u305b\u305d 4,jQuery\u5165\u9580,\u305f\u3061\u3064\u3066\u3068 5,jQuery\u5f97\u610f\u306a\u4eba\u96c6\u307e\u308c,\u306a\u306b\u306c\u306d\u306e 6,AngularJS\u5165\u9580,\u306f\u3072\u3075\u3078\u307b 7,vue.js\u3063\u3066\u306a\u3093\u305e,\u307e\u307f\u3080\u3081\u3082 [\/bash] \u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u30c6\u30fc\u30d6\u30eb\u306eCSV\u30c7\u30fc\u30bf [bash] $ nano db\/csv\/users.csv [\/bash] [bash] 1,\u82b1\u5b50,2,23 2,\u592a\u90ce,1,30 3,\u5e78\u6b21\u90ce,1,15 4,\u6d69\u8f1d,1,40 5,\u5927\u6a39,1,35 6,\u3059\u305a,2,28 7,\u96c5\u4ee3,2,38 [\/bash] Seed\u30c7\u30fc\u30bf\u3092\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u53cd\u6620\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8 seeds.rb\u3092\u7de8\u96c6 [bash] $ nano db\/seeds.rb [\/bash] [bash] require &#8216;csv&#8217; CSV.foreach(&#8216;db\/csv\/boards.csv&#8217;) do |row| Board.create!(id: row[0], title: row[1], description: row[2]) end CSV.foreach(&#8216;db\/csv\/users.csv&#8217;) do |row| User.create!(id: row[0], name: row[1], sex: row[2], age: row[3]) end [\/bash] Seed\u30c7\u30fc\u30bf\u306e\u6295\u5165 [bash] $ rake db:seed [\/bash] \u63b2\u793a\u677f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u30da\u30fc\u30b8\u3092\u3064\u304f\u3066\u307f\u308b \u3053\u3053\u304b\u3089\u304c\u672c\u984c\u3002\u30b5\u30f3\u30d7\u30eb\u30c7\u30fc\u30bf\u304c\u5165\u3063\u305f\u63b2\u793a\u677f\u3092\u4e00\u89a7\u8868\u793a\u3059\u308b\u51e6\u7406\u3092\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002 \u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u4f5c\u6210 [bash] $ rails g controller boards index [\/bash] \u51fa\u6765\u4e0a\u304c\u3063\u305f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306b\u63b2\u793a\u677f\u4e00\u89a7\u3092\u8aad\u307f\u8fbc\u3080\u884c\u3092\u8ffd\u8a18\u3059\u308b\u3002 [bash] class BoardsController < ApplicationController def index @boards = Board.all end end [\/bash] \u4e00\u89a7\u753b\u9762\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u3092\u30a4\u30e1\u30fc\u30b8\u3059\u308b \u63b2\u793a\u677f\u4e00\u89a7\u3068\u306f\u3069\u3093\u306a\u753b\u9762\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\uff1f\uff1f ReactJS\u3067\u306f\u51fa\u6765\u4e0a\u304c\u308a\u306e\u30a4\u30e1\u30fc\u30b8\u3092\u982d\u306e\u4e2d\u3067\u4f5c\u3063\u3066\u3001 \u305d\u306e\u30a4\u30e1\u30fc\u30b8\u306b\u3042\u3046\u30af\u30e9\u30b9\u7fa4\u3092\u4f5c\u3063\u3066\u3044\u304d\u307e\u3059\u3002 \u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3093\u306a\u611f\u3058\u3002 \u63b2\u793a\u677f\u4e00\u89a7\u5168\u4f53\u3092\u8868\u3059 BoardList\u30af\u30e9\u30b9 \u63b2\u793a\u677f\u4e00\u884c\u3092\u8868\u3059 BoardLine\u30af\u30e9\u30b9 React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4f5c\u6210 \u3058\u3083\u3042\u3001\u30af\u30e9\u30b9\u306f\u6c7a\u307e\u3063\u305f\u306e\u3067\u3001\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002 [bash] $ rails g react:component BoardList [\/bash] \u4ee5\u4e0b\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002 app\/assets\/javascripts\/components\/board_list.js.jsx \u3067\u306f\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u7de8\u96c6\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002 Rails\u3067\u81ea\u52d5\u4f5c\u6210\u3055\u308c\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u306f\u3061\u3087\u3063\u3068\u53e4\u3044\u5f62\u5f0f\u306e\u3082\u306e\u306a\u306e\u3067\u3001 \u5168\u90e8\u6d88\u3057\u3061\u3083\u3044\u307e\u3059\u3002 [bash] class BoardList extends React.Component{ constructor(props){ super(props); } render(){ return ( \u63b2\u793a\u677f\u4e00\u89a7 \u3053\u3053\u306b\u4e00\u89a7\u304c\u8868\u793a\u3055\u308c\u308b\u4e88\u5b9a ); } } [\/bash] View\u30d5\u30a1\u30a4\u30eb\u3092\u7de8\u96c6\u3057\u307e\u3059\u3002 app\/views\/boards\/index.html.erb [bash] [\/bash] \u52d5\u4f5c\u78ba\u8a8d [bash] $ rails s [\/bash] \u30d6\u30e9\u30a6\u30b6\u30fc\u3067 http:\/\/localhost:3000\/boards\/index \u3053\u3093\u306a\u611f\u3058\u306e\u3082\u306e\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u6210\u529f\u3067\u3059\u3002 Rails\u3067\u8aad\u307f\u8fbc\u3093\u3060\u30c7\u30fc\u30bf\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6e21\u3057\u3066\u4e00\u89a7\u8868\u793a\u3059\u308b \u5148\u307b\u3069\u306e\u52d5\u4f5c\u78ba\u8a8d\u3067\u306f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u3093\u3060\u306b\u3082\u304b\u304b\u308f\u3089\u305a\u3001 \u305d\u306e\u30c7\u30fc\u30bf\u3092\u4e00\u5207\u5229\u7528\u3057\u3066\u3044\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u4eca\u56de\u306f\u8aad\u307f\u8fbc\u3093\u3060\u30c7\u30fc\u30bf\u3092\u4f7f\u3063\u3066 \u4e00\u89a7\u8868\u793a\u3092\u3057\u3066\u307f\u307e\u3059\u3002 View View\u30d5\u30a1\u30a4\u30eb\u3092\u7de8\u96c6\u3057\u307e\u3059\u3002 app\/views\/boards\/index.html.erb [bash] [\/bash] BoardList\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8abf\u6574 \u3053\u3053\u3067\u4f55\u304c\u8d77\u3053\u3063\u3066\u3044\u308b\u304b\u3068\u3044\u3046\u3068\u3001 View\u306ereact_component \u306e\uff12\u3064\u76ee\u306e\u5f15\u6570\u306b \u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u8aad\u307f\u8fbc\u3093\u3060 \u63b2\u793a\u677f\u4e00\u89a7\u30c7\u30fc\u30bf(@boards)\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u307e\u3059\u3002 datas : @boards \u3068\u306a\u3063\u3066\u3044\u308b\u306e\u306f\u3001 BoardList\u30af\u30e9\u30b9\u3067\u306f datas\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u63b2\u793a\u677f\u4e00\u89a7\u30c7\u30fc\u30bf\u3092 \u30bb\u30c3\u30c8\u3059\u308b\u3088\u3068\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3059\u3002 \u3053\u3053\u3067\u3088\u3046\u3084\u304f\u30c7\u30fc\u30bf\u304c\u6e21\u3063\u3066\u304d\u305f\u306e\u3067BoardList\u30af\u30e9\u30b9\u5185\u3067 \u63b2\u793a\u677f\u4e00\u89a7\u3092\u51fa\u529b\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002 lines \u3068\u3044\u3046\u914d\u5217\u5909\u6570\u3092\u5b9a\u7fa9\u3057\u3001View\u304b\u3089\u6e21\u3055\u308c\u305f @boards\u306e\u5185\u5bb9\u3092 this.props.datas\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4ecb\u3057\u3066\u8aad\u307f\u8fbc\u307f\u3001\u30eb\u30fc\u30d7\u3057\u306a\u304c\u3089 DataLine\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u51fa\u529b\u3057\u3066\u3044\u307e\u3059\u3002 [bash] class BoardList extends React.Component{ constructor(props){ super(props); } render(){ var lines = []; var i; for (i = 0 ; i < this.props.datas.length ; i++){ var data = this.props.datas[i]; lines.push(); } return ( \u63b2\u793a\u677f\u4e00\u89a7 {lines} ); } } [\/bash] DataLine\u30af\u30e9\u30b9\u3092\u51fa\u529b\u3057\u307e\u3057\u305f\u304c\u3001\u809d\u5fc3\u306eDataLine\u30af\u30e9\u30b9\u304c\u7121\u3044\u306e\u3067 \u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3059\u3002 \u304a\u4f5c\u6cd5\u7684\u306b\u306f\u5225\u30d5\u30a1\u30a4\u30eb\u306b\u8a18\u8ff0\u3059\u308b\u306e\u304c\u826f\u3044\u306e\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001 \u3068\u308a\u3042\u3048\u305a\u3001BoardList\u30af\u30e9\u30b9\u3068\u540c\u3058\u30d5\u30a1\u30a4\u30eb\u306b\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002 [bash] class BoardLine extends React.Component{ constructor(props){ super(props); } render(){ return ( {this.props.data.id} {this.props.data.title} ); } } [\/bash] \u3061\u3087\u3063\u3068\u898b\u6804\u3048\u304c\u60aa\u3044\u306e\u3067CSS\u3082\u8ffd\u52a0\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002 app\/assets\/stylesheets\/boards.scss [bash] div.board-line{ .board-id{ display: inline-block; width: 50px; padding: 5px; } .board-title{ display: inline-block;...\n<\/p>\n","protected":false},"author":1,"featured_media":1361,"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":[1],"tags":[71,72],"class_list":{"0":"post-1545","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-1","8":"tag-rails","9":"tag-reactjs"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1545"}],"version-history":[{"count":2,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1545\/revisions"}],"predecessor-version":[{"id":1565,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1545\/revisions\/1565"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/media\/1361"}],"wp:attachment":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}