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

はじめに

RailsとReactJSを用いてちょっとした掲示板を作ってみましょうというのが今回のコンセプト

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

モデルの作成、データベースにテーブル作成

掲示板(board)、投稿ユーザー(user)、投稿(comment)の３つのテーブルを作ります。
カラムは以下のような感じです。

rails g model でモデルとマイグレーションファイルを作成します。

[bash]
$ rails g model board title:string description:text
$ rails g model user name:string sex:integer age:integer
$ rails g model comment board_id:integer user_id:integer comment:text
[/bash]

データベース作成
[bash]
$ rake db:migrate
[/bash]

出来上がったイメージはこんな感じ。

Seedデータの作成

何もないところからデータ投稿までつくり上げるのには時間がかかるので、シード(seed)データを
作っておいて、まずはそのデータを読んで、一覧表示することぐらいから始めましょう。

掲示板テーブルのCSVデータ

[bash]
$ nano db/csv/boards.csv
[/bash]

[bash]
1,ReactJSを学ぼう,あいうえお
2,ReactJS と Rails連携,かきくけこ
3,ReactJS 発展編,さしすせそ
4,jQuery入門,たちつてと
5,jQuery得意な人集まれ,なにぬねの
6,AngularJS入門,はひふへほ
7,vue.jsってなんぞ,まみむめも

[/bash]

投稿ユーザーテーブルのCSVデータ

[bash]
$ nano db/csv/users.csv
[/bash]

[bash]
1,花子,2,23
2,太郎,1,30
3,幸次郎,1,15
4,浩輝,1,40
5,大樹,1,35
6,すず,2,28
7,雅代,2,38
[/bash]

Seedデータをデータベースに反映するスクリプト

seeds.rbを編集
[bash]
$ nano db/seeds.rb
[/bash]

[bash]
require ‘csv’

CSV.foreach(‘db/csv/boards.csv’) do |row|
Board.create!(id: row[0], title: row[1], description: row[2])
end

CSV.foreach(‘db/csv/users.csv’) do |row|
User.create!(id: row[0], name: row[1], sex: row[2], age: row[3])
end

[/bash]

Seedデータの投入

[bash]
$ rake db:seed
[/bash]

掲示板一覧を表示するページをつくてみる

ここからが本題。サンプルデータが入った掲示板を一覧表示する処理を記述していきましょう。

コントローラー作成

[bash]
$ rails g controller boards index
[/bash]

出来上がったコントローラーに掲示板一覧を読み込む行を追記する。

[bash]
class BoardsController < ApplicationController def index @boards = Board.all end end [/bash]

一覧画面を表示することをイメージする

掲示板一覧とはどんな画面でしょうか・・・？？
ReactJSでは出来上がりのイメージを頭の中で作って、
そのイメージにあうクラス群を作っていきます。

イメージはこんな感じ。

• 掲示板一覧全体を表す BoardListクラス
• 掲示板一行を表す BoardLineクラス

Reactコンポーネント作成

じゃあ、クラスは決まったので、実装していきましょう。

[bash]
$ rails g react:component BoardList
[/bash]

以下のファイルが作成されます。
app/assets/javascripts/components/board_list.js.jsx

ではこのファイルを編集していきましょう。
Railsで自動作成されるスクリプトはちょっと古い形式のものなので、
全部消しちゃいます。

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

render(){
return (

);
}

}

[/bash]

Viewファイルを編集します。
app/views/boards/index.html.erb

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

[/bash]

動作確認

[bash]
$ rails s
[/bash]

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

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

Railsで読み込んだデータをコンポーネントに渡して一覧表示する

先ほどの動作確認ではコントローラーでデータを読み込んだにもかかわらず、
そのデータを一切利用していませんでした。今回は読み込んだデータを使って
一覧表示をしてみます。

View

Viewファイルを編集します。
app/views/boards/index.html.erb

[bash]
<%= react_component('BoardList', {datas: @boards}) %>

[/bash]

BoardListコンポーネント調整

ここで何が起こっているかというと、 Viewのreact_component の２つ目の引数に
コントローラーで読み込んだ 掲示板一覧データ(@boards)が設定されています。

datas : @boards

となっているのは、 BoardListクラスでは datasプロパティに掲示板一覧データを
セットするよとなっているのです。

ここでようやくデータが渡ってきたのでBoardListクラス内で
掲示板一覧を出力してみましょう。

lines という配列変数を定義し、Viewから渡された @boardsの内容を
this.props.datasプロパティを介して読み込み、ループしながら
DataLineコンポーネントを出力しています。

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

render(){
var lines = [];
var i;

for (i = 0 ; i < this.props.datas.length ; i++){ var data = this.props.datas[i]; lines.push();
}

return (

);
}

}

[/bash]

DataLineクラスを出力しましたが、肝心のDataLineクラスが無いので
作成していきます。

お作法的には別ファイルに記述するのが良いのかもしれませんが、
とりあえず、BoardListクラスと同じファイルに記述していきましょう。

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

render(){
return (

);
}
}

[/bash]

ちょっと見栄えが悪いのでCSSも追加しておきましょう。
app/assets/stylesheets/boards.scss

[bash]
div.board-line{
.board-id{
display: inline-block;
width: 50px;
padding: 5px;
}
.board-title{
display: inline-block;
width: 500px;
}

}
[/bash]

動作確認

[bash]
$ rails s
[/bash]

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

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