RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.2

2017年4月13日コメントはまだありません

はじめに

RailsとReactJSを用いてちょっとした掲示板を作ってみましょうというのが今回のコンセプト。
前回のVol.1は掲示板一覧を表示することだけで終わってしまいましたが、今回は本格的な
掲示板機能を実装してみます。多分長くなると思いますので、よろしくお付き合いください。

前回に引き続き、これから何回かにわたり連載する内容はGitHubの下記のURLで公開しています。
https://github.com/h-mito/rails_with_react

ステートの管理やら、イベントの引き渡し方がいまいちわからないという方は、
Railsとは関係ない　ToDoListの記事　を参照してみてください。

完成イメージ

こんな感じのものができればいいなという理想型です。

これをパーツ（ReactJSのクラス）に分解してみるとこんな感じになると思います。

いざ開始

Reactコンポーネントファイルの作成

app/assets/javascripts/components/board_and_commen.js.jsx
ファイルを作成します。
rails g　でやってもいいのですが、どうせ全部消しちゃうので手で作りましょう。

では、ファイルには以下のような感じで最上層部のクラスとなる
BoardAndCommentクラスを定義しましょう。

[bash]
class BoardAndComment extends React.Component{
constructor(props){
super(props);
}

render(){
return (

空っぽ。

);
}
}

[/bash]

Viewファイルの作成と、コントローラー・routes調整

app/views/boards/bandc.html.erb
にViewファイルを作ります。

中身は

[bash]
<%= react_component('BoardAndComment') %>

[/bash]

コントローラーにメソッドを追加します。
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に1行ルートを追記します。 config/routes.rb [bash] get 'boards/bandc' [/bash]

動作確認

[bash]
$ rails s
[/bash]

ブラウザーで
http://localhost:3000/boards/bandc

こんな感じのものが表示されれば成功です。

2階層目となる3つのクラスを定義して、トップレベル(1階層目）のrenderメソッドで
2階層目をレンダーする

ここでは2階層目となる3つのクラスを定義します。
3つのクラスは先ほどと同じように単純に固定文字を出力するだけです。

[bash]
class BoardAndComment extends React.Component{
constructor(props){
super(props);
}

render(){
return (

);
}
}

class BoardList2 extends React.Component{
constructor(props){
super(props);
}

render(){
return (

掲示板一覧を表示する場所です。

);
}

}

class CommentAdd extends React.Component{
constructor(props){
super(props);
}

render(){
return (

掲示板に投稿を追加する機能を表示する場所です。

);
}

}

class CommentList extends React.Component{
constructor(props){
super(props);
}

render(){
return (

掲示板内の投稿一覧を表示する場所です。

);
}

}

[/bash]

CSSの調整

app/assets/stylesheets/boards.scss
に以下を追記。

[bash]
div.left-side{
float: left;
width: 400px;
}

div.right-side{
float: left;
width: 600px;
}

[/bash]

動作確認

[bash]
$ rails s
[/bash]

ブラウザーで
http://localhost:3000/boards/bandc

こんな感じのものが表示されれば成功です。

ステートで管理するものを考える

では掲示板に投稿する機能全体でステートとして管理しなきゃならないものは何でしょうか？
変化しそうなものに掲示板一覧・投稿文字を入力するエリアに入力された文字、投稿ユーザー、投稿一覧
の４つほどが考えられます。

今回の最終目標は選択した掲示板に投稿が追加できる　というものなので、
掲示板一覧は最初に読み込んだ値から不変ですので、ステートとして管理する必要はなし。
投稿文字に関しては、毎度毎度違う文字が入力されるので管理する必要あり。
投稿ユーザーは普通の掲示板であればログインした人のIDを用いるので、変化しませんが・・
ログイン処理を設けない、今回の掲示板では投稿の際にユーザーIDをSelectボックスで選択することにします。
つまり変化するので管理する必要ありです。
投稿対象の掲示板も変化するので管理する必要ありです。
投稿一覧も管理する必要があります。

ちょっと難しいかもですね。これ、慣れですので、だんだんわかってくると思います。
つまりこれだけの機能はあるけど、ReactJSで管理するステートは
投稿する文字　と投稿するユーザー　と投稿対象の掲示板と投稿一覧の４つだけということになります。

で、どこで管理するかというとトップレベルのクラスであるBoardAndCommentクラスです。
board_title と board_descriptionについては、それほど重要なステートではないので、
今のところは無視しておいてください。

BoardAndCommentクラスにこのステート管理部分を追記してみましょう。

コンストラクター(constructor)で値を初期化して、投稿文字が変化した時にステートを
変化させるメソッド(handleCommentChange)を定義して、
レンダーメソッドで、CommentAddクラスをレンダーする際に
CommentAddクラス内で起こるイベントを自分のクラスで処理できるように記述を追加します。

投稿ユーザーが変化した時にステートを
変化させるメソッド(handleUserChange)を定義して、
レンダーメソッドで、CommentAddクラスをレンダーする際に
CommentAddクラス内で起こるイベントを自分のクラスで処理できるように記述を追加します。

残りの２つもおいおい説明します。

[bash]
class BoardAndComment extends React.Component{
constructor(props){
super(props);
this.state = {comment: ”, user_id: 1, board_id: -1, comments: [], board_title: ”, board_description: ”};
}

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]

掲示板一覧を実装する

これは前回やった内容とほぼ同じですので、ソースだけ提示して、
変化しているごく僅かな部分だけ説明します。

Viewの調整
[bash]
<%= react_component('BoardAndComment', {datas: @boards}) %>

[/bash]

まずはトップレベルのBoardAndCommentクラスの変化箇所。
renderメソッド内で BoardList2をレンダーしている部分で
datasアトリビュートに this.props.datas　を渡しています。

[bash]
class BoardAndComment extends React.Component{
constructor(props){
super(props);
this.state = {comment: ”};
}

handleCommentChange(cm){
this.setState({comment: cm});
}

render(){
return (

this.handleCommentChange(cm)} />

);
}
}

[/bash]

次に2階層目のBoardList2クラス。renderメソッドで BoardList2クラスをレンダーする際に
BoardList2クラス内で起こるであろう掲示板選択のイベント(onBoardSelect)を自分の
クラスのメソッド内で処理させている。
もうひとつは、その処理も自分ではハンドリングしようがないので、もう１階層上のクラスに
任せている(handleBoardSelect)

[bash]
class BoardList2 extends React.Component{
constructor(props){
super(props);
}

handleBoardSelect(id){
this.props.onBoardSelect(id);
}

render(){
var lists = [];
var i;
for (i = 0; i < this.props.datas.length; i ++){ var data = this.props.datas[i]; lists.push( this.handleBoardSelect(id)}
/>);
}

return (

掲示板一覧を表示する場所です。
{lists}

);
}

}

[/bash]

最後に３階層目のクラスであるBoardLine2クラス。
行の右端に選択ボタンがあり、そのクリック処理を
onBoardSelectイベントとして１回層上のクラスに任せている。

[bash]
class BoardLine2 extends React.Component{
constructor(props){
super(props);
}

handleOnClick(){
this.props.onBoardSelect(this.props.data.id);
}

render(){
return (

{this.props.data.title}

);
}
}
[/bash]

最後の最後に見栄え調整のためのCSS
[bash]
div.blist2{
.board-title{
display: inline-block;
width: 320px;
}
}
[/bash]

動作確認

[bash]
$ rails s
[/bash]

ブラウザーで
http://localhost:3000/boards/bandc

こんな感じのものが表示されれば成功です

イベントの上位階層への連携

BoardLine2クラスの「選択ボタン」のクリック処理は１つ上の階層までは伝えましたが、
１つ上の階層がBoardList2クラスなので、もう１階層上まで伝えてあげなきゃなりません。

で、どうするかというと、やり方はほぼ同じで
BoardList2クラスをレンダーする際にイベント処理(onBoardSelect)を定義してあげて、
トップレベルクラスのメソッドで処理できるようにします。

handleCommentChange(cm){
this.setState({comment: cm});
}

handleBoardSelect(id){
alert(id);
}

render(){
return (

this.handleBoardSelect(id)}
/>

this.handleCommentChange(cm)} />

);
}
}
[/bash]

動作確認

[bash]
$ rails s
[/bash]

ブラウザーで
http://localhost:3000/boards/bandc

一覧が表示されて、選択ボタンをクリックすると、こんな感じのものが表示されれば成功です

投稿を追加する部分を実装する

画面左側の掲示板一覧を表示する部分はほぼ実装できたので、今度は投稿を追加する部分
つまり画面の右上の部分について説明していきます。

投稿する対象となる掲示板は画面左の一覧で「選択ボタン」をクリックしたものが対象になりますので、
右上の機能としては考える必要はありません。
右上の機能つまり CommentAddクラスの機能として必要なのは、
投稿の文字が変化したことをキャッチすること、投稿ユーザーが変化したことをキャッチすること。
投稿ボタンがクリックされたことをキャッチすること。
そしてそれらを上位クラスへ伝えてあげることです。

CommentAddクラス

では　CommentAddクラスを実装していきましょう。

[bash]
class CommentAdd extends React.Component{
constructor(props){
super(props);
}

handleOnUserChange(e){
this.props.onUserChange(e.target.value);
}

handleOnCommentChange(e){
this.props.onCommentChange(e.target.value);
}

handleCommentAdd(){
this.props.onCommentAdd();
}

render(){
var users = [];
var i;
for (i = 0 ; i < this.props.users.length ; i++){ var user = this.props.users[i]; users.push();
}

return (

掲示板に投稿を追加する機能を表示する場所です。
選択された掲示板
{this.props.board_title}

掲示板詳細
{this.props.board_description}

投稿ユーザー

投稿内容

this.handleOnCommentChange(e)}<br />
        /><br />
        <button
          onClick={() => this.handleCommentAdd()}><br />
          投稿<br />
        </button><br />
        </p></div>
<p>    );</p>
<p>  }<br />
}<br />
[/bash]</p>
<h4>コントローラーの調整</h4>
<p>投稿ユーザーの一覧が必要になりますので、以下のようにコントローラーを調整します。<br />
app/controllers/boards_controller.rb</p>
<p>[bash]<br />
class BoardsController < ApplicationController
  def index
    @boards = Board.all
  end

def bandc
    @boards = Board.all
    @users = User.all
  end

end
[/bash]

<h4>Viewの調整</h4>
<p>コントローラーで読み込んだ @usersを コンポーネントの初期値として渡します。<br />
app/views/boards/bandc.html.erb</p>
<p>[bash]<br />
<%= react_component('BoardAndComment', {datas: @boards, users: @users}) %></p>
<p>[/bash]</p>
<h4>BoardAndCommentクラスの調整</h4>
<p>renderメソッドで CommentAddクラスをレンダーする際に@usersの値を渡してあげます。</p>
<p>[bash]<br />
class BoardAndComment extends React.Component{<br />
  constructor(props){<br />
    super(props);<br />
    this.state = {comment: ”, user_id: 1, board_id: -1, comments: [], board_title: ”, board_description: ”};<br />
  }</p>
<p>  handleCommentChange(cm){<br />
    this.setState({comment: cm});<br />
  }</p>
<p>  handleUserChange(id){<br />
    alert(id);<br />
  }</p>
<p>  handleBoardSelect(id){<br />
    alert(id);<br />
  }</p>
<p>  handleCommentAdd(){<br />
    alert(“comment post”);<br />
  }</p>
<p>  render(){<br />
    return (</p>
<div className="bandc">
<div className="left-side">
          <BoardList2
            datas={this.props.datas}
            onBoardSelect={(id) => this.handleBoardSelect(id)}<br />
           />
        </div>
<div className="right-side">
          <CommentAdd
            users={this.props.users}
            onUserChange={(uid) => this.handleUserChange(uid)}<br />
            onCommentChange={(cm) => this.handleCommentChange(cm)}<br />
            onCommentAdd={() => this.handleCommentAdd()}<br />
           /><br />
          <CommentList datas={this.state.comments} />
        </div>
</p></div>
<p>    );<br />
  }<br />
}</p>
<p>[/bash]</p>
<h4>CSSの調整</h4>
<p>見栄えを調整します。<br />
app/assets/stylesheets/boards.scss</p>
<p>[bash]<br />
div.cadd{<br />
  .span1{<br />
    display: inline-block;<br />
    width: 100px;<br />
  }</p>
<p>  textarea{<br />
    width: 450px;<br />
    float: left;<br />
  }<br />
  button {<br />
    width: 80px;<br />
    height: 60px;<br />
  }<br />
}<br />
[/bash]</p>
<h3>コメントを投稿する機能を考える</h3>
<p>ここまでのところをまず動作確認してみましょう。</p>
<h4>動作確認</h4>
<p>[bash]<br />
$ rails s<br />
[/bash]</p>
<p>ブラウザーで<br />
http://localhost:3000/boards/bandc</p>
<p>投稿ボタンをクリックするとメッセージボックスが表示されますね。</p>
<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>
<p>クリックするとメッセージボックスがトップレベルのクラスから表示されているということは・・・<br />
あとは投稿ユーザーと投稿内容、対象となる掲示板が分かれば、データを追加することが出来ますね。</p>
<p>トップレベルクラス(BoardAndCommentクラス）のこれまでのソースを覗いてみます。</p>
<p>[bash]<br />
class BoardAndComment extends React.Component{<br />
  constructor(props){<br />
    super(props);<br />
    this.state = {comment: ”, user_id: 1, board_id: -1, comments: [], board_title: ”, board_description: ”};<br />
  }</p>
<p>  handleCommentChange(cm){<br />
    this.setState({comment: cm});<br />
  }</p>
<p>  handleUserChange(id){<br />
    alert(id);<br />
  }</p>
<p>  handleBoardSelect(id){<br />
    alert(id);<br />
  }</p>
<p>  handleCommentAdd(){<br />
    alert(“comment post”);<br />
  }</p>
<p>  render(){</p>
<p>　　以下略<br />
[/bash]</p>
<p>投稿ユーザーは handleUserChangeでIDが渡ってきているので、このメソッド内でステートを変化させればいい。<br />
投稿文字列はすでに変化の内容をセット済み。<br />
対象となる掲示板もhandleBoardSelectでIDが渡ってきているので、このメソッド内でステートを変化させればいい。</p>
<p>つまり投稿ボタンがクリックされた処理はトップレベルクラスの handleCommentAddメソッドで感知できますし、<br />
投稿すべき内容は全てステートを見ればわかるような状態になっているのです。。。素晴らしい。<br />
というかそうなるように組んできたので当たり前なのですが・・・</p>
<p>では、上記の部分　正しく書きなおしてみましょう。</p>
<p>[bash]<br />
class BoardAndComment extends React.Component{<br />
  constructor(props){<br />
    super(props);<br />
    this.state = {comment: ”, user_id: 1, board_id: -1, board_title: ”, board_description: ”};<br />
  }</p>
<p>  handleCommentChange(cm){<br />
    this.setState({comment: cm});<br />
  }</p>
<p>  handleUserChange(id){<br />
    this.setState({user_id: id});<br />
  }</p>
<p>  handleBoardSelect(id){<br />
    this.setState({board_id: id});<br />
  }</p>
<p>  handleCommentAdd(){<br />
    //alert(“comment post”);<br />
    ステートの値を使ってAjaxでデータをPOSTすればOK。<br />
  }</p>
<p>  render(){</p>
<p>　　以下略<br />
[/bash]</p>
<h3>ステートの値を使ってAjaxでデータをPOST</h3>
<h4>BoardAndCommentクラスのhandleCommentAddメソッドを調整します。</h4>
<p>[bash]<br />
  handleCommentAdd(){<br />
    var svThis = this;</p>
<p>    if (this.state.board_id == -1){<br />
      alert(“書き込み対象の掲示板を選択してください”);<br />
      return;<br />
    }</p>
<p>    var data = {<br />
      board_id: this.state.board_id,<br />
      user_id: this.state.user_id,<br />
      comment: this.state.comment,<br />
    };</p>
<p>    $.ajax({<br />
       type: “POST”,<br />
       url: “/boards/insertComment”,<br />
       async: false,<br />
       dataType: “json”,<br />
       data: data,<br />
       success: function(data, dataType){<br />
         //alert(data.status + “–” + data.row.company_name)<br />
         if (data.status == true){<br />
           alert(“投稿成功”);<br />
         }<br />
       },<br />
       error :function(XMLHttpRequest, textStatus, errorThrown){<br />
       }<br />
    });<br />
  }<br />
[/bash]</p>
<h4>routes.rbを調整</h4>
<p>config/routes.rb<br />
末尾に追記<br />
[bash]<br />
  post ‘boards/insertComment’<br />
[/bash]</p>
<h4>コントローラーにデータ追加処理実装</h4>
<p>app/controllers/boards_controller.rb</p>
<p>[bash]<br />
  def insertComment<br />
    response = {status:true}</p>
<p>    c = Comment.new({board_id: params[:board_id], user_id: params[:user_id], comment: params[:comment]})<br />
    c.save()</p>
<p>    render :json=> response</p>
<p>  end<br />
[/bash]</p>
<h3>コメントを投稿してみる</h3>
<p>ここまでのところをまず動作確認してみましょう。</p>
<h4>動作確認</h4>
<p>[bash]<br />
$ rails s<br />
[/bash]</p>
<p>ブラウザーで<br />
http://localhost:3000/boards/bandc</p>
<p>まず左側で掲示板を選択し、投稿文字を入力し、<br />
投稿ボタンをクリックすると投稿成功メッセージボックスが表示されますね。</p>
<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>
<h3>掲示板が選択されたら、コメントの一覧を表示する</h3>
<p>いよいよ最後です。<br />
右下の投稿一覧の部分を作成していきます。<br />
投稿一覧は画面左の掲示板一覧で選択ボタンがクリックされたタイミングで描画される。<br />
または、投稿が終了した時点で描画される。の2箇所になります。</p>
<p>結局 掲示板一覧で選択ボタンがクリックされた時と同じ動作を、投稿処理の後に挟めば良い。<br />
つまり、「選択ボタンがクリック」を実装してあげれば、投稿終了時にはその処理を呼べば良い<br />
ということになります。</p>
<p>では、「選択ボタンがクリック」はどうやって実装するか・・・<br />
これは単純にBoardAndCommentクラスのhandleOnBoardSelectメソッドで、Ajaxを使ってデータを取ってきて、<br />
投稿一覧を保持するステートを変えれば良いということになります。</p>
<h4>BoardAndCommentクラスの調整</h4>
<p>[bash]<br />
  handleBoardSelect(id){<br />
    this.setState({board_id: id});</p>
<p>    var svThis = this;</p>
<p>    $.ajax({<br />
       type: “GET”,<br />
       url: “/boards/readComments/” + id,<br />
       async: false,<br />
       dataType: “json”,<br />
       data: “name=John&location=Boston”,<br />
       success: function(data, dataType){<br />
         if (data.status == true){<br />
           alert(data.rows.length);<br />
           svThis.setState({comments: data.rows});<br />
         }<br />
       },<br />
       error :function(XMLHttpRequest, textStatus, errorThrown){<br />
       }<br />
    });<br />
  }<br />
[/bash]</p>
<h4>routes.rbの調整</h4>
<p>config/routes.rb</p>
<p>末尾に追記します。<br />
[bash]<br />
  get ‘boards/readComments/:board_id’ => ‘boards#readComments’<br />
[/bash]</p>
<h4>コントローラーの調整</h4>
<p>app/controllers/boards_controller.rb</p>
<p>[bash]<br />
  def readComments<br />
    response = {status:true}</p>
<p>    recs = Comment.eager_load(:user).where(“board_id = ?”, params[:board_id])<br />
            .order(“comments.created_at DESC”).as_json(include: :user)</p>
<p>    response[“rows”] = recs</p>
<p>    render :json=> response<br />
  end<br />
[/bash]</p>
<h4>モデルの調整</h4>
<p>app/models/comment.rb<br />
[bash]<br />
class Comment < ApplicationRecord
  belongs_to :user

end
[/bash]

<h4>動作確認</h4>
<p>[bash]<br />
$ rails s<br />
[/bash]</p>
<p>ブラウザーで<br />
http://localhost:3000/boards/bandc</p>
<p>まず左側で掲示板を選択し、投稿文字を入力し、投稿ボタンをクリックする。<br />
これを何度か繰り返して、テストデータを作ってください。</p>
<p>掲示板を選択した時、最初はメッセージボックスに「０」が表示されると思いますが、<br />
一旦投稿すると、次に同じ掲示板を選んだ場合、投稿数が増えていることが解ると思います。</p>
<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>
<h3>投稿一覧を表示してみましょう</h3>
<p>いよいよデータが取れたので、投稿一覧を表示してみましょう。</p>
<p>投稿一覧(CommentListクラス）のレンダー時に this.state.comments をアトリビュートとして渡していますので、<br />
Ajaxでデータを取得して</p>
<p>[bash]<br />
this.setState({comments: data.rows});<br />
[/bash]</p>
<p>とした時点で自動的にデータの変化は伝わります。</p>
<p>なので、渡ってきたデータを純粋に表示する部分のみを実装すればOKです。</p>
<h4>CommentListクラスの調整</h4>
<p>[bash]<br />
class CommentList extends React.Component{<br />
  constructor(props){<br />
    super(props);<br />
  }</p>
<p>  render(){<br />
    var lists = [];<br />
    var i;<br />
    for (i = 0 ; i < this.props.datas.length; i++){
      var data = this.props.datas[i];
      lists.push(<CommentLine data={data} key={data.id} />);<br />
    }</p>
<p>    return (</p>
<div className="clist">
        掲示板内の投稿一覧を表示する場所です。<br />
        {lists}
      </div>
<p>    );<br />
  }<br />
}<br />
[/bash]</p>
<h4>CommentLineクラスの調整</h4>
<p>[bash]<br />
class CommentLine extends React.Component{<br />
  constructor(props){<br />
    super(props);<br />
  }</p>
<p>  render(){</p>
<p>    return (</p>
<div className="cline">
<div>
          <label className="name">{this.props.data.user.name}</label><br />
          <label className="sex">{this.props.data.user.sex == 1 ? ‘男性’ : ‘女性’}</label><br />
          <label className="age">{this.props.data.user.age}歳</label>
        </div>
<div className="comment">
          {this.props.data.comment}
        </div>
</p></div>
<p>    );<br />
  }<br />
}<br />
[/bash]</p>
<h4>BoardAndCommentクラスの調整</h4>
<p>alert(data.rows.length); をコメントアウトします。<br />
[bash]<br />
  handleBoardSelect(id){<br />
    this.setState({board_id: id});</p>
<p>    var svThis = this;</p>
<p>    $.ajax({<br />
       type: “GET”,<br />
       url: “/boards/readComments/” + id,<br />
       async: false,<br />
       dataType: “json”,<br />
       data: “name=John&location=Boston”,<br />
       success: function(data, dataType){<br />
         if (data.status == true){<br />
           //alert(data.rows.length);<br />
           svThis.setState({comments: data.rows});<br />
         }<br />
       },<br />
       error :function(XMLHttpRequest, textStatus, errorThrown){<br />
       }<br />
    });<br />
  }</p>
<p>[/bash]</p>
<h4>CSSの調整</h4>
<p>[bash]<br />
div.clist{<br />
  clear: both;<br />
}</p>
<p>div.cline{<br />
  border-top: 1px solid #cccccc;<br />
  border-left: 1px solid #cccccc;<br />
  border-right: 1px solid #cccccc;</p>
<p>  label {<br />
    display: inline-block;<br />
  }<br />
  label.name{<br />
    width: 100px;<br />
  }<br />
  label.sex {<br />
    width: 40px;<br />
    font-size: 9px;<br />
  }<br />
  label.age{<br />
    width: 50px;<br />
    font-size: 9px;<br />
  }</p>
<p>  .comment{<br />
    padding: 10px;<br />
  }<br />
}<br />
[/bash]</p>
<h4>動作確認</h4>
<p>[bash]<br />
$ rails s<br />
[/bash]</p>
<p>ブラウザーで<br />
http://localhost:3000/boards/bandc</p>
<p>左側で掲示板を選択したら、右下のコメント一覧が表示されることを確認してください。<br />
<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>
<h3>投稿後に投稿一覧を更新する</h3>
<p>これは単純にJavaScriptでメソッドを呼んでやるだけです。</p>
<h4>BoardAndCommentクラスの調整</h4>
<p>[bash]<br />
  handleCommentAdd(){<br />
    var svThis = this;</p>
<p>    if (this.state.board_id == -1){<br />
      alert(“書き込み対象の掲示板を選択してください”);<br />
      return;<br />
    }</p>
<p>    var data = {<br />
      board_id: this.state.board_id,<br />
      user_id: this.state.user_id,<br />
      comment: this.state.comment,<br />
    };</p>
<p>    $.ajax({<br />
       type: “POST”,<br />
       url: “/boards/insertComment”,<br />
       async: false,<br />
       dataType: “json”,<br />
       data: data,<br />
       success: function(data, dataType){<br />
         //alert(data.status + “–” + data.row.company_name)<br />
         if (data.status == true){<br />
           //alert(“投稿成功”);<br />
           svThis.handleBoardSelect(svThis.state.board_id);<br />
         }<br />
       },<br />
       error :function(XMLHttpRequest, textStatus, errorThrown){<br />
       }<br />
    });<br />
  }<br />
[/bash]</p>
<h3>おまけというか補助機能</h3>
<p>ここまでの部分でほぼ出来上がりなんですが・・<br />
画面左側で「選択ボタンをクリック」したはいいけど、今どの掲示板に書き込もうとしているのか<br />
わかりにくい。この部分を改善してみましょう。</p>
<p>「選択ボタンをクリック」した時には掲示板のidのみがわかる状態なので、<br />
このidの値を使ってAjaxで掲示板の情報を拾いに行って、戻ってきた値で<br />
ステートを更新することで、掲示板のタイトル(title）と（description）を<br />
レンダリングしてあげましょう。</p>
<h4>BoardAndCommentクラスの調整</h4>
<p>ajaxを１つ増やします。</p>
<p>[bash]<br />
  handleBoardSelect(id){<br />
    this.setState({board_id: id});</p>
<p>    var svThis = this;</p>
<p>    $.ajax({<br />
       type: “GET”,<br />
       url: “/boards/readComments/” + id,<br />
       async: false,<br />
       dataType: “json”,<br />
       data: “name=John&location=Boston”,<br />
       success: function(data, dataType){<br />
         if (data.status == true){<br />
           //alert(data.rows.length);<br />
           svThis.setState({comments: data.rows});<br />
         }<br />
       },<br />
       error :function(XMLHttpRequest, textStatus, errorThrown){<br />
       }<br />
    });</p>
<p>    $.ajax({<br />
       type: “GET”,<br />
       url: “/boards/readBoard/” + id,<br />
       async: false,<br />
       dataType: “json”,<br />
       data: “name=John&location=Boston”,<br />
       success: function(data, dataType){<br />
         if (data.status == true){<br />
           svThis.setState({board_title: data.row.title});<br />
           svThis.setState({board_description: data.row.description});<br />
         }<br />
       },<br />
       error :function(XMLHttpRequest, textStatus, errorThrown){<br />
       }<br />
    });<br />
  }<br />
[/bash]</p>
<p>CommentAddクラスのレンダー時に読み込んだ値を渡してやります。</p>
<p>[bash]<br />
  render(){<br />
    return (</p>
<div className="bandc">
<div className="left-side">
          <BoardList2
            datas={this.props.datas}
            onBoardSelect={(id) => this.handleBoardSelect(id)}<br />
           />
        </div>
<div className="right-side">
          <CommentAdd
            users={this.props.users}
            board_title={this.state.board_title}
            board_description={this.state.board_description}
            onUserChange={(uid) => this.handleUserChange(uid)}<br />
            onCommentChange={(cm) => this.handleCommentChange(cm)}<br />
            onCommentAdd={() => this.handleCommentAdd()}<br />
           /><br />
           <CommentList datas={this.state.comments} />
        </div>
</p></div>
<p>    );<br />
  }<br />
[/bash]</p>
<h4>コントローラーの調整</h4>
<p>app/controllers/boards_controller.rb</p>
<p>[bash]<br />
  def readBoard<br />
    response = {status:true}</p>
<p>    recs = Board.where(“id = ?”, params[:board_id])</p>
<p>    response[“row”] = recs[0]</p>
<p>    render :json=> response<br />
  end<br />
[/bash]</p>
<h4>routes.rbの調整</h4>
<p>config/routes.rb</p>
<p>末尾に追記<br />
[bash]<br />
  get ‘boards/readBoard/:board_id’ => ‘boards#readBoard’<br />
[/bash]</p>
<h4>動作確認</h4>
<p>[bash]<br />
$ rails s<br />
[/bash]</p>
<p>ブラウザーで<br />
http://localhost:3000/boards/bandc</p>
<p>左側で掲示板を選択したら、右上の掲示板名と掲示板詳細が変化することを確認してください。</p>
<p><a href="http://lovelinux.mydns.jp/wp-content/uploads/2017/04/rails-17.png"><img fetchpriority="high" 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="(max-width: 806px) 100vw, 806px" /></a></p>
<p>以上となります。</p>
<p>どうでしたか？ReactJS面白いでしょ？？？<br />
是非、自分なりにいろいろ試してみてください。</p>
<p>繰り返しになりますが、連載した内容はGitHubの下記のURLで公開しています。<br />
<a href="https://github.com/h-mito/rails_with_react">https://github.com/h-mito/rails_with_react</a></p>
    
        <div class="page-pagination">

</div>
    </div>

<div class="clear"></div>
    
    <footer class="clearfix">
            <p class="prev-post">
        <a href="https://lovelinux.mydns.jp/?p=1545">« Previous Article</a>
        <a class="article-title" href="https://lovelinux.mydns.jp/?p=1545">RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.1</a>
        <span class="entry-date">2017年4月13日</span>
    </p>

<p class="next-post">
        <a href="https://lovelinux.mydns.jp/?p=1549">Next Article »</a>
        <a class="article-title" href="https://lovelinux.mydns.jp/?p=1549">Redux Todoサンプルを npmとwebpackで最小の環境を作って動かす</a>
        <span class="entry-date">2017年4月13日</span>                                
    </p>
    </footer>
</div>
            <div class="about-author clearfix">
            <a class="avatar-thumb" href="https://lovelinux.mydns.jp/?author=1"><img alt='' src='https://secure.gravatar.com/avatar/e7c5ca03ae8cd5b5d36ac0f62f59c26d34fd667afa57dafb4978790c04c5146f?s=87&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/e7c5ca03ae8cd5b5d36ac0f62f59c26d34fd667afa57dafb4978790c04c5146f?s=174&d=mm&r=g 2x' class='author-avatar avatar avatar-87 photo' height='87' width='87' loading='lazy' decoding='async'/></a>                                
            <div class="author-content">
                <header class="clearfix">
                    <h4>About the author:</h4>
                    <a href="https://lovelinux.mydns.jp/?author=1" title="hiro の投稿" rel="author">hiro</a>                                       
                </header>
                <p></p>                                
            </div>
        </div>
        
        
        <div class="tag-box">
            <span>Tags:</span>
            <a href="https://lovelinux.mydns.jp/?tag=rails" rel="tag">rails</a> <a href="https://lovelinux.mydns.jp/?tag=reactjs" rel="tag">reactjs</a>        </div>
    
      
                            <div class="kopa-related-post">
                            <h3><span data-icon=""></span>Related Posts</h3>
                            <div class="list-carousel responsive">
                                <ul class="kopa-related-post-carousel" id="related-widget">
                                           
                                        <li style="width: 390px;">
                                            <article class="entry-item clearfix">
                                                <div class="entry-thumb hover-effect">
                                                                                                                <div class="mask">
                                                                <a class="link-detail" data-icon="" href="https://lovelinux.mydns.jp/?p=1747"></a>
                                                            </div>
                                                            <img width="251" height="84" src="https://lovelinux.mydns.jp/wp-content/uploads/2017/07/mint-1.png" class="attachment-kopa-image-size-1 size-kopa-image-size-1 wp-post-image" alt="" decoding="async" loading="lazy" />                                                </div>
                                                <div class="entry-content">
                                                    <h6 class="entry-title"><a href="https://lovelinux.mydns.jp/?p=1747">Linux Mint（Ubuntu） で イマドキの開発しよう！ 2017年夏版</a><span></span></h6>
                                                    <span class="entry-date clearfix"><span class="fa fa-clock-o"></span><span>2017年7月29日</span></span>
                                                    <p>フロントReactJS、バックエンドRailsという構成でサービス立ち上げに関わってた。 思うんだけど、Macを開発に使うのはわかるんだけど、なぜWindows使う人がいるんだろ？ どうせリリースするのLinuxベースのOSなんだし、フロントはiPhoneのSafariか AndroidのChrome、まぁあとはWindowsのChrome,Firefox,IE,Edge Macはほとんど使わないんでわからないんだけど、Windowsはほんともっさり動作だよね。 これだけマシンのスペックがどんどん上がっているにもかかわらず、嫌がらせのように 動きがトロい。 コンソールでコマンドライン叩くのがほ…</p>
                                                </div>
                                            </article>
                                        </li>
                                               
                                        <li style="width: 390px;">
                                            <article class="entry-item clearfix">
                                                <div class="entry-thumb hover-effect">
                                                                                                                <div class="mask">
                                                                <a class="link-detail" data-icon="" href="https://lovelinux.mydns.jp/?p=1652"></a>
                                                            </div>
                                                            <img width="251" height="67" src="https://lovelinux.mydns.jp/wp-content/uploads/2017/04/dc-2.png" class="attachment-kopa-image-size-1 size-kopa-image-size-1 wp-post-image" alt="" decoding="async" loading="lazy" />                                                </div>
                                                <div class="entry-content">
                                                    <h6 class="entry-title"><a href="https://lovelinux.mydns.jp/?p=1652">dockerを使って RailsとReact(node)の開発環境を構築する</a><span></span></h6>
                                                    <span class="entry-date clearfix"><span class="fa fa-clock-o"></span><span>2017年4月29日</span></span>
                                                    <p>はじめに dockerを使って、Rails（サーバーサイド）の環境を１つ、React(node)（クライアントサイド）の環境を１つ作る。 両環境ではChromeとAtomが動かせて、開発できるようになるところまでが目標です。 docker 自体触るのが初めてだったので、基本的なことから記載しておきます。 加えて初心者なので、間違えがあったらごめんなさい。 docker自体のインストールはあちこちに記載されているので、そちらを参照ください。 docker イメージのダウンロード まず、ubuntuのイメージを検索します。 スター(STARS)が多い、イメージをダウンロード（PULL)すればOKで…</p>
                                                </div>
                                            </article>
                                        </li>
                                               
                                        <li style="width: 390px;">
                                            <article class="entry-item clearfix">
                                                <div class="entry-thumb hover-effect">
                                                                                                                <div class="mask">
                                                                <a class="link-detail" data-icon="" href="https://lovelinux.mydns.jp/?p=1646"></a>
                                                            </div>
                                                            <img width="251" height="91" src="https://lovelinux.mydns.jp/wp-content/uploads/2017/04/sass-3.png" class="attachment-kopa-image-size-1 size-kopa-image-size-1 wp-post-image" alt="" decoding="async" loading="lazy" />                                                </div>
                                                <div class="entry-content">
                                                    <h6 class="entry-title"><a href="https://lovelinux.mydns.jp/?p=1646">Webpackを使って、Sassをコンパイルする方法 2017年4月版</a><span></span></h6>
                                                    <span class="entry-date clearfix"><span class="fa fa-clock-o"></span><span>2017年4月28日</span></span>
                                                    <p>はじめに Webpackを使って、Sassをコンパイルする方法です。 Webにそれなりにやり方が載ってますが、2017年4月末現在では、動く例が少なかったので、 実際に動いた例を示しておきます。 末尾にReactなんかの開発で ES6をノーマルなJavascriptに変換するときとの合わせ技の方法も記載しておきます。 コンパイル環境構築 [bash] $ mkdir test-saas $ cd test-saas $ npm init -y $ npm install webpack extract-text-webpack-plugin css-loader sass-loader sty…</p>
                                                </div>
                                            </article>
                                        </li>
                                               
                                        <li style="width: 390px;">
                                            <article class="entry-item clearfix">
                                                <div class="entry-thumb hover-effect">
                                                                                                                <div class="mask">
                                                                <a class="link-detail" data-icon="" href="https://lovelinux.mydns.jp/?p=1641"></a>
                                                            </div>
                                                            <img width="251" height="157" src="https://lovelinux.mydns.jp/wp-content/uploads/2017/04/rn-2-1.png" class="attachment-kopa-image-size-1 size-kopa-image-size-1 wp-post-image" alt="" decoding="async" loading="lazy" />                                                </div>
                                                <div class="entry-content">
                                                    <h6 class="entry-title"><a href="https://lovelinux.mydns.jp/?p=1641">React Native デバイスの縦向き(PORTRAIT)、横向き(LANDSCAPE)の変化を捉える（イベント）</a><span></span></h6>
                                                    <span class="entry-date clearfix"><span class="fa fa-clock-o"></span><span>2017年4月26日</span></span>
                                                    <p>はじめに React Nativeを初めて１０日ほどが立ちました。画面デザインが難しいですね。 flex layoutを使うと、それなりの画面は出来ますが・・・ ヘッダー(Navigation)とフッター(Menu or Tab)のサイズが 曖昧になり、 時には隠れてしまうケースもあります。 で、どうすりゃいいんだと考えて、今、思いついたのは、 flex layoutを諦めて、固定ピッチで画面デザインをしてやること。 固定ピッチと言っても、デバイスの画面サイズを判定して、 ヘッダーはこの高さ、メインのコンテンツはこの高さ、フッターはこの高さ というのを計算で求めてやるのが、一番スマートかなとい…</p>
                                                </div>
                                            </article>
                                        </li>
                                               
                                        <li style="width: 390px;">
                                            <article class="entry-item clearfix">
                                                <div class="entry-thumb hover-effect">
                                                                                                                <div class="mask">
                                                                <a class="link-detail" data-icon="" href="https://lovelinux.mydns.jp/?p=1633"></a>
                                                            </div>
                                                            <img width="251" height="81" src="https://lovelinux.mydns.jp/wp-content/uploads/2017/04/dropzone.png" class="attachment-kopa-image-size-1 size-kopa-image-size-1 wp-post-image" alt="" decoding="async" loading="lazy" />                                                </div>
                                                <div class="entry-content">
                                                    <h6 class="entry-title"><a href="https://lovelinux.mydns.jp/?p=1633">Reactで react-dropzone と axiosを使ってファイルアップロードを実装してみる（バックエンドはRails）</a><span></span></h6>
                                                    <span class="entry-date clearfix"><span class="fa fa-clock-o"></span><span>2017年4月24日</span></span>
                                                    <p>はじめに Reactでファイルアップロードを実装してみたくて、どのような方法があるのか調べてみた。 あまり深く調べてはないが、１つめに良さそうだと感じた react-dropzone を使ってみたら、 これがかなりいい！！ あまりに気に入ってしまったので、react-dropzoneでアップロード対象のファイルを選んで、 axiosでPOSTして、サーバーサイドのRailsでファイルを保存するところまでをざっと紹介します。 Reactのことは分かっている前提ですすめますので、あしからず。 出来上がりのイメージはこんな感じ 画面左上に ファイルをドロップする場所があり、その右側にドロップされたフ…</p>
                                                </div>
                                            </article>
                                        </li>
                                               
                                        <li style="width: 390px;">
                                            <article class="entry-item clearfix">
                                                <div class="entry-thumb hover-effect">
                                                                                                                <div class="mask">
                                                                <a class="link-detail" data-icon="" href="https://lovelinux.mydns.jp/?p=1619"></a>
                                                            </div>
                                                            <img width="251" height="68" src="https://lovelinux.mydns.jp/wp-content/uploads/2017/04/oauth-9.png" class="attachment-kopa-image-size-1 size-kopa-image-size-1 wp-post-image" alt="" decoding="async" loading="lazy" />                                                </div>
                                                <div class="entry-content">
                                                    <h6 class="entry-title"><a href="https://lovelinux.mydns.jp/?p=1619">ReactでSPAを作り、Twitter認証(OAuth)でログインする。バックエンドはRails</a><span></span></h6>
                                                    <span class="entry-date clearfix"><span class="fa fa-clock-o"></span><span>2017年4月21日</span></span>
                                                    <p>はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。 バックエンドはRailsだが、あくまでAPIサーバー的な立場なので メジャーなomniauth なんかは使えそうにない。。。 前回のGoogle編に続き、今回はTwitter編。 あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、 実装のエキス部分だけを記載してみます。 Twitter Developerにア…</p>
                                                </div>
                                            </article>
                                        </li>
                                               
                                        <li style="width: 390px;">
                                            <article class="entry-item clearfix">
                                                <div class="entry-thumb hover-effect">
                                                                                                                <div class="mask">
                                                                <a class="link-detail" data-icon="" href="https://lovelinux.mydns.jp/?p=1608"></a>
                                                            </div>
                                                            <img width="251" height="73" src="https://lovelinux.mydns.jp/wp-content/uploads/2017/04/oauth-8.png" class="attachment-kopa-image-size-1 size-kopa-image-size-1 wp-post-image" alt="" decoding="async" loading="lazy" />                                                </div>
                                                <div class="entry-content">
                                                    <h6 class="entry-title"><a href="https://lovelinux.mydns.jp/?p=1608">ReactでSPAを作り、Google認証(OAuth)でログインする。バックエンドはRails</a><span></span></h6>
                                                    <span class="entry-date clearfix"><span class="fa fa-clock-o"></span><span>2017年4月20日</span></span>
                                                    <p>はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。 バックエンドはRailsだが、あくまでAPIサーバー的な立場なので メジャーなomniauth なんかは使えそうにない。。。 あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、 実装のエキス部分だけを記載してみます。 Google Developer Consoleにアプリ登録 Google Develope…</p>
                                                </div>
                                            </article>
                                        </li>
                                               
                                        <li style="width: 390px;">
                                            <article class="entry-item clearfix">
                                                <div class="entry-thumb hover-effect">
                                                                                                                <div class="mask">
                                                                <a class="link-detail" data-icon="" href="https://lovelinux.mydns.jp/?p=1571"></a>
                                                            </div>
                                                            <img width="251" height="199" src="https://lovelinux.mydns.jp/wp-content/uploads/2017/04/rr-6-251x199.png" class="attachment-kopa-image-size-1 size-kopa-image-size-1 wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://lovelinux.mydns.jp/wp-content/uploads/2017/04/rr-6-251x199.png 251w, https://lovelinux.mydns.jp/wp-content/uploads/2017/04/rr-6-252x201.png 252w" sizes="auto, (max-width: 251px) 100vw, 251px" />                                                </div>
                                                <div class="entry-content">
                                                    <h6 class="entry-title"><a href="https://lovelinux.mydns.jp/?p=1571">React-Router(react-router-dom)とReduxとRailsを組み合わせる</a><span></span></h6>
                                                    <span class="entry-date clearfix"><span class="fa fa-clock-o"></span><span>2017年4月14日</span></span>
                                                    <p>はじめに React+Redux+RailsでSPAアプリを作ることになったので、あれこれ調べたのでメモです。 SPAというと、当然ですが、１つのページであれこれできちゃうものを作らなきゃいけないわけで・・・ そうなるとコンテンツ制御の仕組みが必要です。そこで登場するのがReact-Router-Dom。 で、これ単体では使い方簡単なんですが、RailsとReduxを絡めて動作させる方法が分からなかったので あれこれ調べて、なんとか動くところまでたどり着いたので、メモを公開します。 React-Routerは古いようで、React-Router-Domにしてみました。。 ドキュメントが超少なく…</p>
                                                </div>
                                            </article>
                                        </li>
                                                                        </ul>
                                <div class="clearfix"></div>
                                                                    <div class="carousel-nav clearfix">
                                        <a id="prev-4" class="carousel-prev" href="#"><</a>
                                        <a id="next-4" class="carousel-next" href="#">></a>
                                    </div>
                                                            </div>
                        </div>
                            
    	  
	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Leave a comment<span data-icon=""></span> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/?p=1547#respond" style="display:none;">Cancel</a></small></h3><form action="https://lovelinux.mydns.jp/wp-comments-post.php" method="post" id="kp-comments-form" class="comment-form"><div class="comment-right"><p class="textarea-block">
            <label class="required" for="comment_message">Your comment <span>(required):</span></label>        
            <textarea name="comment" id="comment_message">

Name (required):

Email (required):

Website

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.2

RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.2