superAgentでRailsとReactをAPI連携しつつ、簡易的な表テーブルを作成する

[watchを使ってReactとES6の変更を監視 + 自動ビルドする](http://qiita.com/Takkiii/items/e538666e8143c15ab0f7)の続きです。

前回は、
* watchでディレクトリの変更を監視し、変更を検知したらシェルスクリプトを実行し、トランスパイルと依存関係の解決を自動で行う
というところをやりました。

今回は、本エントリーの目標である「書籍についてのメモや評価を記録できるアプリケーション」というところに着手していきます。まず、現在実装している「books/index」のページに表テーブルを作成します。

「Reactビギナーズガイド」では、**データとなる部分を配列として定義→ローカルストレージを使って実装**といったステップを踏んで表テーブルを実装しています。本エントリーでは、Railsと連携させているということで、**データとなる部分を配列として定義→RailsでAPIを作成し、React側からgetする**という流れで実装していきたいと思います。

## 1. 表テーブルを作成する
```books.js
import React from 'react'
import ReactDOM from 'react-dom'

class Books extends React.Component {
  render() {
    const headers = ["タイトル", "著者", "出版年",] // ①追記
    return (
      // ②以下変更
      <div>
        <h1>BookApp</h1>
        <table>
          <thead>
            <tr>
              {headers.map((header, index) => {
                return (
                  <th key={index}>{header}</th>
                )
              })}
            </tr>
          </thead>
        </table>
      </div>
      // ②ここまで変更 
    )
  }
}

ReactDOM.render(
  <Books />,
  document.getElementById("books")
)
```

①で表テーブルのヘッダーとなる部分を配列定義しています。

②で注意したいのは、まず`headers.map((header, index)...`という部分でしょうか。
僕のような「**ES5とかES6とか聞いたことはあるけど全然知らない、開発では専らJQueryさ！**」みたいな感じの人は結構いるんじゃないかなと勝手に思っているんですが、ES5から実装されたメソッドだそうです。
参考資料: [Array.prototype.map()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

Reactは単一の要素しか返さないので、`<h1>...</h1>`と`<table>...</table>`の要素を`<div></div>`で囲んでいます。
ブラウザで確認してみましょう。

![image](https://qiita-image-store.s3.amazonaws.com/0/59672/27c94458-9604-8a5e-63a7-8dd414bf13bb.png)

開発環境では`watch 'sh build.sh' app/frontend`を実行しているので、自動ビルドが走り、表ヘッダーが表示されています。

## 2. APIの作成
データ部分はもちろん、ヘッダー部分もデータベースのカラム名などを表示できれば余計な変数を定義せずに済みますね。ということでデータ部分のハードコーディングは省略し、早速Rails側の実装に入っていきたいと思います。

### 2-1. Bookモデルの作成
まずはモデルを作成します。

```shell-session
$ rails g model title:string author:string published_date:date
$ rails db:migrate
```

### 2-2. API用コントローラーの作成

続いて、API用にコントローラーを作成します。

```shell-session
$ rails g controller api/books index
```

```api/books_controller.rb
class Api::BooksController < ApplicationController
  def index
    books = Book.select(:id, :title, :author, :published_date).all
    render json: {
      books: books.as_json,
    }
  end
end

```
selectメソッドで`created_at`, `updated_at`など余計なデータを除外しておきます。
このままではデータが存在しないため、`rails console`で2件ほど適当にデータを作成します。

```shell-session
$ rails console
> Book.create(title: 'Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門', author: 'Stoyan Stefanov', published_date: '2017-3-11')
> Book.create(title: '入門 React ―コンポーネントベースのWebフロントエンド開発', author: 'Frankie Bagnardi', published_date: '2015-4-3')
```

## 3. React側からAPIにリクエストを送る

### 3-1. superagent
rails側での準備はひとまず整ったので、続いてReact側の準備をしていきます。
「Reactビギナーズガイド」ではローカルストレージを使っているので、APIリクエストに関する情報は記載されていません。APIリクエストを送る方法について軽く調べてみたところ、

1. JQueryを使う
2. Ajax関連のライブラリを使う

という選択肢がありそうでした。今回は**SuperAgent**というAjaxだけをやってくれるライブラリを導入し、React側からAPIリクエストを送りたいと思います。

【参考資料】
* [今からはじめるReact.js〜サーバーとの通信〜](http://qiita.com/kuniken/items/bc20fd1e907d91b641d6)
* [SuperAgent](https://visionmedia.github.io/superagent/)

```shell-session
$ npm install --save superagent
```

### 3-2. APIリクエスト用のコードを書く

```books.js
import React from 'react'
import ReactDOM from 'react-dom'
import request from 'superagent' // 追記

class Books extends React.Component {
  render() {
    // 以下追記
    request
      .get('/api/books/index')
      .end((error, res) => {
      if (!error && res.status === 200) {
        console.log(JSON.parse(res.text))
      } else {
        console.log(error)
      }
    })
    // ここまで追記

    const headers = ["タイトル", "著者", "出版年",]
    return (
      <div>
        <h1>BookApp</h1>
        <table>
          <thead>
            <tr>
              {headers.map((header, index) => {
                return (
                  <th key={index}>{header}</th>
                )
              })}
            </tr>
          </thead>
        </table>
      </div>
    )
  }
}

ReactDOM.render(
  <Books />,
  document.getElementById("books")
)
```

ブラウザで「http://localhost:3000/books/index」 にアクセスし、デベロッパーツールの**Console**を開きます。

![image](https://qiita-image-store.s3.amazonaws.com/0/59672/a39c0c72-5986-2662-aaaf-7464cf0679bb.png)


3行目に`Object {books: Array[2]}`と表示されているのが分かります。

![image](https://qiita-image-store.s3.amazonaws.com/0/59672/63898ba0-e0bd-9cc5-3d0d-656d7e68669f.png)

中身を見てみると、booksテーブルから取得したデータが連想配列の形で入っていることが分かります。
これでRails側、React側ともにAPI周りの実装をすることができました。

### 3-3. APIから取得したデータをstateにセットする

APIから取得したデータをコンポーネントで使用するために、リクエストに成功した場合はsetStateメソッドを使用し、stateにセットします。また、コンポーネントが描画される直前にデータを取得するために`componentWillMount`内でAPIリクエストを送信します。

APIを叩くためのコードは`getState()`メソッドを定義し、その中に書いていきます。

```books.js
import React from 'react'
import ReactDOM from 'react-dom'
import request from 'superagent'

class Books extends React.Component {
  // 追記
　　　　constructor() {
    super()
    this.state = {
      books: [],
    }
  }

  // 追記
  componentWillMount() {
    this.getState()
  }

  // render()からコピー
  getState() {
    request
      .get('/api/books/index')
      .end((error, res) => {
      if (!error && res.status === 200) {
        // console.log()部分を変更
        const json = JSON.parse(res.text)
        this.setState({
          books: json.books,
        })
      } else {
        console.log(error)
      }
    })
  }

  render() {
    // APIリクエストのコードをgetState()に移動

    const headers = books[0] != null ? Object.keys(books[0]) : [] // 変更
    return (
      <div>
        <h1>BookApp</h1>
        <table>
          <thead>
            <tr>
              {headers.map((header, index) => {
                return (
                  <th key={index}>{header}</th>
                )
              })}
            </tr>
          </thead>
        </table>
      </div>
    )
  }
}

ReactDOM.render(
  <Books />,
  document.getElementById("books")
)
```

`const headers = books[0] != null ? Object.keys(books[0]) : []`という1行で、データがnullでないときに、連想配列のキー部分(カラム名にあたる部分)を`headers`に代入しています。

この状態でブラウザを確認すると、カラム名がヘッダーとして表示されています。

![image](https://qiita-image-store.s3.amazonaws.com/0/59672/4ab38817-820b-e4d0-ce29-6e29b55c5c53.png)


### 3-4. データを表示する

最後に書籍データを表示していきます。

```books.js
import React from 'react'
import ReactDOM from 'react-dom'
import request from 'superagent'

class Books extends React.Component {
　　　　constructor() {
    super()
    this.state = {
      books: [],
    }
  }

  componentWillMount() {
    this.getState()
  }

  getState() {
    request
      .get('/api/books/index')
      .end((error, res) => {
      if (!error && res.status === 200) {
        const json = JSON.parse(res.text)
        this.setState({
          books: json.books,
        })
      } else {
        console.log(error)
      }
    })
  }

  render() {
    const {books} = this.state
    const headers = books[0] != null ? Object.keys(books[0]) : []
    return (
      <div>
        <h1>BookApp</h1>
        <table>
          <thead>
            <tr>
              {headers.map((header, index) => {
                return (
                  <th key={index}>{header}</th>
                )
              })}
            </tr>
          </thead>
          // 以下追記
          <tbody>
            {books.map((book, index) => {
              return (
                <tr key={index}>
                  {Object.values(book).map((row, index) => {
                    return (
                      <td key={index}>{row}</td>
                    )
                  })}
                </tr>
              )
            })}
          </tbody>
          // ここまで追記
        </table>
      </div>
    )
  }
}

ReactDOM.render(
  <Books />,
  document.getElementById("books")
)
```

ブラウザで確認してみます。

![image](https://qiita-image-store.s3.amazonaws.com/0/59672/109011c3-b871-b7d4-3f8c-cd5cc41de24a.png)

これでAPI連携部分と表テーブルは完成しました。
次回は「Reactビギナーズガイド」に沿って、表テーブルのデータを編集する機能を作っていきます。