React と Web API の簡単な紹介

1. REACT & WEB API
RUBY舞鶴
26, JUNE, 2016
SHIGERU KONDOU

2. REACT学び⽅
書籍 「⼊⾨ React」 O'REILY かなり古い ES6 での書き
⽅が出ていない 現在 DOM 操作は 'react-dom' に分かれ
ている
チュートリアル
とにかく書きまくる

3. おすすめ構成
ES6
Webpack
Webpack-dev-server

4. 構築⽅法
Webpack や Webpack-dev-server の設定が⾯倒なので
boilerplate を探すと良い。
例) react-es6-webpack-boilerplate
$ git clone git@github.com:vasanthk/react-es6-webpack-boilerplate.git
$ cd react-es6-webpack-boilerplate
$ npm i
$ npm start

5. 簡単なサンプルを作る

6. ⽅針
React のチュートリアルは、⼊⼒フォームからの登録
と⼀覧表⽰ができるアプリなので 改造して Rails API
サーバに接続できるようにする。
せっかく React 使うので 通信部分も jQuery.ajax でなく
fetch を使う。

7. COMMENTBOX.JS
export default class CommentBox extends React.Component {
constructor(props) {
super(props);
this.state = {data: []};
this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
}
componentDidMount() {
fetch(this.props.url)
.then((response)=>response.json())
.then((json)=>{this.setState({data: json});
});
}
handleCommentSubmit(comment) {
console.log('handle comment submit', comment);
fetch(this.props.url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(comment)
})
全ソースは https://github.com/cncgl/react-tutorial-client

8. COOMENTFORM.JS
export default class CommentForm extends React.Component {
constructor(props) {
super(props);
this.state = {author: '', text: ''};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleAuthorChange = this.handleAuthorChange.bind(this);
this.handleTextChange = this.handleTextChange.bind(this);
}
handleAuthorChange(e) {
this.setState({author: e.target.value});
}
handleTextChange(e) {
this.setState({text: e.target.value});
}
handleSubmit(e) {
e.preventDefault();
const author = this.state.author.trim();
const text = this.state.text.trim();
if( !text || !author) { return; }
this.props.onCommentSubmit({author: author, text: text});
this.setState({author: '', text: ''});
.bind(this) は忘れがちなので注意

9. COMMENTLIST.JS
export default class CommentList extends React.Component {
constructor(props) {
super(props);
}
render() {
console.log('props', this.props);
const commentNodes = this.props.data.map(comment =>
(<Comment author={comment.author} key={comment.id}>
{comment.text}
</Comment>));
return (<div className="commentList">{commentNodes}</div>);
}
}
CommentList.propTypes = { data: React.PropTypes.array.isRequired };

10. 簡単なアプリを作る（サーバー
編）

11. WEB API (RAILS)
Rails API モード Rails 5 は標準だが 4以下は rails-api gem
を使⽤する。
$ bundle exec rails new . --skip-spring --api
$ bundle
$ bundle exec rails g scaffold comment author text
$ bundle exec rails db:migrate

12. Active Model をJSON にシリアライズ
$ vim Gemfile
...
gem 'active_model_serializers'
...
$ bundle
Comment モデルに対するシリアライザーの作成
$ bundle exec rails g serializer comment

13. app/serializers/comment_serializer.rb
class CommentSerializer < ActiveModel::Serializer
attributes :id
end
↓
class CommentSerializer < ActiveModel::Serializer
attributes :id, :author, :text
end
app/controllers/application_controller.rb
class ApplicationController < ActionController::API
end
↓
class ApplicationController < ActionController::API
include ActionController::Serialization
end

14. COMMENT_CONTROLLER.RB
class CommentsController < ApplicationController
before_action :set_comment, only: [:show, :update, :destroy]
# GET /comments
def index
@comments = Comment.all
render json: @comments
end
# GET /comments/1
def show
render json: @comment
end
# POST /comments
def create
@comment = Comment.new(comment_params)
if @comment.save
render json: @comment, status: :created, location: @comment
else
全ソースは https://github.com/cncgl/react-tutorial-server

15. 参考
Building the Perfect Rails 5 API Only App
http://sourcey.com/building-the-prefect-rails-5-api-only-
app/
DDoS や API のバージョニング、認証についても書かれ
ているので⼀度⾒ておいてほしい

16. WEB SERVER と API SERVER の構成
同⼀型
１つのサーバーで配信と API サーバーを兼ね備える。
SSR があれば html を書き出す機能と API を返す機能のハ
イブリッドになる。

17. 分離型
HTML, JavaScript, asset を静的コンテンツのサーバに置
き、 API サーバーとは分離する。 クロスドメイン制約が
あるため、JSONP や CORS で対応する。
SSR がある場合は Rendering Server と API サーバーの構
成にする。

18. おさらいCORS(CROSS ORIGIN RESOURCE
SHARERING)
HTTPリクエストヘッダ
GET /api HTTP/1.1
Origin: https://trustedsite.com
Origin が信⽤できるサイトである場合レスポンスヘッダ
に
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https//trustedsite.com
を追加することによりブラウザでのアクセスが可能とな
る。

19. RAILS に RACK-CORS を組み込む
$ vim Gemfile
...
gem 'rack-cors'
...
$ bundle
config/application.rb
module YourApp
class Application < Rails::Application
# ...
config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'
resource '*', :headers => :any,
:methods => [:get, :post, :delete, :put, :patch, :options]
end
end
end
end

20. まとめ
React は ES2015 と相性がよくすっきりかける
ｊQuery と⼿を切るため fetch を使っていきたい
Rails 5 の API モード等で API サーバは作れる。
Active Model のシリアライズに active_model_serializers が
必要
配信と API を分ける場合は、クロスオリジン対策が必
要 Rails ならば rack-cors が簡単