React と Rails でアプリを作成してみた【TODOアプリ】

## React on Rails

Rails
■ データをJSON形式で返す
■ MVCのMとCを担当

React
■ MVCのVを担当

## JSONとは？
JSONは「JavaScript Object Notification」の略で、JavaScriptで値を取り扱うためのドキュメント規格の事。もともとはJavaScript上で値を取り扱うためのフォーマットだったが、JavaScriptで値を扱う上で便利に利用できることから、JavaScriptフロントエンドの普及に伴い、バックエンドと通信する際のフォーマットとして利用されはじめた。

## 環境の準備

```
//プロジェクトを作成する
rails new <プロジェクト名> --webpack=react -T

yarn add react-router-dom axios styled-components react-icons react-toastify
```
- react-router-dom：Reactでのroutingの実現
- axios：サーバとのHTTP通信を行う
- styled-components：CSS in JS のライブラリ
- react-icons：Font Awesomeなどのアイコンが簡単に利用できるライブラリ
- react-toastify ユーザーに対してエラーその他アラートを表示させるときに便利な機能


## model & table & data　を作成する

```
rails g model todo name is_completed:boolean
```
```db/migrate/create_todo.rb
def change
  create_table :todos do |t|
    t.string :name, null: false
    t.boolean :is_completed, default: false, null: false

    t.timestamps
  end
end
```
```
rails db:migrate
```
```db/seeds.rb
SAMPLE_TODOS = [
  {
    name: 'Going around the world',
  },
  {
    name: 'graduating from college'
  },
  {
    name: 'publishing a book',
  }
]

SAMPLE_TODOS.each do |todo|
  Todo.create(todo)
end
```

```
rails db:seed
```

## controllerを作成する

①app/controllers/にsite_controller.rbファイルを作成する

```app/controllers/site_controller.rb
class SiteController < ApplicationController
    def index
    end
  end
```
②app/views/にsite/index.html.erb を作成する

```app/views/site/index.html.erb
<div id="root"></div>
```



③app/controllers/にapi/v1フォルダとtodo_controller.rbファイルを作成する

```app/controllers/api/v1/todos_controller.rb
class Api::V1::TodosController < ApplicationController
  def index
    todos = Todo.order(updated_at: :desc)
    render json: todos
  end

  def show
    todo = Todo.find(params[:id])
    render json: todo
  end

  def create
    todo = Todo.new(todo_params)
    if todo.save
      render json: todo
    else
      render json: todo.errors, status: 422
    end
  end

  def update
    todo = Todo.find(params[:id])
    if todo.update(todo_params)
      render json: todo
    else
      render json: todo.errors, status: 422
    end
  end

  def destroy
    if Todo.destroy(params[:id])
      head :no_content
    else
      render json: { error: "Failed to destroy" }, status: 422
    end
  end

def destroy_all
    if Todo.destroy_all
      head :no_content
    else
      render json: { error: "Failed to destroy" }, status: 422
    end
  end

  private

  def todo_params
    params.require(:todo).permit(:name, :is_completed)
  end
end
```
④config/routes.rbを編集する

```config/routes.rb
root to: redirect('/todos')

get 'todos', to: 'site#index'
get 'todos/new', to: 'site#index'
get 'todos/:id/edit', to: 'site#index'

namespace :api do
  namespace :v1 do
    delete '/todos/destroy_all', to: 'todos#destroy_all'
    resources :todos, only: %i[index show create update destroy]
  end
end
```
⑤app/controllers/application_controller.rbを編集する

```app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :null_session
end
```

## turbolinksの無効化

Turbolinksとは、Rails4から正式導入された画面遷移を高速化させるライブラリ。Turbolinks自体はJavaScriptのライブラリとして提供されているが、Railsでは利用しやすいようにGemとしてデフォルトで組み込まれている。

①app/views/layouts/application.html.rbの２行を削除する

```app/views/layouts/application.html.rb
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
//書き換える

<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
```
②app/javascript/packs/application.jsを編集する

```app/javascript/packs/application.js

//コメントアウトする
// Turbolinks.start()
```
③app/javascripts/packs/hello_react.jsxをapp/javascripts/packs/index.jsxに変更する

```

```




## 参考サイト
[【React on Rails】React と Rails を利用してTODOアプリを作成しよう（PART1）How to create a Rails project with a React](https://www.youtube.com/watch?v=yD0QotED6f8&t=52s)
[今さら聞けないJSONとは？表記形式や使い方をサンプル付きで解説！](https://camp.trainocate.co.jp/magazine/whats-json/)
[React.js ライブラリ「react-toastify」を使用してアラート機能を実装する](https://mebee.info/2020/03/12/post-7271/)