Rails 5.0 と React、Redux、Ajaxを組み合わせて掲示板アプリを作ってみよう

Rails 5.0 と React、Redux、Ajaxを組み合わせて掲示板アプリを作ってみよう

Rails 5.0 と React、Redux、Ajaxを組み合わせて掲示板アプリを作ってみよう

Rails 5.0 と React、Redux、Ajaxを組み合わせて掲示板アプリを作ってみよう へのコメントはまだありません

はじめに

Reduxを勉強して、ようやく大筋を理解し、Railsとの連携方法も分かったので、
Rails+React+Redux+Ajaxの組み合わせでちょっとした掲示板を作ってみました。

Rails+React+Redux+Ajaxの組み合わせで必要なノウハウはだいたい組み込まれていると思います。
ここで紹介するソースはGitHubのここで公開していますので自由に利用してください。

対象とする読者は Railsはそこそこ知っている。Reactも勉強した。Reduxも勉強した、もしくは勉強中である
という方が対象です。

Rails + React + Reduxの環境を整える

これに関しては書き出すと長くなるので、この記事を参照して準備してください。
Todoサンプルを動かす必要はないので、とりあえず RailsとReactとReduxのインストールと連携の部分の作業を行ってください。

Railsのインストールやnode.js npm のインストールなどは他に山ほど丁寧に書かれたサイトがあるので、それらを参照してください。

掲示板アプリ作成開始

さて、いよいよ掲示板アプリの作成開始です。

完成形の動作イメージはこんな感じです。
左に掲示板一覧がリストアップされていて、右に投稿を行う場所と投稿一覧が表示されている感じです。

redux-21

Railsプロジェクト作成

これ以降の RailsとReact、Reduxの組み合わせの環境を構築する手順はこちらの記事(Rails5.0 に React、Reduxを導入して、Redux本家のTodoサンプルを動かす)を参照にして頑張ってみてください。

とりあえず、Redux本家のTodoが動かせたらOKです。手間を省きたければTodoアプリのコピペはしなくて結構です。

components.js編集

app/assets/javascripts/components.js

board.jsはアプリのエントリーポイントとなるJSファイルです。ここに定義したクラス名(const宣言)を
windowの下にセット(変数として公開)してやる。
(意味はいまいち理解できていないのですが、必須みたいです)

全て消して以下の4行を追記。Todoアプリを移植していない場合は、Todosの行は不要

React+Reduxの掲示板のエントリーポイントとなるJSファイルを作成

app/assets/javascripts/board.js

すべてのReducerをまとめる親Reducer作成

app/assets/javascripts/reducers/root.js

アプリケーションのトップ階層となるApp.jsを作成

app/assets/javascripts/components/App.js

Railsでコントローラーとビューを作成

ビュー編集

ビューを編集して、掲示板のReactコンポーネントを作成します。
app/views/board/index.html.erb

ここまでで動作確認

これで最低限のところは出来たので、Railsサーバーを起動して、動作確認。

http://localhost:3000/board/index

こんな感じのイメージが表示されれば成功。
redux-22

モデル作成、サンプルデータ作成

Railsのモデルを作成し、サンプルデータをSeedファイル(CSV)として読み込める状態にしましょう。

モデルの作成

マイグレート

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

Seedデータの作成

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

db/csv/boards.csv

db/csv/users.csv

db/csv/comments.csv

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

db/seeds.rbを編集

Seedデータの投入

完成イメージからパーツ構成を導き出す

いよいよReact+Reudxの本論に入ります。
まずは、こんな感じのものができればいいなという理想型です。

redux-21
これをパーツに分解するとこんな感じ
redux-23

Reactっぽい発想からReduxの発想にシフトする

Reactの場合は単純にこのパーツイメージでコンポーネントを作っていけばよかったのですが、
React+Reduxの場合は、ちょっと発想を追加する必要があります。
基本的に上で表示したパーツは全て必要です。

Reduxでは Reactで言うステートやイベントを組み込みたいコンポーネントにひとつ
ラッパーコンポーネントを作ります。これ重要です。

必要なステートを考える

ここでまず考えなければならないのが、なにをステートとして保持するかということです。
これはReactの考え方と全く同じでOKです。

今回の場合は以下になると思います。

  • 現在アクティブな掲示板
  • 掲示板に投稿されたコメント一覧

掲示板一覧、ユーザー一覧は初期値を与えたあとは固定なので、ステートではありません。

発生するイベントを考える

掲示板で発生するイベントは以下の2つが考えられます。

  • 掲示板選択
  • コメント投稿

コンポーネントの上のラッパーコンポーネントは?

ステートとイベントをどうするかが決まったので、ラッパーコンポーネントを挟む位置を考えます。
掲示板選択のイベントはBoardListクラスから発生するので、その上にラッパーをかぶせます。
ラッパー名は決まりはありませんが、ラッパーするクラスの前に「C」をつけたクラスとします。
ですので、この場合は「CBoardList」となります。

掲示板の投稿を行うのはCommentAddクラスですので、このラッパーは「CCommentAdd」クラスとなります。

最後にイベントは発生しませんが、掲示板が選択された時に、掲示板に投稿されたコメント一覧を
リフレッシュする必要がありますので、コメント一覧を保持している CommentListクラスのラッパーとして
「CCommentList」クラスも必要となります。

Appコンポーネントから、アプリケーションの表示の大枠を作る

難しいかもしれませんが、我慢してください。

app/assets/javascripts/components/App.js

app/assets/javascripts/containers/CBoardList.js

app/assets/javascripts/containers/CCommentAdd.js

app/assets/javascripts/containers/CCommentList.js

ラッパーコンポーネントからconnectされたコンポーネント(本体)を作る

connect(mapStateToProps,mapDispatchToProps)(xxxxxxx) として作られた
xxxxxxxxのコンポーネントを作ります。

app/assets/javascripts/components/BoardList.js

app/assets/javascripts/components/CommentAdd.js

app/assets/javascripts/components/CommentList.js

アプリケーションで利用するCSS作成

とりあえず全て貼り付けておきます。単純にコピペしてください。

app/assets/stylesheets/board.scss

ここまでで動作確認

これで最低限のところは出来たので、Railsサーバーを起動して、動作確認。

http://localhost:3000/board/index

こんな感じのイメージが表示されれば成功。
redux-25

ステート(Reducer)を考える

既に考えているステートは以下のものです。
これら1つ1つをReducerとして作りましょう。

  • 現在アクティブな掲示板
  • 掲示板に投稿されたコメント一覧

掲示板一覧、ユーザー一覧は 今回は初期値を与えたあとは変動しないので、ステートとは考えません。

最初はよくわからないかもしれませんが・・・こんなものだと思って我慢してください。

app/assets/javascripts/reducers/sel_board.js

app/assets/javascripts/reducers/comments.js

発生するイベント(ActionCreator)を考える

掲示板で発生するイベントは以下の2つでした。これをもとにActionCreatorを作成しましょう。
これも理解しがたいと思いますが、我慢してください。

  • 掲示板選択
  • コメント投稿

app/assets/javascripts/actions/index.js

rootReducerの調整

Reducerが出揃ったのでルートReducerを調整します。

app/assets/javascripts/reducers/root.js

掲示板一覧を表示する

アプリケーションの骨格が出来上がってきて、Reducerも出揃ったので、
いよいよ掲示板一覧を表示してみましょう。

Railsでデータの読み込み

コントローラーに以下のソースを追記(indexの中の2行)

app/controllers/board_controller.rb

ビュー調整

読み込んだ値をReactコンポーネントに引数として与えます。
app/views/board/index.html.erb

エントリーポイント調整

アプリケーションのエントリーポイント、アプリケーションのトップ階層を調整します。

app/assets/javascripts/board.js

app/assets/javascripts/components/App.js

掲示板一覧のラッパー「CBoardList」、掲示板一覧「BoardList」を調整

app/assets/javascripts/containers/CBoardList.js

app/assets/javascripts/components/BoardList.js

掲示板の一行を表す「BoardLine」を作成

ここまでで動作確認

これで最低限のところは出来たので、Railsサーバーを起動して、動作確認。

http://localhost:3000/board/index

こんな感じのイメージが表示されれば成功。
redux-26

コメント投稿エリア作成

ラッパー「CCommentAdd」、投稿エリア本体「CommentAdd」を調整します。

app/assets/javascripts/containers/CCommentAdd.js

app/assets/javascripts/components/CommentAdd.js

ここまでで動作確認

これで最低限のところは出来たので、Railsサーバーを起動して、動作確認。

http://localhost:3000/board/index

こんな感じのイメージが表示されれば成功。
redux-27

掲示板のコメント一覧を表示する

いい感じに出来上がってきたので、次は左の掲示板の選択ボタンをクリックして、
右側にその掲示板に投稿されたコメント一覧を表示する部分を実装してみましょう。

まず、BoardListのラッパークラスのイベントハンドラに以下のようなソースを追記します。
AJAXでデータを取る部分は、次に説明します。
AJAXの仕方などは他のサイトなど読んで参考にしてください。

ポイントはAJAXで読み込んだデータを

dispatch(comment_read(data.rows))

で、ActionCreatorを作って、Reducerにdispatchしているところです。

app/assets/javascripts/containers/CBoardList.js

routes.rbの編集

config/routes.rb

コントローラーの調整

app/controllers/board_controller.rb

モデルの調整

app/models/comment.rb

コメント一覧のラッパー、本体の調整

app/assets/javascripts/containers/CCommentList.js

app/assets/javascripts/components/CommentList.js

コメントの1行を表す CommentLine追加

app/assets/javascripts/components/CommentLine.js

アイコンファイルをコピー

投稿者のアイコンイメージを作ってありますので、下記のファイルを手作業で
public/images/ フォルダ配下にコピーしてください。
hito-1hito-2hito-3hito-4hito-5hito-6hito-7hito-8

ここまでで動作確認

これで最低限のところは出来たので、Railsサーバーを起動して、動作確認。

http://localhost:3000/board/index

左側の掲示板からどれかを選択したら、右側にコメント一覧が表示されれば成功。
redux-28

コメント投稿機能作成

コメントを投稿する機能を作成する手順を説明します。

コントローラーの調整

app/controllers/board_controller.rb

routes.rbの調整

コメント投稿のラッパーと本体の調整

app/assets/javascripts/containers/CCommentAdd.js

app/assets/javascripts/components/CommentAdd.js

ここまでで動作確認

これで完成です。Railsサーバーを起動して、動作確認。

http://localhost:3000/board/index

左側の掲示板からどれかを選択し、右側にコメント投稿欄に何か記述し「投稿」ボタンクリックで
一覧に追加されたら成功です。

redux-29

ここで紹介したソースはGitHubのここで公開していますので自由に利用してください。
お疲れさまでした。

追記、GitHubソースの利用方法

インストール方法

動作確認

Railsサーバーを起動して、動作確認。

http://localhost:3000/board/index

以上


About the author:

Related Posts

Leave a comment

Back to Top