webエンジニアが子育てするらしいですよ

RubyやPython, JSなど、IT関連の記事を書いています

React+Railsで簡単なCRUDを作ってみました

こんにちは、さもです。

先日ついにReactに入門してみました。

www.uosansatox.biz

もともとこの記事はRailsにReactを導入する前にReactのチュートリアルで基礎を覚えようと言うものでした。

めでたく基礎をクリアしたので、いよいよRailsへ導入して、簡単なCRUDを作ってみました。

完成形はこんな感じです。

ソースはこちらにあります。

スポンサーリンク

作ったものの概要

基本的なCRUDです。

画面左には名前とメールアドレスが表示されるリストがあり、右には登録更新用のフォームがあります。

フォームにて登録を行うと、左のリストの一番上にユーザーが追加されます。

リストのユーザを選択すると、右のフォームが更新用フォームになり、名前とメールアドレスを更新することが出来ます。

更新が完了するとリストも更新されます。

ユーザを削除すると、リストが更新され、削除したユーザが表示されなくなります。

全てajax通信なので画面全体が更新されることはありません。

Railsへの導入

webpackを利用した導入方法もあるようですが、実際やってみると少し複雑だったので、react-railsというgemを使いました。

また、ajax通信にはこれまでjQueryを使っていたのですが、今回はSuperAgentというajaxを行ってくれるjsライブラリを使いました。

これでjQueryとは完全にさよならです。

作ったコンポーネント

UserList・・・ルートとなるコンポーネント。ユーザの一覧表示
UserList/UserRow・・・一覧に表示する各ユーザ
UserList/UserForm・・・登録更新フォーム

UserList/UserRowというのはUserListがUserRowの親コンポーネントになっていると言う意味です。正しい書き方かどうかは知りません。

振り返ってみると、Userというルートコンポーネントを作っておいて、リストとフォームを分ければ良かったなと思いました。

User
User/UserList
User/UserList/UserRow
User/UserForm

みたいな感じです。

ちなみに、ファイル構成はこんな感じです。

app/assets/javascripts/components/*・・・各コンポーネントが入っている(user_list.js.jsx、user_form.js.jsx)
app/controllers/users_controller.rb・・・最初の画面を表示する用のコントローラ
app/controllers/api/users_controller.rb・・・一覧、登録、更新を処理するコントローラすべてjsonを返す
app/models.user.rb・・・ユーザモデル
app/views/users/index.html.erb・・・唯一の画面テンプレート
app/views/api/users/index.json.jbuilder・・・ユーザ一覧のjsonを作るテンプレート

普通のReactと異なる点

React+HTMLだけのコードもチュートリアルしかやっていませんが、思っていたのとここが違うなというのを挙げたいと思います。

ファイルを分けてもexportしなくていい

一覧UserListとフォームUserFormを別ファイルに分けようと思ったとき、いくつか方法をしらべると、exportで別ファイルのコンポーネントを呼び出せると書いてあったのですが、とくにその必要もなく、普通に別ファイルのUserFormが呼び出せました。

ReactDOM.renderではなくて、ヘルパーを使う

ReactDomを使えば、

ReactDOM.render(
  <UserList />,
  document.getElementById('root')
);

みたいにできるのですが、react-railsでこの方法は使えず、代わりにヘルパーが用意されていました。

なので、以下のように書きます。jsファイルはコンポーネントを作ることに専念できます。

<%= react_component('UserList') %>

requireが使えなかった

外部ライブラリを使うときは

var superagent = require('superagent');

とできるらしいのですが、requireのところでエラーが出て使えず、代わりに以下の方法で使えました

window.superagent

まとめ

stateを更新すると、画面も連動して変わる。というシンプルな考え方のおかげで柔軟で自然な発想で開発することができました。

だんだんとReactでの開発が楽しくなってきました。仮想DOMいいですね!

これからの個人開発はReactを積極的に使っていくと思います。

読者登録はこちらからお願いします。