{"id":1547,"date":"2017-04-13T11:49:48","date_gmt":"2017-04-13T02:49:48","guid":{"rendered":"http:\/\/lovelinux.mydns.jp\/?p=1547"},"modified":"2017-04-13T12:22:39","modified_gmt":"2017-04-13T03:22:39","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-4","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=1547","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.2"},"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\u3002<br \/>\n<a href=\"http:\/\/lovelinux.mydns.jp\/?p=1545\">\u524d\u56de\u306eVol.1<\/a>\u306f\u63b2\u793a\u677f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u3060\u3051\u3067\u7d42\u308f\u3063\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u304c\u3001\u4eca\u56de\u306f\u672c\u683c\u7684\u306a<br \/>\n\u63b2\u793a\u677f\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3059\u3002\u591a\u5206\u9577\u304f\u306a\u308b\u3068\u601d\u3044\u307e\u3059\u306e\u3067\u3001\u3088\u308d\u3057\u304f\u304a\u4ed8\u304d\u5408\u3044\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\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<br \/>\n<a href=\"https:\/\/github.com\/h-mito\/rails_with_react\">https:\/\/github.com\/h-mito\/rails_with_react<\/a><\/p>\n<p>\u30b9\u30c6\u30fc\u30c8\u306e\u7ba1\u7406\u3084\u3089\u3001\u30a4\u30d9\u30f3\u30c8\u306e\u5f15\u304d\u6e21\u3057\u65b9\u304c\u3044\u307e\u3044\u3061\u308f\u304b\u3089\u306a\u3044\u3068\u3044\u3046\u65b9\u306f\u3001<br \/>\nRails\u3068\u306f\u95a2\u4fc2\u306a\u3044\u3000<a href=\"http:\/\/lovelinux.mydns.jp\/?p=1551\">ToDoList\u306e\u8a18\u4e8b<\/a>\u3000\u3092\u53c2\u7167\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h3>\u5b8c\u6210\u30a4\u30e1\u30fc\u30b8<\/h3>\n<p>\u3053\u3093\u306a\u611f\u3058\u306e\u3082\u306e\u304c\u3067\u304d\u308c\u3070\u3044\u3044\u306a\u3068\u3044\u3046\u7406\u60f3\u578b\u3067\u3059\u3002<br \/>\n<a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17-1024x587.png\" alt=\"rails-17\" width=\"806\" height=\"462\" class=\"alignnone size-large wp-image-1394\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17-1024x587.png 1024w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17-300x172.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17-768x440.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17.png 1041w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<p>\u3053\u308c\u3092\u30d1\u30fc\u30c4\uff08ReactJS\u306e\u30af\u30e9\u30b9\uff09\u306b\u5206\u89e3\u3057\u3066\u307f\u308b\u3068\u3053\u3093\u306a\u611f\u3058\u306b\u306a\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-7.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-7-1024x478.png\" alt=\"rails-7\" width=\"806\" height=\"376\" class=\"alignnone size-large wp-image-1362\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-7-1024x478.png 1024w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-7-300x140.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-7-768x358.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-7.png 1500w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<h3>\u3044\u3056\u958b\u59cb<\/h3>\n<h4>React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210<\/h4>\n<p>app\/assets\/javascripts\/components\/board_and_commen.js.jsx<br \/>\n\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<br \/>\nrails g\u3000\u3067\u3084\u3063\u3066\u3082\u3044\u3044\u306e\u3067\u3059\u304c\u3001\u3069\u3046\u305b\u5168\u90e8\u6d88\u3057\u3061\u3083\u3046\u306e\u3067\u624b\u3067\u4f5c\u308a\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u3067\u306f\u3001\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u6700\u4e0a\u5c64\u90e8\u306e\u30af\u30e9\u30b9\u3068\u306a\u308b<br \/>\nBoardAndComment\u30af\u30e9\u30b9\u3092\u5b9a\u7fa9\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardAndComment extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div>\n        \u7a7a\u3063\u307d\u3002\n      <\/div>\n<p>    );<br \/>\n  }<br \/>\n}<\/p>\n<p>[\/bash]<\/p>\n<h4>View\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210\u3068\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30fbroutes\u8abf\u6574<\/h4>\n<p>app\/views\/boards\/bandc.html.erb<br \/>\n\u306bView\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n<p>\u4e2d\u8eab\u306f<\/p>\n<p>[bash]<br \/>\n<%= react_component('BoardAndComment') %><\/p>\n<p>[\/bash]<\/p>\n<p>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306b\u30e1\u30bd\u30c3\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<br \/>\napp\/controllers\/boards_controller.rb<\/p>\n<p>[bash]<\/p>\n<p>class BoardsController < ApplicationController\n  def index\n    @boards = Board.all\n  end\n\n  def bandc\n    @boards = Board.all\n  end\n  \nend\n[\/bash]\n\nroutes.rb\u306b1\u884c\u30eb\u30fc\u30c8\u3092\u8ffd\u8a18\u3057\u307e\u3059\u3002\nconfig\/routes.rb\n\n[bash]\n  get 'boards\/bandc'\n[\/bash]\n\n\n\n\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\/bandc<\/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-9.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-9.png\" alt=\"rails-9\" width=\"634\" height=\"296\" class=\"alignnone size-full wp-image-1367\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-9.png 634w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-9-300x140.png 300w\" sizes=\"auto, (max-width: 634px) 100vw, 634px\" \/><\/a><\/p>\n<h4>2\u968e\u5c64\u76ee\u3068\u306a\u308b3\u3064\u306e\u30af\u30e9\u30b9\u3092\u5b9a\u7fa9\u3057\u3066\u3001\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb(1\u968e\u5c64\u76ee\uff09\u306erender\u30e1\u30bd\u30c3\u30c9\u3067<br \/>\n2\u968e\u5c64\u76ee\u3092\u30ec\u30f3\u30c0\u30fc\u3059\u308b<\/h4>\n<p>\u3053\u3053\u3067\u306f2\u968e\u5c64\u76ee\u3068\u306a\u308b3\u3064\u306e\u30af\u30e9\u30b9\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<br \/>\n3\u3064\u306e\u30af\u30e9\u30b9\u306f\u5148\u307b\u3069\u3068\u540c\u3058\u3088\u3046\u306b\u5358\u7d14\u306b\u56fa\u5b9a\u6587\u5b57\u3092\u51fa\u529b\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardAndComment extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div className=\"bandc\">\n<div className=\"left-side\">\n          <BoardList2 \/>\n        <\/div>\n<div className=\"right-side\">\n          <CommentAdd \/><br \/>\n          <CommentList \/>\n        <\/div>\n<\/p><\/div>\n<p>    );<br \/>\n  }<br \/>\n}<\/p>\n<p>class BoardList2 extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div>\n        \u63b2\u793a\u677f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u5834\u6240\u3067\u3059\u3002\n      <\/div>\n<p>    );<br \/>\n  }<\/p>\n<p>}<\/p>\n<p>class CommentAdd extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div>\n        \u63b2\u793a\u677f\u306b\u6295\u7a3f\u3092\u8ffd\u52a0\u3059\u308b\u6a5f\u80fd\u3092\u8868\u793a\u3059\u308b\u5834\u6240\u3067\u3059\u3002\n      <\/div>\n<p>    );<br \/>\n  }<\/p>\n<p>}<\/p>\n<p>class CommentList extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div>\n        \u63b2\u793a\u677f\u5185\u306e\u6295\u7a3f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u5834\u6240\u3067\u3059\u3002\n      <\/div>\n<p>    );<br \/>\n  }<\/p>\n<p>}<\/p>\n<p>[\/bash]<\/p>\n<h4>CSS\u306e\u8abf\u6574<\/h4>\n<p>app\/assets\/stylesheets\/boards.scss<br \/>\n\u306b\u4ee5\u4e0b\u3092\u8ffd\u8a18\u3002<\/p>\n<p>[bash]<br \/>\ndiv.left-side{<br \/>\n  float: left;<br \/>\n  width: 400px;<br \/>\n}<\/p>\n<p>div.right-side{<br \/>\n  float: left;<br \/>\n  width: 600px;<br \/>\n}<\/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\/bandc<\/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-10.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-10.png\" alt=\"rails-10\" width=\"905\" height=\"360\" class=\"alignnone size-full wp-image-1369\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-10.png 905w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-10-300x119.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-10-768x306.png 768w\" sizes=\"auto, (max-width: 905px) 100vw, 905px\" \/><\/a><\/p>\n<h3>\u30b9\u30c6\u30fc\u30c8\u3067\u7ba1\u7406\u3059\u308b\u3082\u306e\u3092\u8003\u3048\u308b<\/h3>\n<p>\u3067\u306f\u63b2\u793a\u677f\u306b\u6295\u7a3f\u3059\u308b\u6a5f\u80fd\u5168\u4f53\u3067\u30b9\u30c6\u30fc\u30c8\u3068\u3057\u3066\u7ba1\u7406\u3057\u306a\u304d\u3083\u306a\u3089\u306a\u3044\u3082\u306e\u306f\u4f55\u3067\u3057\u3087\u3046\u304b\uff1f<br \/>\n\u5909\u5316\u3057\u305d\u3046\u306a\u3082\u306e\u306b\u63b2\u793a\u677f\u4e00\u89a7\u30fb\u6295\u7a3f\u6587\u5b57\u3092\u5165\u529b\u3059\u308b\u30a8\u30ea\u30a2\u306b\u5165\u529b\u3055\u308c\u305f\u6587\u5b57\u3001\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u3001\u6295\u7a3f\u4e00\u89a7<br \/>\n\u306e\uff14\u3064\u307b\u3069\u304c\u8003\u3048\u3089\u308c\u307e\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306e\u6700\u7d42\u76ee\u6a19\u306f\u9078\u629e\u3057\u305f\u63b2\u793a\u677f\u306b\u6295\u7a3f\u304c\u8ffd\u52a0\u3067\u304d\u308b\u3000\u3068\u3044\u3046\u3082\u306e\u306a\u306e\u3067\u3001<br \/>\n\u63b2\u793a\u677f\u4e00\u89a7\u306f \u6700\u521d\u306b\u8aad\u307f\u8fbc\u3093\u3060\u5024\u304b\u3089\u4e0d\u5909\u3067\u3059\u306e\u3067\u3001\u30b9\u30c6\u30fc\u30c8\u3068\u3057\u3066\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u306f\u306a\u3057\u3002<br \/>\n\u6295\u7a3f\u6587\u5b57\u306b\u95a2\u3057\u3066\u306f\u3001\u6bce\u5ea6\u6bce\u5ea6\u9055\u3046\u6587\u5b57\u304c\u5165\u529b\u3055\u308c\u308b\u306e\u3067\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u3042\u308a\u3002<br \/>\n\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u306f\u666e\u901a\u306e\u63b2\u793a\u677f\u3067\u3042\u308c\u3070\u30ed\u30b0\u30a4\u30f3\u3057\u305f\u4eba\u306eID\u3092\u7528\u3044\u308b\u306e\u3067\u3001\u5909\u5316\u3057\u307e\u305b\u3093\u304c\u30fb\u30fb<br \/>\n\u30ed\u30b0\u30a4\u30f3\u51e6\u7406\u3092\u8a2d\u3051\u306a\u3044\u3001\u4eca\u56de\u306e\u63b2\u793a\u677f\u3067\u306f\u6295\u7a3f\u306e\u969b\u306b\u30e6\u30fc\u30b6\u30fcID\u3092Select\u30dc\u30c3\u30af\u30b9\u3067\u9078\u629e\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002<br \/>\n\u3064\u307e\u308a\u5909\u5316\u3059\u308b\u306e\u3067\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u3042\u308a\u3067\u3059\u3002<br \/>\n\u6295\u7a3f\u5bfe\u8c61\u306e\u63b2\u793a\u677f\u3082\u5909\u5316\u3059\u308b\u306e\u3067\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u3042\u308a\u3067\u3059\u3002<br \/>\n\u6295\u7a3f\u4e00\u89a7\u3082\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u3061\u3087\u3063\u3068\u96e3\u3057\u3044\u304b\u3082\u3067\u3059\u306d\u3002\u3053\u308c\u3001\u6163\u308c\u3067\u3059\u306e\u3067\u3001\u3060\u3093\u3060\u3093\u308f\u304b\u3063\u3066\u304f\u308b\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n\u3064\u307e\u308a\u3053\u308c\u3060\u3051\u306e\u6a5f\u80fd\u306f\u3042\u308b\u3051\u3069\u3001ReactJS\u3067\u7ba1\u7406\u3059\u308b\u30b9\u30c6\u30fc\u30c8\u306f<br \/>\n<strong>\u6295\u7a3f\u3059\u308b\u6587\u5b57\u3000\u3068 \u6295\u7a3f\u3059\u308b\u30e6\u30fc\u30b6\u30fc\u3000\u3068\u6295\u7a3f\u5bfe\u8c61\u306e\u63b2\u793a\u677f \u3068\u6295\u7a3f\u4e00\u89a7\u306e\uff14\u3064\u3060\u3051<\/strong>\u3068\u3044\u3046\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u3067\u3001\u3069\u3053\u3067\u7ba1\u7406\u3059\u308b\u304b\u3068\u3044\u3046\u3068\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u306e\u30af\u30e9\u30b9\u3067\u3042\u308bBoardAndComment\u30af\u30e9\u30b9\u3067\u3059\u3002<br \/>\nboard_title \u3068 board_description\u306b\u3064\u3044\u3066\u306f\u3001\u305d\u308c\u307b\u3069\u91cd\u8981\u306a\u30b9\u30c6\u30fc\u30c8\u3067\u306f\u306a\u3044\u306e\u3067\u3001<br \/>\n\u4eca\u306e\u3068\u3053\u308d\u306f\u7121\u8996\u3057\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>BoardAndComment\u30af\u30e9\u30b9\u306b\u3053\u306e\u30b9\u30c6\u30fc\u30c8\u7ba1\u7406\u90e8\u5206\u3092\u8ffd\u8a18\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u30fc(constructor)\u3067\u5024\u3092\u521d\u671f\u5316\u3057\u3066\u3001\u6295\u7a3f\u6587\u5b57\u304c\u5909\u5316\u3057\u305f\u6642\u306b\u30b9\u30c6\u30fc\u30c8\u3092<br \/>\n\u5909\u5316\u3055\u305b\u308b\u30e1\u30bd\u30c3\u30c9(handleCommentChange)\u3092\u5b9a\u7fa9\u3057\u3066\u3001<br \/>\n\u30ec\u30f3\u30c0\u30fc\u30e1\u30bd\u30c3\u30c9\u3067\u3001CommentAdd\u30af\u30e9\u30b9\u3092\u30ec\u30f3\u30c0\u30fc\u3059\u308b\u969b\u306b<br \/>\nCommentAdd\u30af\u30e9\u30b9\u5185\u3067\u8d77\u3053\u308b\u30a4\u30d9\u30f3\u30c8\u3092\u81ea\u5206\u306e\u30af\u30e9\u30b9\u3067\u51e6\u7406\u3067\u304d\u308b\u3088\u3046\u306b\u8a18\u8ff0\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<p>\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u304c\u5909\u5316\u3057\u305f\u6642\u306b\u30b9\u30c6\u30fc\u30c8\u3092<br \/>\n\u5909\u5316\u3055\u305b\u308b\u30e1\u30bd\u30c3\u30c9(handleUserChange)\u3092\u5b9a\u7fa9\u3057\u3066\u3001<br \/>\n\u30ec\u30f3\u30c0\u30fc\u30e1\u30bd\u30c3\u30c9\u3067\u3001CommentAdd\u30af\u30e9\u30b9\u3092\u30ec\u30f3\u30c0\u30fc\u3059\u308b\u969b\u306b<br \/>\nCommentAdd\u30af\u30e9\u30b9\u5185\u3067\u8d77\u3053\u308b\u30a4\u30d9\u30f3\u30c8\u3092\u81ea\u5206\u306e\u30af\u30e9\u30b9\u3067\u51e6\u7406\u3067\u304d\u308b\u3088\u3046\u306b\u8a18\u8ff0\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<p>\u6b8b\u308a\u306e\uff12\u3064\u3082\u304a\u3044\u304a\u3044\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardAndComment extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n    this.state = {comment: &#8221;, user_id: 1, board_id: -1, comments: [], board_title: &#8221;, board_description: &#8221;};<br \/>\n  }<\/p>\n<p>  handleCommentChange(cm){<br \/>\n    this.setState({comment: cm});<br \/>\n  }<\/p>\n<p>  handleUserChange(id){<br \/>\n    alert(id);<br \/>\n  }<\/p>\n<p>  handleBoardSelect(id){<br \/>\n    alert(id);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div className=\"bandc\">\n<div className=\"left-side\">\n          <BoardList2\n            datas={this.props.datas}\n            onBoardSelect={(id) => this.handleBoardSelect(id)}<br \/>\n           \/>\n        <\/div>\n<div className=\"right-side\">\n          <CommentAdd \n            onUserChange={(uid) => this.handleUserChange(uid)}<br \/>\n            onCommentChange={(cm) => this.handleCommentChange(cm)} \/><br \/>\n          <CommentList datas={this.state.comments} \/>\n        <\/div>\n<\/p><\/div>\n<p>    );<br \/>\n  }<br \/>\n}<\/p>\n<p>[\/bash]<\/p>\n<h4>\u63b2\u793a\u677f\u4e00\u89a7\u3092\u5b9f\u88c5\u3059\u308b<\/h4>\n<p>\u3053\u308c\u306f\u524d\u56de\u3084\u3063\u305f\u5185\u5bb9\u3068\u307b\u307c\u540c\u3058\u3067\u3059\u306e\u3067\u3001\u30bd\u30fc\u30b9\u3060\u3051\u63d0\u793a\u3057\u3066\u3001<br \/>\n\u5909\u5316\u3057\u3066\u3044\u308b\u3054\u304f\u50c5\u304b\u306a\u90e8\u5206\u3060\u3051\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n<p>View\u306e\u8abf\u6574<br \/>\n[bash]<br \/>\n<%= react_component('BoardAndComment', {datas: @boards}) %><\/p>\n<p>[\/bash]<\/p>\n<p>\u307e\u305a\u306f\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u306eBoardAndComment\u30af\u30e9\u30b9\u306e\u5909\u5316\u7b87\u6240\u3002<br \/>\nrender\u30e1\u30bd\u30c3\u30c9\u5185\u3067 BoardList2\u3092\u30ec\u30f3\u30c0\u30fc\u3057\u3066\u3044\u308b\u90e8\u5206\u3067<br \/>\ndatas\u30a2\u30c8\u30ea\u30d3\u30e5\u30fc\u30c8\u306b this.props.datas\u3000\u3092\u6e21\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardAndComment extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n    this.state = {comment: &#8221;};<br \/>\n  }<\/p>\n<p>  handleCommentChange(cm){<br \/>\n    this.setState({comment: cm});<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div className=\"bandc\">\n<div className=\"left-side\">\n          <BoardList2 datas={this.props.datas} \/>\n        <\/div>\n<div className=\"right-side\">\n          <CommentAdd onCommentChange={(cm) => this.handleCommentChange(cm)} \/><br \/>\n          <CommentList datas={this.state.comments} \/>\n        <\/div>\n<\/p><\/div>\n<p>    );<br \/>\n  }<br \/>\n}<\/p>\n<p>[\/bash]<\/p>\n<p>\u6b21\u306b2\u968e\u5c64\u76ee\u306eBoardList2\u30af\u30e9\u30b9\u3002render\u30e1\u30bd\u30c3\u30c9\u3067 BoardList2\u30af\u30e9\u30b9\u3092\u30ec\u30f3\u30c0\u30fc\u3059\u308b\u969b\u306b<br \/>\nBoardList2\u30af\u30e9\u30b9\u5185\u3067\u8d77\u3053\u308b\u3067\u3042\u308d\u3046\u63b2\u793a\u677f\u9078\u629e\u306e\u30a4\u30d9\u30f3\u30c8(onBoardSelect)\u3092\u81ea\u5206\u306e<br \/>\n\u30af\u30e9\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u5185\u3067\u51e6\u7406\u3055\u305b\u3066\u3044\u308b\u3002<br \/>\n\u3082\u3046\u3072\u3068\u3064\u306f\u3001\u305d\u306e\u51e6\u7406\u3082\u81ea\u5206\u3067\u306f\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3057\u3088\u3046\u304c\u306a\u3044\u306e\u3067\u3001\u3082\u3046\uff11\u968e\u5c64\u4e0a\u306e\u30af\u30e9\u30b9\u306b<br \/>\n\u4efb\u305b\u3066\u3044\u308b(handleBoardSelect)<\/p>\n<p>[bash]<br \/>\nclass BoardList2 extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  handleBoardSelect(id){<br \/>\n\t  this.props.onBoardSelect(id);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    var lists = [];<br \/>\n    var i;<br \/>\n    for (i = 0; i < this.props.datas.length; i ++){\n      var data = this.props.datas[i];\n      lists.push(<BoardLine2\n                    data={data}\n                    key={data.id}\n                    onBoardSelect={(id) => this.handleBoardSelect(id)}<br \/>\n                   \/>);<br \/>\n    }<\/p>\n<p>    return (<\/p>\n<div>\n        \u63b2\u793a\u677f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u5834\u6240\u3067\u3059\u3002<br \/>\n        {lists}\n      <\/div>\n<p>    );<br \/>\n  }<\/p>\n<p>}<\/p>\n<p>[\/bash]<\/p>\n<p>\u6700\u5f8c\u306b\uff13\u968e\u5c64\u76ee\u306e\u30af\u30e9\u30b9\u3067\u3042\u308bBoardLine2\u30af\u30e9\u30b9\u3002<br \/>\n\u884c\u306e\u53f3\u7aef\u306b\u9078\u629e\u30dc\u30bf\u30f3\u304c\u3042\u308a\u3001\u305d\u306e\u30af\u30ea\u30c3\u30af\u51e6\u7406\u3092<br \/>\nonBoardSelect\u30a4\u30d9\u30f3\u30c8\u3068\u3057\u3066\uff11\u56de\u5c64\u4e0a\u306e\u30af\u30e9\u30b9\u306b\u4efb\u305b\u3066\u3044\u308b\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardLine2 extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  handleOnClick(){<br \/>\n    this.props.onBoardSelect(this.props.data.id);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div className=\"blist2\">\n        <label className=\"board-title\"><br \/>\n          {this.props.data.title}<br \/>\n        <\/label><br \/>\n        <button onClick = {() => this.handleOnClick()} ><br \/>\n          \u9078\u629e<br \/>\n        <\/button>\n      <\/div>\n<p>    );<br \/>\n  }<br \/>\n}<br \/>\n[\/bash]<\/p>\n<p>\u6700\u5f8c\u306e\u6700\u5f8c\u306b\u898b\u6804\u3048\u8abf\u6574\u306e\u305f\u3081\u306eCSS<br \/>\n[bash]<br \/>\ndiv.blist2{<br \/>\n  .board-title{<br \/>\n    display: inline-block;<br \/>\n    width: 320px;<br \/>\n  }<br \/>\n}<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\/bandc<\/p>\n<p>\u3053\u3093\u306a\u611f\u3058\u306e\u3082\u306e\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u6210\u529f\u3067\u3059<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-11.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-11.png\" alt=\"rails-11\" width=\"806\" height=\"275\" class=\"alignnone size-large wp-image-1376\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-11.png 809w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-11-300x102.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-11-768x262.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-11-806x276.png 806w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<h4>\u30a4\u30d9\u30f3\u30c8\u306e\u4e0a\u4f4d\u968e\u5c64\u3078\u306e\u9023\u643a<\/h4>\n<p>BoardLine2\u30af\u30e9\u30b9\u306e\u300c\u9078\u629e\u30dc\u30bf\u30f3\u300d\u306e\u30af\u30ea\u30c3\u30af\u51e6\u7406\u306f\uff11\u3064\u4e0a\u306e\u968e\u5c64\u307e\u3067\u306f\u4f1d\u3048\u307e\u3057\u305f\u304c\u3001<br \/>\n\uff11\u3064\u4e0a\u306e\u968e\u5c64\u304cBoardList2\u30af\u30e9\u30b9\u306a\u306e\u3067\u3001\u3082\u3046\uff11\u968e\u5c64\u4e0a\u307e\u3067\u4f1d\u3048\u3066\u3042\u3052\u306a\u304d\u3083\u306a\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u3067\u3001\u3069\u3046\u3059\u308b\u304b\u3068\u3044\u3046\u3068\u3001\u3084\u308a\u65b9\u306f\u307b\u307c\u540c\u3058\u3067<br \/>\nBoardList2\u30af\u30e9\u30b9\u3092\u30ec\u30f3\u30c0\u30fc\u3059\u308b\u969b\u306b\u30a4\u30d9\u30f3\u30c8\u51e6\u7406(onBoardSelect)\u3092\u5b9a\u7fa9\u3057\u3066\u3042\u3052\u3066\u3001<br \/>\n\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u30af\u30e9\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u3067\u51e6\u7406\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardAndComment extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n    this.state = {comment: &#8221;, user_id: 1, board_id: -1, comments: [], board_title: &#8221;, board_description: &#8221;};<br \/>\n  }<\/p>\n<p>  handleCommentChange(cm){<br \/>\n    this.setState({comment: cm});<br \/>\n  }<\/p>\n<p>  handleBoardSelect(id){<br \/>\n    alert(id);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div className=\"bandc\">\n<div className=\"left-side\">\n          <BoardList2\n            datas={this.props.datas}\n            onBoardSelect={(id) => this.handleBoardSelect(id)}<br \/>\n           \/>\n        <\/div>\n<div className=\"right-side\">\n          <CommentAdd onCommentChange={(cm) => this.handleCommentChange(cm)} \/><br \/>\n          <CommentList datas={this.state.comments} \/>\n        <\/div>\n<\/p><\/div>\n<p>    );<br \/>\n  }<br \/>\n}<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\/bandc<\/p>\n<p>\u4e00\u89a7\u304c\u8868\u793a\u3055\u308c\u3066\u3001\u9078\u629e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u3053\u3093\u306a\u611f\u3058\u306e\u3082\u306e\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u6210\u529f\u3067\u3059<br \/>\n<a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-12.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-12-1024x246.png\" alt=\"rails-12\" width=\"806\" height=\"194\" class=\"alignnone size-large wp-image-1375\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-12-1024x246.png 1024w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-12-300x72.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-12-768x184.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-12.png 1059w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<h3>\u6295\u7a3f\u3092\u8ffd\u52a0\u3059\u308b\u90e8\u5206\u3092\u5b9f\u88c5\u3059\u308b<\/h3>\n<p>\u753b\u9762\u5de6\u5074\u306e\u63b2\u793a\u677f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u90e8\u5206\u306f\u307b\u307c\u5b9f\u88c5\u3067\u304d\u305f\u306e\u3067\u3001\u4eca\u5ea6\u306f\u6295\u7a3f\u3092\u8ffd\u52a0\u3059\u308b\u90e8\u5206<br \/>\n\u3064\u307e\u308a\u753b\u9762\u306e\u53f3\u4e0a\u306e\u90e8\u5206\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u6295\u7a3f\u3059\u308b\u5bfe\u8c61\u3068\u306a\u308b\u63b2\u793a\u677f\u306f\u753b\u9762\u5de6\u306e\u4e00\u89a7\u3067\u300c\u9078\u629e\u30dc\u30bf\u30f3\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3082\u306e\u304c\u5bfe\u8c61\u306b\u306a\u308a\u307e\u3059\u306e\u3067\u3001<br \/>\n\u53f3\u4e0a\u306e\u6a5f\u80fd\u3068\u3057\u3066\u306f\u8003\u3048\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002<br \/>\n\u53f3\u4e0a\u306e\u6a5f\u80fd\u3064\u307e\u308a CommentAdd\u30af\u30e9\u30b9\u306e\u6a5f\u80fd\u3068\u3057\u3066\u5fc5\u8981\u306a\u306e\u306f\u3001<br \/>\n\u6295\u7a3f\u306e\u6587\u5b57\u304c\u5909\u5316\u3057\u305f\u3053\u3068\u3092\u30ad\u30e3\u30c3\u30c1\u3059\u308b\u3053\u3068\u3001\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u304c\u5909\u5316\u3057\u305f\u3053\u3068\u3092\u30ad\u30e3\u30c3\u30c1\u3059\u308b\u3053\u3068\u3002<br \/>\n\u6295\u7a3f\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3053\u3068\u3092\u30ad\u30e3\u30c3\u30c1\u3059\u308b\u3053\u3068\u3002<br \/>\n\u305d\u3057\u3066\u305d\u308c\u3089\u3092\u4e0a\u4f4d\u30af\u30e9\u30b9\u3078\u4f1d\u3048\u3066\u3042\u3052\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n<h4>CommentAdd\u30af\u30e9\u30b9<\/h4>\n<p>\u3067\u306f\u3000CommentAdd\u30af\u30e9\u30b9\u3092\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>[bash]<br \/>\nclass CommentAdd extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  handleOnUserChange(e){<br \/>\n    this.props.onUserChange(e.target.value);<br \/>\n  }<\/p>\n<p>  handleOnCommentChange(e){<br \/>\n    this.props.onCommentChange(e.target.value);<br \/>\n  }<\/p>\n<p>  handleCommentAdd(){<br \/>\n    this.props.onCommentAdd();<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    var users = [];<br \/>\n    var i;<br \/>\n    for (i = 0 ; i < this.props.users.length ; i++){\n      var user = this.props.users[i];\n      users.push(<option value={user.id}>{user.name}<\/option>);<br \/>\n    }<\/p>\n<p>    return (<\/p>\n<div className=\"cadd\">\n        \u63b2\u793a\u677f\u306b\u6295\u7a3f\u3092\u8ffd\u52a0\u3059\u308b\u6a5f\u80fd\u3092\u8868\u793a\u3059\u308b\u5834\u6240\u3067\u3059\u3002<br \/>\n        <label className=\"span1\">\u9078\u629e\u3055\u308c\u305f\u63b2\u793a\u677f<\/label><br \/>\n        <label>{this.props.board_title}<\/label><br \/>\n        <br \/>\n        <label className=\"span1\">\u63b2\u793a\u677f\u8a73\u7d30<\/label><br \/>\n        <label>{this.props.board_description}<\/label><br \/>\n        <br \/>\n        <label className=\"span1\">\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc<\/label><br \/>\n        <select onChange={(e) => this.handleOnUserChange(e)}><br \/>\n          {users}<br \/>\n        <\/select><br \/>\n        <br \/>\n        <label className=\"span1\">\u6295\u7a3f\u5185\u5bb9<\/label><br \/>\n        <br \/>\n        <textarea\n          rows = \"4\"\n          value={this.props.comment}\n          onChange={(e) => this.handleOnCommentChange(e)}<br \/>\n        \/><br \/>\n        <button\n          onClick={() => this.handleCommentAdd()}><br \/>\n          \u6295\u7a3f<br \/>\n        <\/button><br \/>\n        <\/p><\/div>\n<p>    );<\/p>\n<p>  }<br \/>\n}<br \/>\n[\/bash]<\/p>\n<h4>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u8abf\u6574<\/h4>\n<p>\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u306e\u4e00\u89a7\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u306e\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u8abf\u6574\u3057\u307e\u3059\u3002<br \/>\napp\/controllers\/boards_controller.rb<\/p>\n<p>[bash]<br \/>\nclass BoardsController < ApplicationController\n  def index\n    @boards = Board.all\n  end\n\n  def bandc\n    @boards = Board.all\n    @users = User.all\n  end\n\nend\n[\/bash]\n\n\n\n<h4>View\u306e\u8abf\u6574<\/h4>\n<p>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u8aad\u307f\u8fbc\u3093\u3060 @users\u3092 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u521d\u671f\u5024\u3068\u3057\u3066\u6e21\u3057\u307e\u3059\u3002<br \/>\napp\/views\/boards\/bandc.html.erb<\/p>\n<p>[bash]<br \/>\n<%= react_component('BoardAndComment', {datas: @boards, users: @users}) %><\/p>\n<p>[\/bash]<\/p>\n<h4>BoardAndComment\u30af\u30e9\u30b9\u306e\u8abf\u6574<\/h4>\n<p>render\u30e1\u30bd\u30c3\u30c9\u3067 CommentAdd\u30af\u30e9\u30b9\u3092\u30ec\u30f3\u30c0\u30fc\u3059\u308b\u969b\u306b@users\u306e\u5024\u3092\u6e21\u3057\u3066\u3042\u3052\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardAndComment extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n    this.state = {comment: &#8221;, user_id: 1, board_id: -1, comments: [], board_title: &#8221;, board_description: &#8221;};<br \/>\n  }<\/p>\n<p>  handleCommentChange(cm){<br \/>\n    this.setState({comment: cm});<br \/>\n  }<\/p>\n<p>  handleUserChange(id){<br \/>\n    alert(id);<br \/>\n  }<\/p>\n<p>  handleBoardSelect(id){<br \/>\n    alert(id);<br \/>\n  }<\/p>\n<p>  handleCommentAdd(){<br \/>\n    alert(&#8220;comment post&#8221;);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    return (<\/p>\n<div className=\"bandc\">\n<div className=\"left-side\">\n          <BoardList2\n            datas={this.props.datas}\n            onBoardSelect={(id) => this.handleBoardSelect(id)}<br \/>\n           \/>\n        <\/div>\n<div className=\"right-side\">\n          <CommentAdd\n            users={this.props.users}\n            onUserChange={(uid) => this.handleUserChange(uid)}<br \/>\n            onCommentChange={(cm) => this.handleCommentChange(cm)}<br \/>\n            onCommentAdd={() => this.handleCommentAdd()}<br \/>\n           \/><br \/>\n          <CommentList datas={this.state.comments} \/>\n        <\/div>\n<\/p><\/div>\n<p>    );<br \/>\n  }<br \/>\n}<\/p>\n<p>[\/bash]<\/p>\n<h4>CSS\u306e\u8abf\u6574<\/h4>\n<p>\u898b\u6804\u3048\u3092\u8abf\u6574\u3057\u307e\u3059\u3002<br \/>\napp\/assets\/stylesheets\/boards.scss<\/p>\n<p>[bash]<br \/>\ndiv.cadd{<br \/>\n  .span1{<br \/>\n    display: inline-block;<br \/>\n    width: 100px;<br \/>\n  }<\/p>\n<p>  textarea{<br \/>\n    width: 450px;<br \/>\n    float: left;<br \/>\n  }<br \/>\n  button {<br \/>\n    width: 80px;<br \/>\n    height: 60px;<br \/>\n  }<br \/>\n}<br \/>\n[\/bash]<\/p>\n<h3>\u30b3\u30e1\u30f3\u30c8\u3092\u6295\u7a3f\u3059\u308b\u6a5f\u80fd\u3092\u8003\u3048\u308b<\/h3>\n<p>\u3053\u3053\u307e\u3067\u306e\u3068\u3053\u308d\u3092\u307e\u305a\u52d5\u4f5c\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/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\/bandc<\/p>\n<p>\u6295\u7a3f\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30e1\u30c3\u30bb\u30fc\u30b8\u30dc\u30c3\u30af\u30b9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u306d\u3002<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-13.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-13.png\" alt=\"rails-13\" width=\"1009\" height=\"282\" class=\"alignnone size-full wp-image-1381\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-13.png 1009w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-13-300x84.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-13-768x215.png 768w\" sizes=\"auto, (max-width: 1009px) 100vw, 1009px\" \/><\/a><\/p>\n<p>\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30e1\u30c3\u30bb\u30fc\u30b8\u30dc\u30c3\u30af\u30b9\u304c\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u306e\u30af\u30e9\u30b9\u304b\u3089\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u3068\u3044\u3046\u3053\u3068\u306f\u30fb\u30fb\u30fb<br \/>\n\u3042\u3068\u306f\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u3068\u6295\u7a3f\u5185\u5bb9\u3001\u5bfe\u8c61\u3068\u306a\u308b\u63b2\u793a\u677f\u304c\u5206\u304b\u308c\u3070\u3001\u30c7\u30fc\u30bf\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u306d\u3002<\/p>\n<p>\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u30af\u30e9\u30b9(BoardAndComment\u30af\u30e9\u30b9\uff09\u306e\u3053\u308c\u307e\u3067\u306e\u30bd\u30fc\u30b9\u3092\u8997\u3044\u3066\u307f\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardAndComment extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n    this.state = {comment: &#8221;, user_id: 1, board_id: -1, comments: [], board_title: &#8221;, board_description: &#8221;};<br \/>\n  }<\/p>\n<p>  handleCommentChange(cm){<br \/>\n    this.setState({comment: cm});<br \/>\n  }<\/p>\n<p>  handleUserChange(id){<br \/>\n    alert(id);<br \/>\n  }<\/p>\n<p>  handleBoardSelect(id){<br \/>\n    alert(id);<br \/>\n  }<\/p>\n<p>  handleCommentAdd(){<br \/>\n    alert(&#8220;comment post&#8221;);<br \/>\n  }<\/p>\n<p>  render(){<\/p>\n<p>\u3000\u3000\u4ee5\u4e0b\u7565<br \/>\n[\/bash]<\/p>\n<p>\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u306f handleUserChange\u3067ID\u304c\u6e21\u3063\u3066\u304d\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u5185\u3067\u30b9\u30c6\u30fc\u30c8\u3092\u5909\u5316\u3055\u305b\u308c\u3070\u3044\u3044\u3002<br \/>\n\u6295\u7a3f\u6587\u5b57\u5217\u306f\u3059\u3067\u306b\u5909\u5316\u306e\u5185\u5bb9\u3092\u30bb\u30c3\u30c8\u6e08\u307f\u3002<br \/>\n\u5bfe\u8c61\u3068\u306a\u308b\u63b2\u793a\u677f\u3082handleBoardSelect\u3067ID\u304c\u6e21\u3063\u3066\u304d\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u5185\u3067\u30b9\u30c6\u30fc\u30c8\u3092\u5909\u5316\u3055\u305b\u308c\u3070\u3044\u3044\u3002<\/p>\n<p>\u3064\u307e\u308a\u6295\u7a3f\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u51e6\u7406\u306f\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u30af\u30e9\u30b9\u306e handleCommentAdd\u30e1\u30bd\u30c3\u30c9\u3067\u611f\u77e5\u3067\u304d\u307e\u3059\u3057\u3001<br \/>\n\u6295\u7a3f\u3059\u3079\u304d\u5185\u5bb9\u306f\u5168\u3066\u30b9\u30c6\u30fc\u30c8\u3092\u898b\u308c\u3070\u308f\u304b\u308b\u3088\u3046\u306a\u72b6\u614b\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3059\u3002\u3002\u3002\u7d20\u6674\u3089\u3057\u3044\u3002<br \/>\n\u3068\u3044\u3046\u304b\u305d\u3046\u306a\u308b\u3088\u3046\u306b\u7d44\u3093\u3067\u304d\u305f\u306e\u3067\u5f53\u305f\u308a\u524d\u306a\u306e\u3067\u3059\u304c\u30fb\u30fb\u30fb<\/p>\n<p>\u3067\u306f\u3001\u4e0a\u8a18\u306e\u90e8\u5206\u3000\u6b63\u3057\u304f\u66f8\u304d\u306a\u304a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>[bash]<br \/>\nclass BoardAndComment extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n    this.state = {comment: &#8221;, user_id: 1, board_id: -1, board_title: &#8221;, board_description: &#8221;};<br \/>\n  }<\/p>\n<p>  handleCommentChange(cm){<br \/>\n    this.setState({comment: cm});<br \/>\n  }<\/p>\n<p>  handleUserChange(id){<br \/>\n    this.setState({user_id: id});<br \/>\n  }<\/p>\n<p>  handleBoardSelect(id){<br \/>\n    this.setState({board_id: id});<br \/>\n  }<\/p>\n<p>  handleCommentAdd(){<br \/>\n    \/\/alert(&#8220;comment post&#8221;);<br \/>\n    \u30b9\u30c6\u30fc\u30c8\u306e\u5024\u3092\u4f7f\u3063\u3066Ajax\u3067\u30c7\u30fc\u30bf\u3092POST\u3059\u308c\u3070OK\u3002<br \/>\n  }<\/p>\n<p>  render(){<\/p>\n<p>\u3000\u3000\u4ee5\u4e0b\u7565<br \/>\n[\/bash]<\/p>\n<h3>\u30b9\u30c6\u30fc\u30c8\u306e\u5024\u3092\u4f7f\u3063\u3066Ajax\u3067\u30c7\u30fc\u30bf\u3092POST<\/h3>\n<h4>BoardAndComment\u30af\u30e9\u30b9\u306ehandleCommentAdd\u30e1\u30bd\u30c3\u30c9\u3092\u8abf\u6574\u3057\u307e\u3059\u3002<\/h4>\n<p>[bash]<br \/>\n  handleCommentAdd(){<br \/>\n    var svThis = this;<\/p>\n<p>    if (this.state.board_id == -1){<br \/>\n      alert(&#8220;\u66f8\u304d\u8fbc\u307f\u5bfe\u8c61\u306e\u63b2\u793a\u677f\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044&#8221;);<br \/>\n      return;<br \/>\n    }<\/p>\n<p>    var data = {<br \/>\n      board_id: this.state.board_id,<br \/>\n      user_id: this.state.user_id,<br \/>\n      comment: this.state.comment,<br \/>\n    };<\/p>\n<p>    $.ajax({<br \/>\n       type: &#8220;POST&#8221;,<br \/>\n       url: &#8220;\/boards\/insertComment&#8221;,<br \/>\n       async: false,<br \/>\n       dataType: &#8220;json&#8221;,<br \/>\n       data: data,<br \/>\n       success: function(data, dataType){<br \/>\n         \/\/alert(data.status + &#8220;&#8211;&#8221; + data.row.company_name)<br \/>\n         if (data.status == true){<br \/>\n           alert(&#8220;\u6295\u7a3f\u6210\u529f&#8221;);<br \/>\n         }<br \/>\n       },<br \/>\n       error :function(XMLHttpRequest, textStatus, errorThrown){<br \/>\n       }<br \/>\n    });<br \/>\n  }<br \/>\n[\/bash]<\/p>\n<h4>routes.rb\u3092\u8abf\u6574<\/h4>\n<p>config\/routes.rb<br \/>\n\u672b\u5c3e\u306b\u8ffd\u8a18<br \/>\n[bash]<br \/>\n  post &#8216;boards\/insertComment&#8217;<br \/>\n[\/bash]<\/p>\n<h4>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306b\u30c7\u30fc\u30bf\u8ffd\u52a0\u51e6\u7406\u5b9f\u88c5<\/h4>\n<p>app\/controllers\/boards_controller.rb<\/p>\n<p>[bash]<br \/>\n  def insertComment<br \/>\n    response = {status:true}<\/p>\n<p>    c = Comment.new({board_id: params[:board_id], user_id: params[:user_id], comment: params[:comment]})<br \/>\n    c.save()<\/p>\n<p>    render :json=> response<\/p>\n<p>  end<br \/>\n[\/bash]<\/p>\n<h3>\u30b3\u30e1\u30f3\u30c8\u3092\u6295\u7a3f\u3057\u3066\u307f\u308b<\/h3>\n<p>\u3053\u3053\u307e\u3067\u306e\u3068\u3053\u308d\u3092\u307e\u305a\u52d5\u4f5c\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/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\/bandc<\/p>\n<p>\u307e\u305a\u5de6\u5074\u3067\u63b2\u793a\u677f\u3092\u9078\u629e\u3057\u3001\u6295\u7a3f\u6587\u5b57\u3092\u5165\u529b\u3057\u3001<br \/>\n\u6295\u7a3f\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u6295\u7a3f\u6210\u529f\u30e1\u30c3\u30bb\u30fc\u30b8\u30dc\u30c3\u30af\u30b9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u306d\u3002<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-14.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-14-1024x284.png\" alt=\"rails-14\" width=\"806\" height=\"224\" class=\"alignnone size-large wp-image-1387\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-14-1024x284.png 1024w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-14-300x83.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-14-768x213.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-14.png 1026w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<h3>\u63b2\u793a\u677f\u304c\u9078\u629e\u3055\u308c\u305f\u3089\u3001\u30b3\u30e1\u30f3\u30c8\u306e\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b<\/h3>\n<p>\u3044\u3088\u3044\u3088\u6700\u5f8c\u3067\u3059\u3002<br \/>\n\u53f3\u4e0b\u306e\u6295\u7a3f\u4e00\u89a7\u306e\u90e8\u5206\u3092\u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3059\u3002<br \/>\n\u6295\u7a3f\u4e00\u89a7\u306f\u753b\u9762\u5de6\u306e\u63b2\u793a\u677f\u4e00\u89a7\u3067\u9078\u629e\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u63cf\u753b\u3055\u308c\u308b\u3002<br \/>\n\u307e\u305f\u306f\u3001\u6295\u7a3f\u304c\u7d42\u4e86\u3057\u305f\u6642\u70b9\u3067\u63cf\u753b\u3055\u308c\u308b\u3002\u306e2\u7b87\u6240\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u7d50\u5c40 \u63b2\u793a\u677f\u4e00\u89a7\u3067\u9078\u629e\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u6642\u3068\u540c\u3058\u52d5\u4f5c\u3092\u3001\u6295\u7a3f\u51e6\u7406\u306e\u5f8c\u306b\u631f\u3081\u3070\u826f\u3044\u3002<br \/>\n\u3064\u307e\u308a\u3001\u300c\u9078\u629e\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u300d\u3092\u5b9f\u88c5\u3057\u3066\u3042\u3052\u308c\u3070\u3001\u6295\u7a3f\u7d42\u4e86\u6642\u306b\u306f\u305d\u306e\u51e6\u7406\u3092\u547c\u3079\u3070\u826f\u3044<br \/>\n\u3068\u3044\u3046\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u3067\u306f\u3001\u300c\u9078\u629e\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u300d\u306f\u3069\u3046\u3084\u3063\u3066\u5b9f\u88c5\u3059\u308b\u304b\u30fb\u30fb\u30fb<br \/>\n\u3053\u308c\u306f\u5358\u7d14\u306bBoardAndComment\u30af\u30e9\u30b9\u306ehandleOnBoardSelect\u30e1\u30bd\u30c3\u30c9\u3067\u3001Ajax\u3092\u4f7f\u3063\u3066\u30c7\u30fc\u30bf\u3092\u53d6\u3063\u3066\u304d\u3066\u3001<br \/>\n\u6295\u7a3f\u4e00\u89a7\u3092\u4fdd\u6301\u3059\u308b\u30b9\u30c6\u30fc\u30c8\u3092\u5909\u3048\u308c\u3070\u826f\u3044\u3068\u3044\u3046\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h4>BoardAndComment\u30af\u30e9\u30b9\u306e\u8abf\u6574<\/h4>\n<p>[bash]<br \/>\n  handleBoardSelect(id){<br \/>\n    this.setState({board_id: id});<\/p>\n<p>    var svThis = this;<\/p>\n<p>    $.ajax({<br \/>\n       type: &#8220;GET&#8221;,<br \/>\n       url: &#8220;\/boards\/readComments\/&#8221; + id,<br \/>\n       async: false,<br \/>\n       dataType: &#8220;json&#8221;,<br \/>\n       data: &#8220;name=John&#038;location=Boston&#8221;,<br \/>\n       success: function(data, dataType){<br \/>\n         if (data.status == true){<br \/>\n           alert(data.rows.length);<br \/>\n           svThis.setState({comments: data.rows});<br \/>\n         }<br \/>\n       },<br \/>\n       error :function(XMLHttpRequest, textStatus, errorThrown){<br \/>\n       }<br \/>\n    });<br \/>\n  }<br \/>\n[\/bash]<\/p>\n<h4>routes.rb\u306e\u8abf\u6574<\/h4>\n<p>config\/routes.rb<\/p>\n<p>\u672b\u5c3e\u306b\u8ffd\u8a18\u3057\u307e\u3059\u3002<br \/>\n[bash]<br \/>\n  get &#8216;boards\/readComments\/:board_id&#8217; => &#8216;boards#readComments&#8217;<br \/>\n[\/bash]<\/p>\n<h4>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u8abf\u6574<\/h4>\n<p>app\/controllers\/boards_controller.rb<\/p>\n<p>[bash]<br \/>\n  def readComments<br \/>\n    response = {status:true}<\/p>\n<p>    recs = Comment.eager_load(:user).where(&#8220;board_id = ?&#8221;, params[:board_id])<br \/>\n            .order(&#8220;comments.created_at DESC&#8221;).as_json(include: :user)<\/p>\n<p>    response[&#8220;rows&#8221;] = recs<\/p>\n<p>    render :json=> response<br \/>\n  end<br \/>\n[\/bash]<\/p>\n<h4>\u30e2\u30c7\u30eb\u306e\u8abf\u6574<\/h4>\n<p>app\/models\/comment.rb<br \/>\n[bash]<br \/>\nclass Comment < ApplicationRecord\n  belongs_to :user\n\nend\n[\/bash]\n\n\n\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\/bandc<\/p>\n<p>\u307e\u305a\u5de6\u5074\u3067\u63b2\u793a\u677f\u3092\u9078\u629e\u3057\u3001\u6295\u7a3f\u6587\u5b57\u3092\u5165\u529b\u3057\u3001\u6295\u7a3f\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3002<br \/>\n\u3053\u308c\u3092\u4f55\u5ea6\u304b\u7e70\u308a\u8fd4\u3057\u3066\u3001\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf\u3092\u4f5c\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u63b2\u793a\u677f\u3092\u9078\u629e\u3057\u305f\u6642\u3001\u6700\u521d\u306f\u30e1\u30c3\u30bb\u30fc\u30b8\u30dc\u30c3\u30af\u30b9\u306b\u300c\uff10\u300d\u304c\u8868\u793a\u3055\u308c\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001<br \/>\n\u4e00\u65e6\u6295\u7a3f\u3059\u308b\u3068\u3001\u6b21\u306b\u540c\u3058\u63b2\u793a\u677f\u3092\u9078\u3093\u3060\u5834\u5408\u3001\u6295\u7a3f\u6570\u304c\u5897\u3048\u3066\u3044\u308b\u3053\u3068\u304c\u89e3\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-15.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-15-1024x271.png\" alt=\"rails-15\" width=\"806\" height=\"213\" class=\"alignnone size-large wp-image-1390\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-15-1024x271.png 1024w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-15-300x80.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-15-768x204.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-15.png 1041w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<h3>\u6295\u7a3f\u4e00\u89a7\u3092\u8868\u793a\u3057\u3066\u307f\u307e\u3057\u3087\u3046<\/h3>\n<p>\u3044\u3088\u3044\u3088\u30c7\u30fc\u30bf\u304c\u53d6\u308c\u305f\u306e\u3067\u3001\u6295\u7a3f\u4e00\u89a7\u3092\u8868\u793a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u6295\u7a3f\u4e00\u89a7(CommentList\u30af\u30e9\u30b9\uff09\u306e\u30ec\u30f3\u30c0\u30fc\u6642\u306b this.state.comments \u3092\u30a2\u30c8\u30ea\u30d3\u30e5\u30fc\u30c8\u3068\u3057\u3066\u6e21\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u3001<br \/>\nAjax\u3067\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066<\/p>\n<p>[bash]<br \/>\nthis.setState({comments: data.rows});<br \/>\n[\/bash]<\/p>\n<p>\u3068\u3057\u305f\u6642\u70b9\u3067\u81ea\u52d5\u7684\u306b\u30c7\u30fc\u30bf\u306e\u5909\u5316\u306f\u4f1d\u308f\u308a\u307e\u3059\u3002<\/p>\n<p>\u306a\u306e\u3067\u3001\u6e21\u3063\u3066\u304d\u305f\u30c7\u30fc\u30bf\u3092\u7d14\u7c8b\u306b\u8868\u793a\u3059\u308b\u90e8\u5206\u306e\u307f\u3092\u5b9f\u88c5\u3059\u308c\u3070OK\u3067\u3059\u3002<\/p>\n<h4>CommentList\u30af\u30e9\u30b9\u306e\u8abf\u6574<\/h4>\n<p>[bash]<br \/>\nclass CommentList extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  render(){<br \/>\n    var lists = [];<br \/>\n    var i;<br \/>\n    for (i = 0 ; i < this.props.datas.length; i++){\n      var data = this.props.datas[i];\n      lists.push(<CommentLine data={data} key={data.id} \/>);<br \/>\n    }<\/p>\n<p>    return (<\/p>\n<div className=\"clist\">\n        \u63b2\u793a\u677f\u5185\u306e\u6295\u7a3f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u5834\u6240\u3067\u3059\u3002<br \/>\n        {lists}\n      <\/div>\n<p>    );<br \/>\n  }<br \/>\n}<br \/>\n[\/bash]<\/p>\n<h4>CommentLine\u30af\u30e9\u30b9\u306e\u8abf\u6574<\/h4>\n<p>[bash]<br \/>\nclass CommentLine extends React.Component{<br \/>\n  constructor(props){<br \/>\n    super(props);<br \/>\n  }<\/p>\n<p>  render(){<\/p>\n<p>    return (<\/p>\n<div className=\"cline\">\n<div>\n          <label className=\"name\">{this.props.data.user.name}<\/label><br \/>\n          <label className=\"sex\">{this.props.data.user.sex == 1 ? &#8216;\u7537\u6027&#8217; : &#8216;\u5973\u6027&#8217;}<\/label><br \/>\n          <label className=\"age\">{this.props.data.user.age}\u6b73<\/label>\n        <\/div>\n<div className=\"comment\">\n          {this.props.data.comment}\n        <\/div>\n<\/p><\/div>\n<p>    );<br \/>\n  }<br \/>\n}<br \/>\n[\/bash]<\/p>\n<h4>BoardAndComment\u30af\u30e9\u30b9\u306e\u8abf\u6574<\/h4>\n<p>alert(data.rows.length); \u3092\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3057\u307e\u3059\u3002<br \/>\n[bash]<br \/>\n  handleBoardSelect(id){<br \/>\n    this.setState({board_id: id});<\/p>\n<p>    var svThis = this;<\/p>\n<p>    $.ajax({<br \/>\n       type: &#8220;GET&#8221;,<br \/>\n       url: &#8220;\/boards\/readComments\/&#8221; + id,<br \/>\n       async: false,<br \/>\n       dataType: &#8220;json&#8221;,<br \/>\n       data: &#8220;name=John&#038;location=Boston&#8221;,<br \/>\n       success: function(data, dataType){<br \/>\n         if (data.status == true){<br \/>\n           \/\/alert(data.rows.length);<br \/>\n           svThis.setState({comments: data.rows});<br \/>\n         }<br \/>\n       },<br \/>\n       error :function(XMLHttpRequest, textStatus, errorThrown){<br \/>\n       }<br \/>\n    });<br \/>\n  }<\/p>\n<p>[\/bash]<\/p>\n<h4>CSS\u306e\u8abf\u6574<\/h4>\n<p>[bash]<br \/>\ndiv.clist{<br \/>\n  clear: both;<br \/>\n}<\/p>\n<p>div.cline{<br \/>\n  border-top: 1px solid #cccccc;<br \/>\n  border-left: 1px solid #cccccc;<br \/>\n  border-right: 1px solid #cccccc;<\/p>\n<p>  label {<br \/>\n    display: inline-block;<br \/>\n  }<br \/>\n  label.name{<br \/>\n    width: 100px;<br \/>\n  }<br \/>\n  label.sex {<br \/>\n    width: 40px;<br \/>\n    font-size: 9px;<br \/>\n  }<br \/>\n  label.age{<br \/>\n    width: 50px;<br \/>\n    font-size: 9px;<br \/>\n  }<\/p>\n<p>  .comment{<br \/>\n    padding: 10px;<br \/>\n  }<br \/>\n}<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\/bandc<\/p>\n<p>\u5de6\u5074\u3067\u63b2\u793a\u677f\u3092\u9078\u629e\u3057\u305f\u3089\u3001\u53f3\u4e0b\u306e\u30b3\u30e1\u30f3\u30c8\u4e00\u89a7\u304c\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n<a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-16.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-16-1024x553.png\" alt=\"rails-16\" width=\"806\" height=\"435\" class=\"alignnone size-large wp-image-1393\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-16-1024x553.png 1024w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-16-300x162.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-16-768x414.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-16.png 1071w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<h3>\u6295\u7a3f\u5f8c\u306b\u6295\u7a3f\u4e00\u89a7\u3092\u66f4\u65b0\u3059\u308b<\/h3>\n<p>\u3053\u308c\u306f\u5358\u7d14\u306bJavaScript\u3067\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3093\u3067\u3084\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n<h4>BoardAndComment\u30af\u30e9\u30b9\u306e\u8abf\u6574<\/h4>\n<p>[bash]<br \/>\n  handleCommentAdd(){<br \/>\n    var svThis = this;<\/p>\n<p>    if (this.state.board_id == -1){<br \/>\n      alert(&#8220;\u66f8\u304d\u8fbc\u307f\u5bfe\u8c61\u306e\u63b2\u793a\u677f\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044&#8221;);<br \/>\n      return;<br \/>\n    }<\/p>\n<p>    var data = {<br \/>\n      board_id: this.state.board_id,<br \/>\n      user_id: this.state.user_id,<br \/>\n      comment: this.state.comment,<br \/>\n    };<\/p>\n<p>    $.ajax({<br \/>\n       type: &#8220;POST&#8221;,<br \/>\n       url: &#8220;\/boards\/insertComment&#8221;,<br \/>\n       async: false,<br \/>\n       dataType: &#8220;json&#8221;,<br \/>\n       data: data,<br \/>\n       success: function(data, dataType){<br \/>\n         \/\/alert(data.status + &#8220;&#8211;&#8221; + data.row.company_name)<br \/>\n         if (data.status == true){<br \/>\n           \/\/alert(&#8220;\u6295\u7a3f\u6210\u529f&#8221;);<br \/>\n           svThis.handleBoardSelect(svThis.state.board_id);<br \/>\n         }<br \/>\n       },<br \/>\n       error :function(XMLHttpRequest, textStatus, errorThrown){<br \/>\n       }<br \/>\n    });<br \/>\n  }<br \/>\n[\/bash]<\/p>\n<h3>\u304a\u307e\u3051\u3068\u3044\u3046\u304b\u88dc\u52a9\u6a5f\u80fd<\/h3>\n<p>\u3053\u3053\u307e\u3067\u306e\u90e8\u5206\u3067\u307b\u307c\u51fa\u6765\u4e0a\u304c\u308a\u306a\u3093\u3067\u3059\u304c\u30fb\u30fb<br \/>\n\u753b\u9762\u5de6\u5074\u3067\u300c\u9078\u629e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u300d\u3057\u305f\u306f\u3044\u3044\u3051\u3069\u3001\u4eca\u3069\u306e\u63b2\u793a\u677f\u306b\u66f8\u304d\u8fbc\u3082\u3046\u3068\u3057\u3066\u3044\u308b\u306e\u304b<br \/>\n\u308f\u304b\u308a\u306b\u304f\u3044\u3002\u3053\u306e\u90e8\u5206\u3092\u6539\u5584\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u300c\u9078\u629e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u300d\u3057\u305f\u6642\u306b\u306f\u63b2\u793a\u677f\u306eid\u306e\u307f\u304c\u308f\u304b\u308b\u72b6\u614b\u306a\u306e\u3067\u3001<br \/>\n\u3053\u306eid\u306e\u5024\u3092\u4f7f\u3063\u3066Ajax\u3067\u63b2\u793a\u677f\u306e\u60c5\u5831\u3092\u62fe\u3044\u306b\u884c\u3063\u3066\u3001\u623b\u3063\u3066\u304d\u305f\u5024\u3067<br \/>\n\u30b9\u30c6\u30fc\u30c8\u3092\u66f4\u65b0\u3059\u308b\u3053\u3068\u3067\u3001\u63b2\u793a\u677f\u306e\u30bf\u30a4\u30c8\u30eb(title\uff09\u3068\uff08description\uff09\u3092<br \/>\n\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u3042\u3052\u307e\u3057\u3087\u3046\u3002<\/p>\n<h4>BoardAndComment\u30af\u30e9\u30b9\u306e\u8abf\u6574<\/h4>\n<p>ajax\u3092\uff11\u3064\u5897\u3084\u3057\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\n  handleBoardSelect(id){<br \/>\n    this.setState({board_id: id});<\/p>\n<p>    var svThis = this;<\/p>\n<p>    $.ajax({<br \/>\n       type: &#8220;GET&#8221;,<br \/>\n       url: &#8220;\/boards\/readComments\/&#8221; + id,<br \/>\n       async: false,<br \/>\n       dataType: &#8220;json&#8221;,<br \/>\n       data: &#8220;name=John&#038;location=Boston&#8221;,<br \/>\n       success: function(data, dataType){<br \/>\n         if (data.status == true){<br \/>\n           \/\/alert(data.rows.length);<br \/>\n           svThis.setState({comments: data.rows});<br \/>\n         }<br \/>\n       },<br \/>\n       error :function(XMLHttpRequest, textStatus, errorThrown){<br \/>\n       }<br \/>\n    });<\/p>\n<p>    $.ajax({<br \/>\n       type: &#8220;GET&#8221;,<br \/>\n       url: &#8220;\/boards\/readBoard\/&#8221; + id,<br \/>\n       async: false,<br \/>\n       dataType: &#8220;json&#8221;,<br \/>\n       data: &#8220;name=John&#038;location=Boston&#8221;,<br \/>\n       success: function(data, dataType){<br \/>\n         if (data.status == true){<br \/>\n           svThis.setState({board_title: data.row.title});<br \/>\n           svThis.setState({board_description: data.row.description});<br \/>\n         }<br \/>\n       },<br \/>\n       error :function(XMLHttpRequest, textStatus, errorThrown){<br \/>\n       }<br \/>\n    });<br \/>\n  }<br \/>\n[\/bash]<\/p>\n<p>CommentAdd\u30af\u30e9\u30b9\u306e\u30ec\u30f3\u30c0\u30fc\u6642\u306b\u8aad\u307f\u8fbc\u3093\u3060\u5024\u3092\u6e21\u3057\u3066\u3084\u308a\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\n  render(){<br \/>\n    return (<\/p>\n<div className=\"bandc\">\n<div className=\"left-side\">\n          <BoardList2\n            datas={this.props.datas}\n            onBoardSelect={(id) => this.handleBoardSelect(id)}<br \/>\n           \/>\n        <\/div>\n<div className=\"right-side\">\n          <CommentAdd\n            users={this.props.users}\n            board_title={this.state.board_title}\n            board_description={this.state.board_description}\n            onUserChange={(uid) => this.handleUserChange(uid)}<br \/>\n            onCommentChange={(cm) => this.handleCommentChange(cm)}<br \/>\n            onCommentAdd={() => this.handleCommentAdd()}<br \/>\n           \/><br \/>\n           <CommentList datas={this.state.comments} \/>\n        <\/div>\n<\/p><\/div>\n<p>    );<br \/>\n  }<br \/>\n[\/bash]<\/p>\n<h4>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u8abf\u6574<\/h4>\n<p>app\/controllers\/boards_controller.rb<\/p>\n<p>[bash]<br \/>\n  def readBoard<br \/>\n    response = {status:true}<\/p>\n<p>    recs = Board.where(&#8220;id = ?&#8221;, params[:board_id])<\/p>\n<p>    response[&#8220;row&#8221;] = recs[0]<\/p>\n<p>    render :json=> response<br \/>\n  end<br \/>\n[\/bash]<\/p>\n<h4>routes.rb\u306e\u8abf\u6574<\/h4>\n<p>config\/routes.rb<\/p>\n<p>\u672b\u5c3e\u306b\u8ffd\u8a18<br \/>\n[bash]<br \/>\n  get &#8216;boards\/readBoard\/:board_id&#8217; => &#8216;boards#readBoard&#8217;<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\/bandc<\/p>\n<p>\u5de6\u5074\u3067\u63b2\u793a\u677f\u3092\u9078\u629e\u3057\u305f\u3089\u3001\u53f3\u4e0a\u306e\u63b2\u793a\u677f\u540d\u3068\u63b2\u793a\u677f\u8a73\u7d30\u304c\u5909\u5316\u3059\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17-1024x587.png\" alt=\"rails-17\" width=\"806\" height=\"462\" class=\"alignnone size-large wp-image-1394\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17-1024x587.png 1024w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17-300x172.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17-768x440.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rails-17.png 1041w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<p>\u4ee5\u4e0a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u3069\u3046\u3067\u3057\u305f\u304b\uff1fReactJS\u9762\u767d\u3044\u3067\u3057\u3087\uff1f\uff1f\uff1f<br \/>\n\u662f\u975e\u3001\u81ea\u5206\u306a\u308a\u306b\u3044\u308d\u3044\u308d\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u7e70\u308a\u8fd4\u3057\u306b\u306a\u308a\u307e\u3059\u304c\u3001\u9023\u8f09\u3057\u305f\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","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\u3002 \u524d\u56de\u306eVol.1\u306f\u63b2\u793a\u677f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u3060\u3051\u3067\u7d42\u308f\u3063\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u304c\u3001\u4eca\u56de\u306f\u672c\u683c\u7684\u306a \u63b2\u793a\u677f\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3059\u3002\u591a\u5206\u9577\u304f\u306a\u308b\u3068\u601d\u3044\u307e\u3059\u306e\u3067\u3001\u3088\u308d\u3057\u304f\u304a\u4ed8\u304d\u5408\u3044\u304f\u3060\u3055\u3044\u3002 \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 \u30b9\u30c6\u30fc\u30c8\u306e\u7ba1\u7406\u3084\u3089\u3001\u30a4\u30d9\u30f3\u30c8\u306e\u5f15\u304d\u6e21\u3057\u65b9\u304c\u3044\u307e\u3044\u3061\u308f\u304b\u3089\u306a\u3044\u3068\u3044\u3046\u65b9\u306f\u3001 Rails\u3068\u306f\u95a2\u4fc2\u306a\u3044\u3000ToDoList\u306e\u8a18\u4e8b\u3000\u3092\u53c2\u7167\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002 \u5b8c\u6210\u30a4\u30e1\u30fc\u30b8 \u3053\u3093\u306a\u611f\u3058\u306e\u3082\u306e\u304c\u3067\u304d\u308c\u3070\u3044\u3044\u306a\u3068\u3044\u3046\u7406\u60f3\u578b\u3067\u3059\u3002 \u3053\u308c\u3092\u30d1\u30fc\u30c4\uff08ReactJS\u306e\u30af\u30e9\u30b9\uff09\u306b\u5206\u89e3\u3057\u3066\u307f\u308b\u3068\u3053\u3093\u306a\u611f\u3058\u306b\u306a\u308b\u3068\u601d\u3044\u307e\u3059\u3002 \u3044\u3056\u958b\u59cb React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210 app\/assets\/javascripts\/components\/board_and_commen.js.jsx \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 rails g\u3000\u3067\u3084\u3063\u3066\u3082\u3044\u3044\u306e\u3067\u3059\u304c\u3001\u3069\u3046\u305b\u5168\u90e8\u6d88\u3057\u3061\u3083\u3046\u306e\u3067\u624b\u3067\u4f5c\u308a\u307e\u3057\u3087\u3046\u3002 \u3067\u306f\u3001\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u6700\u4e0a\u5c64\u90e8\u306e\u30af\u30e9\u30b9\u3068\u306a\u308b BoardAndComment\u30af\u30e9\u30b9\u3092\u5b9a\u7fa9\u3057\u307e\u3057\u3087\u3046\u3002 [bash] class BoardAndComment extends React.Component{ constructor(props){ super(props); } render(){ return ( \u7a7a\u3063\u307d\u3002 ); } } [\/bash] View\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210\u3068\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30fbroutes\u8abf\u6574 app\/views\/boards\/bandc.html.erb \u306bView\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u308a\u307e\u3059\u3002 \u4e2d\u8eab\u306f [bash] [\/bash] \u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306b\u30e1\u30bd\u30c3\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002 app\/controllers\/boards_controller.rb [bash] class BoardsController < ApplicationController def index @boards = Board.all end def bandc @boards = Board.all end end [\/bash] routes.rb\u306b1\u884c\u30eb\u30fc\u30c8\u3092\u8ffd\u8a18\u3057\u307e\u3059\u3002 config\/routes.rb [bash] get 'boards\/bandc' [\/bash] \u52d5\u4f5c\u78ba\u8a8d [bash] $ rails s [\/bash] \u30d6\u30e9\u30a6\u30b6\u30fc\u3067 http:\/\/localhost:3000\/boards\/bandc \u3053\u3093\u306a\u611f\u3058\u306e\u3082\u306e\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u6210\u529f\u3067\u3059\u3002 2\u968e\u5c64\u76ee\u3068\u306a\u308b3\u3064\u306e\u30af\u30e9\u30b9\u3092\u5b9a\u7fa9\u3057\u3066\u3001\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb(1\u968e\u5c64\u76ee\uff09\u306erender\u30e1\u30bd\u30c3\u30c9\u3067 2\u968e\u5c64\u76ee\u3092\u30ec\u30f3\u30c0\u30fc\u3059\u308b \u3053\u3053\u3067\u306f2\u968e\u5c64\u76ee\u3068\u306a\u308b3\u3064\u306e\u30af\u30e9\u30b9\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 3\u3064\u306e\u30af\u30e9\u30b9\u306f\u5148\u307b\u3069\u3068\u540c\u3058\u3088\u3046\u306b\u5358\u7d14\u306b\u56fa\u5b9a\u6587\u5b57\u3092\u51fa\u529b\u3059\u308b\u3060\u3051\u3067\u3059\u3002 [bash] class BoardAndComment extends React.Component{ constructor(props){ super(props); } render(){ return ( ); } } class BoardList2 extends React.Component{ constructor(props){ super(props); } render(){ return ( \u63b2\u793a\u677f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u5834\u6240\u3067\u3059\u3002 ); } } class CommentAdd extends React.Component{ constructor(props){ super(props); } render(){ return ( \u63b2\u793a\u677f\u306b\u6295\u7a3f\u3092\u8ffd\u52a0\u3059\u308b\u6a5f\u80fd\u3092\u8868\u793a\u3059\u308b\u5834\u6240\u3067\u3059\u3002 ); } } class CommentList extends React.Component{ constructor(props){ super(props); } render(){ return ( \u63b2\u793a\u677f\u5185\u306e\u6295\u7a3f\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u5834\u6240\u3067\u3059\u3002 ); } } [\/bash] CSS\u306e\u8abf\u6574 app\/assets\/stylesheets\/boards.scss \u306b\u4ee5\u4e0b\u3092\u8ffd\u8a18\u3002 [bash] div.left-side{ float: left; width: 400px; } div.right-side{ float: left; width: 600px; } [\/bash] \u52d5\u4f5c\u78ba\u8a8d [bash] $ rails s [\/bash] \u30d6\u30e9\u30a6\u30b6\u30fc\u3067 http:\/\/localhost:3000\/boards\/bandc \u3053\u3093\u306a\u611f\u3058\u306e\u3082\u306e\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u6210\u529f\u3067\u3059\u3002 \u30b9\u30c6\u30fc\u30c8\u3067\u7ba1\u7406\u3059\u308b\u3082\u306e\u3092\u8003\u3048\u308b \u3067\u306f\u63b2\u793a\u677f\u306b\u6295\u7a3f\u3059\u308b\u6a5f\u80fd\u5168\u4f53\u3067\u30b9\u30c6\u30fc\u30c8\u3068\u3057\u3066\u7ba1\u7406\u3057\u306a\u304d\u3083\u306a\u3089\u306a\u3044\u3082\u306e\u306f\u4f55\u3067\u3057\u3087\u3046\u304b\uff1f \u5909\u5316\u3057\u305d\u3046\u306a\u3082\u306e\u306b\u63b2\u793a\u677f\u4e00\u89a7\u30fb\u6295\u7a3f\u6587\u5b57\u3092\u5165\u529b\u3059\u308b\u30a8\u30ea\u30a2\u306b\u5165\u529b\u3055\u308c\u305f\u6587\u5b57\u3001\u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u3001\u6295\u7a3f\u4e00\u89a7 \u306e\uff14\u3064\u307b\u3069\u304c\u8003\u3048\u3089\u308c\u307e\u3059\u3002 \u4eca\u56de\u306e\u6700\u7d42\u76ee\u6a19\u306f\u9078\u629e\u3057\u305f\u63b2\u793a\u677f\u306b\u6295\u7a3f\u304c\u8ffd\u52a0\u3067\u304d\u308b\u3000\u3068\u3044\u3046\u3082\u306e\u306a\u306e\u3067\u3001 \u63b2\u793a\u677f\u4e00\u89a7\u306f \u6700\u521d\u306b\u8aad\u307f\u8fbc\u3093\u3060\u5024\u304b\u3089\u4e0d\u5909\u3067\u3059\u306e\u3067\u3001\u30b9\u30c6\u30fc\u30c8\u3068\u3057\u3066\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u306f\u306a\u3057\u3002 \u6295\u7a3f\u6587\u5b57\u306b\u95a2\u3057\u3066\u306f\u3001\u6bce\u5ea6\u6bce\u5ea6\u9055\u3046\u6587\u5b57\u304c\u5165\u529b\u3055\u308c\u308b\u306e\u3067\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u3042\u308a\u3002 \u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u306f\u666e\u901a\u306e\u63b2\u793a\u677f\u3067\u3042\u308c\u3070\u30ed\u30b0\u30a4\u30f3\u3057\u305f\u4eba\u306eID\u3092\u7528\u3044\u308b\u306e\u3067\u3001\u5909\u5316\u3057\u307e\u305b\u3093\u304c\u30fb\u30fb \u30ed\u30b0\u30a4\u30f3\u51e6\u7406\u3092\u8a2d\u3051\u306a\u3044\u3001\u4eca\u56de\u306e\u63b2\u793a\u677f\u3067\u306f\u6295\u7a3f\u306e\u969b\u306b\u30e6\u30fc\u30b6\u30fcID\u3092Select\u30dc\u30c3\u30af\u30b9\u3067\u9078\u629e\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002 \u3064\u307e\u308a\u5909\u5316\u3059\u308b\u306e\u3067\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u3042\u308a\u3067\u3059\u3002 \u6295\u7a3f\u5bfe\u8c61\u306e\u63b2\u793a\u677f\u3082\u5909\u5316\u3059\u308b\u306e\u3067\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u3042\u308a\u3067\u3059\u3002 \u6295\u7a3f\u4e00\u89a7\u3082\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u3061\u3087\u3063\u3068\u96e3\u3057\u3044\u304b\u3082\u3067\u3059\u306d\u3002\u3053\u308c\u3001\u6163\u308c\u3067\u3059\u306e\u3067\u3001\u3060\u3093\u3060\u3093\u308f\u304b\u3063\u3066\u304f\u308b\u3068\u601d\u3044\u307e\u3059\u3002 \u3064\u307e\u308a\u3053\u308c\u3060\u3051\u306e\u6a5f\u80fd\u306f\u3042\u308b\u3051\u3069\u3001ReactJS\u3067\u7ba1\u7406\u3059\u308b\u30b9\u30c6\u30fc\u30c8\u306f \u6295\u7a3f\u3059\u308b\u6587\u5b57\u3000\u3068 \u6295\u7a3f\u3059\u308b\u30e6\u30fc\u30b6\u30fc\u3000\u3068\u6295\u7a3f\u5bfe\u8c61\u306e\u63b2\u793a\u677f \u3068\u6295\u7a3f\u4e00\u89a7\u306e\uff14\u3064\u3060\u3051\u3068\u3044\u3046\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002 \u3067\u3001\u3069\u3053\u3067\u7ba1\u7406\u3059\u308b\u304b\u3068\u3044\u3046\u3068\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u306e\u30af\u30e9\u30b9\u3067\u3042\u308bBoardAndComment\u30af\u30e9\u30b9\u3067\u3059\u3002 board_title \u3068 board_description\u306b\u3064\u3044\u3066\u306f\u3001\u305d\u308c\u307b\u3069\u91cd\u8981\u306a\u30b9\u30c6\u30fc\u30c8\u3067\u306f\u306a\u3044\u306e\u3067\u3001 \u4eca\u306e\u3068\u3053\u308d\u306f\u7121\u8996\u3057\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002 BoardAndComment\u30af\u30e9\u30b9\u306b\u3053\u306e\u30b9\u30c6\u30fc\u30c8\u7ba1\u7406\u90e8\u5206\u3092\u8ffd\u8a18\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002 \u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u30fc(constructor)\u3067\u5024\u3092\u521d\u671f\u5316\u3057\u3066\u3001\u6295\u7a3f\u6587\u5b57\u304c\u5909\u5316\u3057\u305f\u6642\u306b\u30b9\u30c6\u30fc\u30c8\u3092 \u5909\u5316\u3055\u305b\u308b\u30e1\u30bd\u30c3\u30c9(handleCommentChange)\u3092\u5b9a\u7fa9\u3057\u3066\u3001 \u30ec\u30f3\u30c0\u30fc\u30e1\u30bd\u30c3\u30c9\u3067\u3001CommentAdd\u30af\u30e9\u30b9\u3092\u30ec\u30f3\u30c0\u30fc\u3059\u308b\u969b\u306b CommentAdd\u30af\u30e9\u30b9\u5185\u3067\u8d77\u3053\u308b\u30a4\u30d9\u30f3\u30c8\u3092\u81ea\u5206\u306e\u30af\u30e9\u30b9\u3067\u51e6\u7406\u3067\u304d\u308b\u3088\u3046\u306b\u8a18\u8ff0\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002 \u6295\u7a3f\u30e6\u30fc\u30b6\u30fc\u304c\u5909\u5316\u3057\u305f\u6642\u306b\u30b9\u30c6\u30fc\u30c8\u3092 \u5909\u5316\u3055\u305b\u308b\u30e1\u30bd\u30c3\u30c9(handleUserChange)\u3092\u5b9a\u7fa9\u3057\u3066\u3001 \u30ec\u30f3\u30c0\u30fc\u30e1\u30bd\u30c3\u30c9\u3067\u3001CommentAdd\u30af\u30e9\u30b9\u3092\u30ec\u30f3\u30c0\u30fc\u3059\u308b\u969b\u306b CommentAdd\u30af\u30e9\u30b9\u5185\u3067\u8d77\u3053\u308b\u30a4\u30d9\u30f3\u30c8\u3092\u81ea\u5206\u306e\u30af\u30e9\u30b9\u3067\u51e6\u7406\u3067\u304d\u308b\u3088\u3046\u306b\u8a18\u8ff0\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002 \u6b8b\u308a\u306e\uff12\u3064\u3082\u304a\u3044\u304a\u3044\u8aac\u660e\u3057\u307e\u3059\u3002 [bash] class BoardAndComment extends React.Component{ constructor(props){ super(props); this.state = {comment: &#8221;, user_id: 1, board_id: -1, comments: [], board_title: &#8221;, board_description: &#8221;}; } handleCommentChange(cm){ this.setState({comment: cm}); } handleUserChange(id){ alert(id); } handleBoardSelect(id){ alert(id); } render(){ return ( this.handleBoardSelect(id)} \/> this.handleUserChange(uid)} onCommentChange={(cm) => this.handleCommentChange(cm)} \/> ); } } [\/bash] \u63b2\u793a\u677f\u4e00\u89a7\u3092\u5b9f\u88c5\u3059\u308b \u3053\u308c\u306f\u524d\u56de\u3084\u3063\u305f\u5185\u5bb9\u3068\u307b\u307c\u540c\u3058\u3067\u3059\u306e\u3067\u3001\u30bd\u30fc\u30b9\u3060\u3051\u63d0\u793a\u3057\u3066\u3001 \u5909\u5316\u3057\u3066\u3044\u308b\u3054\u304f\u50c5\u304b\u306a\u90e8\u5206\u3060\u3051\u8aac\u660e\u3057\u307e\u3059\u3002 View\u306e\u8abf\u6574 [bash] [\/bash] \u307e\u305a\u306f\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u306eBoardAndComment\u30af\u30e9\u30b9\u306e\u5909\u5316\u7b87\u6240\u3002 render\u30e1\u30bd\u30c3\u30c9\u5185\u3067 BoardList2\u3092\u30ec\u30f3\u30c0\u30fc\u3057\u3066\u3044\u308b\u90e8\u5206\u3067 datas\u30a2\u30c8\u30ea\u30d3\u30e5\u30fc\u30c8\u306b this.props.datas\u3000\u3092\u6e21\u3057\u3066\u3044\u307e\u3059\u3002 [bash] class BoardAndComment extends React.Component{ constructor(props){ super(props); this.state = {comment: &#8221;}; } handleCommentChange(cm){ this.setState({comment: cm}); } render(){ return ( this.handleCommentChange(cm)} \/> ); } } [\/bash] \u6b21\u306b2\u968e\u5c64\u76ee\u306eBoardList2\u30af\u30e9\u30b9\u3002render\u30e1\u30bd\u30c3\u30c9\u3067 BoardList2\u30af\u30e9\u30b9\u3092\u30ec\u30f3\u30c0\u30fc\u3059\u308b\u969b\u306b BoardList2\u30af\u30e9\u30b9\u5185\u3067\u8d77\u3053\u308b\u3067\u3042\u308d\u3046\u63b2\u793a\u677f\u9078\u629e\u306e\u30a4\u30d9\u30f3\u30c8(onBoardSelect)\u3092\u81ea\u5206\u306e \u30af\u30e9\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u5185\u3067\u51e6\u7406\u3055\u305b\u3066\u3044\u308b\u3002 \u3082\u3046\u3072\u3068\u3064\u306f\u3001\u305d\u306e\u51e6\u7406\u3082\u81ea\u5206\u3067\u306f\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3057\u3088\u3046\u304c\u306a\u3044\u306e\u3067\u3001\u3082\u3046\uff11\u968e\u5c64\u4e0a\u306e\u30af\u30e9\u30b9\u306b \u4efb\u305b\u3066\u3044\u308b(handleBoardSelect) [bash] class BoardList2 extends React.Component{ constructor(props){ super(props); } handleBoardSelect(id){ this.props.onBoardSelect(id); } render(){ var lists =&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1364,"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],"class_list":{"0":"post-1547","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"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1547","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=1547"}],"version-history":[{"count":2,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1547\/revisions"}],"predecessor-version":[{"id":1564,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1547\/revisions\/1564"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/media\/1364"}],"wp:attachment":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}