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

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

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

RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.1 へのコメントはまだありません

はじめに

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

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

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

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

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

データベース作成

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

rails-1

Seedデータの作成

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

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

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

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

seeds.rbを編集

Seedデータの投入

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

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

コントローラー作成

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

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

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

イメージはこんな感じ。

rails-2

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

Reactコンポーネント作成

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

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

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

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

動作確認

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

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

rails-3

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

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

View

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

BoardListコンポーネント調整

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

datas : @boards

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

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

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

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

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

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

動作確認

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

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

rails-4


About the author:

Tags:

Related Posts

Leave a comment

Back to Top