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
今さら聞けないJSONとは？表記形式や使い方をサンプル付きで解説！
React.js ライブラリ「react-toastify」を使用してアラート機能を実装する