React Native、Redux、Railsを使って、掲示板アプリを作ってみよう

React Native、Redux、Railsを使って、掲示板アプリを作ってみよう

React Native、Redux、Railsを使って、掲示板アプリを作ってみよう

React Native、Redux、Railsを使って、掲示板アプリを作ってみよう へのコメントはまだありません

はじめに

前回、React NativeをAndroid Studioと組み合わせてインストールし、HelloWorldを出せるところまで
たどり着きました。

今回は一足飛びで、React NativeとReduxをフロントエンドに使い、バックエンドにRailsを用いた
掲示板アプリを作ってみましょう。
前提として、Railsはそれなりにわかっている。Reactもよく分かっている。Reduxも知っている。
ぐらいのレベルを前提にしています。

出来上がったアプリは、デザイン的にどんくさいですが、これは私がまだReactNativeの
スタイルの方法を学んでいないためです。まぁそれはおいおいブラッシュアップすることとしましょう。

ソースはすべてGitHubで公開しています。利用方法など含めて、記事の最後に記載しておきます。

機能一覧

  • 掲示板一覧が表示される
  • 掲示板を選択したら、対象のコメント一覧が表示される
  • コメントを投稿できる

機能はこの3つだけ。掲示板も追加できたほうがいいのでしょうが・・
あまり欲張ってあれこれ実装すると、なにを説明しているかわからなくなるので、今回は
カットしておきましょう。

出来上がりのイメージからパーツ構成を考える

出来上がりの画面イメージは以下のようなものです。いかにもどんくさい画面ですが、
これは私がReact Nativeのスタイルの作法がわかっていないためですので、勘弁ください。
rn-31

とりあえず、この画面イメージから、どんなパーツ(Reactのコンポーネント)が必要となるか
考えてみましょう。ざっと以下のようなイメージになると思います。
rn-30

アプリが持つべき、ステートとイベントを考える

画面パーツは考え終わったので、次にアプリが持つステートとイベントを考えましょう。

ステート

  • 現在アクティブな掲示板
  • アクティブな掲示板に投稿されたコメント群
  • 投稿ユーザー
  • 投稿コメント
  • CSRF Token

大体この5つとなります。
投稿ユーザーと投稿コメントは、ステートにしなくても良いのかもしれませんが、Redux風に記述しようとすると
ステートとした方が処理しやすいので、ステートとします。
CSRF Tokenとは、バックエンドのRailsサーバーに対してPOST処理をするときに必要となる認証用のキーみたいなものです。
とりあえず、必要なんだなぁ・・・ぐらいに考えておいてください。

イベント

  • 掲示板を選択する
  • 投稿ユーザーを選択する
  • 投稿コメントを入力する
  • 掲示板にコメントを投稿する

投稿ユーザーの選択とは、本来の掲示板の機能では必要ではありませんが、
ログイン処理などを設けない、今回説明するこのアプリでは、投稿のたびに「私は誰ですよ」と
ユーザーも選択して、コメントを投稿することにします。

バックエンドであるRailsサーバーに必要な機能

バックエンド(サーバーサイド)のRailsアプリに必要な機能をリストアップしてみましょう。

  • 掲示板一覧を取得
  • 投稿ユーザー一覧を取得
  • 対象掲示板のコメント一覧を取得
  • コメントを投稿

Railsでバックエンド処理を実装する

Railsは分かっている前提ですので・・、ざーーっと説明します。

目標となるファイル構成は以下のような感じです。
rn-32
まずはRailsプロジェクトと、React Nativeプロジェクトの親フォルダを作りましょう。

Railsプロジェクト作成

Gemファイルを調整して、bundle install

末尾に1行追記

動作確認

bundle install して、Railsサーバー起動

ここまでのところを動作確認します。
ブラウザーで

http://localhost:3000

にアクセスしてください。以下のような画面が出れば成功です。
rn-33

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

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

モデルの作成

モデルの調整

rnative_rails/app/models/comment.rb

マイグレート

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

Seedデータの作成

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

db/csv/boards.csv

db/csv/users.csv

db/csv/comments.csv

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

db/seeds.rbを編集

Seedデータの投入

バックエンドAPI用 AJAXコントローラー作成

コントローラーにAPI実装
rnative_rails/app/controllers/board_controller.rb

*readBoardAndUser
起動時に掲示板一覧とユーザー一覧を取得
*insertComment
コメントを投稿
*readComments
選択された掲示板に投稿されたコメント一覧を取得
X-CSRF-Tokenも返しています。

rnative_rails/app/controllers/board_controller.rb

routes.rbの編集

rnative_rails/config/routes.rb

APIの動作確認

サーバーを起動して、ブラウザーにAPIのURLを入力

http://localhost:3000/board/readBoardAndUser

下図のようにJSONが戻ってきてたら成功。
rn-34
これでバックエンドの処理は完成です。

React Nativeでクライアントサイドを実装する

プロジェクトの作成

reduxをインストール

Android Studioから ADV Manager起動

メニューより Tools >> Android >> AVD Manager

AVD Managerより仮想デバイスを起動すると、以下のような画面が表示されます。
rn-35

React Nativeのデフォルトトップページを表示

以下のような画面が出れば成功です。
rn-36

Reduxの標準的なフォルダを作成

Reduxのお作法に従い、標準的なフォルダを作成します。

エントリーポイント調整、App.js作成

アプリケーションのエントリーポイントである index.android.jsを調整し、
アプリケーションのトップレベルの階層である App.jsを作成します。

rnative/index.android.js

rnative/components/App.js

動作確認

以下のように表示されればOKです。
rn-37

コンポーネント群作成

既に考えたパーツ構成に従い、コンポーネント群を作っていきましょう。

rnative/components/BoardList.js

rnative/components/CommentAdd.js

rnative/components/CommentList.js

ラッパークラス群(container)作成

Reduxでは、イベントやプロパティを割り当てたいコンポーネントの一層上に
ラッパークラス(container)をかぶせてやる必要があります。
コンポーネントのクラスの前に「C」をつけて、クラスを作りましょう。

rnative/containers/CBoardList.js

rnative/containers/CCommentAdd.js

rnative/containers/CCommentList.js

Reducerの作成

既に考えてあるステートを実装するReducerを作成します。
最初は難しいかもしれませんが、こんなもんだと思って慣れてください。

rnative/reducers/root.js

rnative/reducers/comments.js

rnative/reducers/csrf_token.js

rnative/reducers/sel_board.js

rnative/reducers/sel_user.js

エントリーポイント、アプリケーションのトップ階層(App.js)の調整

createStoreで作成したストアを Providerのプロパティに渡し、Providerの子供に
App を設定します。

rnative/index.android.js

アプリケーションのコンポーネントの骨格を作成します。
実際のコンポーネントではなくラッパークラス(container)でレイアウトを作ります。

rnative/components/App.js

動作確認

ここまでのところで動作確認します。
以下のような画面が出ればOKです。

rn-38

掲示板一覧を読み込み、表示する

さて、いよいよ、サーバーのAPIにアクセスして、データを読み込み、表示してみましょう。

その前に準備として、ActionCreatorの作成と、定数ファイルを作っておきましょう。

既に考えてある、イベントから、ActionCreatorを作ります。
これも慣れてください。

rnative/actions/index.js

アプリで使う定数群を扱うファイルです。
今回はAPIサーバーが起動している開発PCのIPアドレスをセットしておきます。
ここは、ご自身の開発マシンのIPアドレスをセットしてください。

rnative/constants/index.js

アプリの起動時にAPIサーバーにアクセスし、掲示板一覧・ユーザー一覧を取得(readInit)し、
CBoardListとCCommentAdd のプロパティにセット。

rnative/components/App.js

rnative/containers/CBoardList.js

読み込まれたデータをループで展開し、1行を表す BoardLineをn個作る。

rnative/components/BoardList.js

掲示板の1行を意味するBoardLineクラスの作成

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

仮想デバイス(Android)から接続しなければならないので、b オプションをつけて
サーバーを起動

めでたく掲示板一覧が表示されましたか?
rn-39

コメント一覧を読み込み、表示

まず、読み込み部分。
これは掲示板一覧の右側にある「SELECT」ボタンがクリックされた時に
読み込みます。

rnative/containers/CBoardList.js

データを読み込んだあと

dispatch(comments_read(responseJson.rows));

で、commentsステートが変化するので、それに合わせて表示を変える部分を実装しましょう。

rnative/containers/CCommentList.js

コメント一覧のコンポーネントです。

rnative/components/CommentList.js

コメントの1行を表すコンポーネントです。
rnative/components/CommentLine.js

画像ファイルを配置

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

動作確認

起動して、掲示板をどれか選択してみてください。
以下のようなページが表示されれば成功です。

rn-40

コメント投稿機能

最後にコメント投稿機能を実装します。

rnative/containers/CCommentAdd.js

rnative/components/CommentAdd.js

動作確認

起動して、掲示板をどれか選択してみてください。
以下のようなページが表示されます。
投稿欄に何か文字を入力し、Pickerから投稿ユーザーを選択し(これ必ずやってください(バグですが・・・))
投稿ボタンを押してみてください。

ちゃんと投稿できたら、成功です。

rn-41

rn-42

長くなりましたが、これで終了です。

GitHubの公開ソースの利用の仕方

ここで公開したソースはすべてGitHubに公開しています。ご自由にご利用ください。
APIサービス(バックエンド)
https://github.com/h-mito/reactnative_rails_board

ReactNativeアプリ(フロントエンド)
https://github.com/h-mito/reactnative_board

利用方法は以下となります。

別ターミナルを開いて

[/bash]

ご自身の開発マシンのIPアドレスに書き換える

Android Studioの起動、AVD Manager起動、仮想デバイス起動
別ターミナルを開いて

メニューより Tools >> Android >> AVD Manager を起動

仮想デバイスを実行(Andoridのエミュレーター画面が表示されます。)

掲示板一覧が表示され、いずれかの掲示板を選択すると
以下のような画面が出ればOK。

rn-44


About the author:

Related Posts

Leave a comment

Back to Top