More than 1 year has passed since last update.

railsとreactでtodoアプリを作る！（part1）

Last updated at 2021-11-03Posted at 2021-11-03

作成するアプリについて

railsとreactを用いたtodoアプリになります。
https://todo-app-rails-react.herokuapp.com/todoes

（part2）

（part3）

（part4）

（part5）

開発環境

ruby3.0
rails6.1(rails6以上必須)
react17.0.2
vscode

アプリの作成手順

サーバーサイドの実装
1. アプリの作成
2. turbolinksの無効化
3. モデル＆テーブルの作成
4. 初期データの作成
5. top#indexの作成
6. todoes_controllerの作成
7. ルーティングの設定
8. application_controllerの設定
9. application.html.erbに追記
フロントサイドの実装
1. conponentsフォルダの作成
2. リセットcssと共通cssの設定
3. index.jsxの記述
4. App.jsの記述
5. TodoLists.jsの記述
6. NewTodo.jsの記述
7. EditTodo.jsの記述

の手順で進めていきます。早速ですが進めていきましょう！

アプリ作成

1.　サーバーサイドの実装

1.1 アプリの作成

ターミナルにて以下を実行してアプリを作成します。
rails _6.1.4.1_ new todo-app --webpack=react -T -d mysql
（バージョン、オプション、アプリ名は適宜変更してください。）

config/database.yml

default: &default
  adapter: mysql2
  #  encoding: utf8mb4
  encoding: utf8 #このように変更
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

cd todo-app
としてアプリまで移動し、reactの導入をします。
yarn add react-router-dom axios styled-components react-toastify

react-router-dom : Reactでのroutingの実現。
axios : サーバとのHTTP通信を行う。
styled-components : CSS in JS のライブラリ。
react-toastify : ポップアップメッセージを容易に作れるライブラリ。

1.2 turbolinksの無効化

これを忘れると挙動がおかしくなります

以下のファイルを編集

app/views/layouts/application.html.erb

<!-- <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> -->
<!-- <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> -->
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>

続いてTurbolinks.start()をコメントアウト

app/javascript/packs/application.js

Rails.start()
//Turbolinks.start()
ActiveStorage.start()

以上でturbolinksの無効化されました。

1.3 モデル＆テーブルの作成

続いてモデルとテーブルの作成をしていきます。
mdoel名はtodoとしましょう。必要カラムは以下の通りです

content（todoの内容、string型）
complete（完了しているか否かを判定するためのカラム、boolean型）

では作っていきます。

rails g model todo

モデルが作成できたらマイグレーションファイルを編集していきます。

db/migrate/12345678_create_todo.rb

class CreateTodos < ActiveRecord::Migration[6.1]
  def change
    create_table :todos do |t|
      t.string :content, null: false
      t.boolean :complete, default: false, null: false

      t.timestamps
    end
  end
end

boolean型を指定するときには必ずdefault値を指定する必要があります。

データベースをマイグレーション

rails db:create
rails db:migrate

これでモデル関係の完成です。
必要に応じて

gemfile

gem 'mysql2', '~> 0.5.3'

としてbundle updateをしてください。

1.4 初期データの作成

あると便利なので初期データを投入していきます

db/seed.rb

initial_todoes = [
  {
    content: 'initial todo 1'
  },
  {
    content: 'initial todo 2'
  },
  {
    content: 'initial todo 3'
  }
]

initial_todoes.each do |todo|
  Todo.create(todo)
end

seeds.rbに記述できましたら以下を実行してデータベースに投入します。
rails db:seed

1.5 top#indexの作成

後ほどルーティング処理で記述しますが全てのリクエストをこちらのtop_controllerのindexアクションに飛ばします。
rails g controller top index
これで必要なアクションとビューページが作成されます。

app/controller/top_controller.rb

class TopController < ApplicationController
  def index
  end
end

ビューページは以下のように編集してください。

app/views/top/index.html.erb

<div id="root"></div>

1.6 todoes_controllerの作成

中核をなすコントローラーの作成をしていきます。こちらのコントローラーはほぼほぼAPIの役割を果たすので以下のような方法でコントローラーを作成します。
controllerディレクトリ内にapi/v1ディレクトリを作成します。

v１ディレクトリ内にtodoes_contoroller.rbを作成します。

todoes_contoroller.rbに記述していきます。

app/contoroller/api/v1/todoes_contoroller.rb

class Api::V1::TodoesController < ApplicationController

  def index
    todoes = Todo.order(updated_at: :desc)
    #アップデート順に並べたいため
    render json: todoes
    #todoesをjson形式で返したい
  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 #全てのtodoを削除するためのアクションです
    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(:content, :complete)
  end

end

これでtodoes_controllerの作成が完了しました。

1.7 ルーティングの設定

ここは簡単にいきます。

config/routes.rb

Rails.application.routes.draw do

  root to: redirect('/todoes')

  get 'todoes', to: 'top#index'
  get 'todoes/new', to: 'top#index'
  get 'todoes/:id/edit', to: 'top#index'
  #全て'top#index'にルーティングしていく。

  namespace :api do
    namespace :v1 do
      delete '/todoes/destroy_all', to: 'todoes#destroy_all'
      #resources :todoesでは賄えないアクションなので別途記述する。
      resources :todoes, only: %i[index show create update destroy]
    end
  end

end

1.8 application_controllerの設定

app/controller/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :null_session
  #railsのapiモード使うときのおまじないみたいな記述です。
end

1.9 application.html.erbに追記

さてこの項目ではサーバーサイドの設定がうまくいているかを確認します。
まずは
app/javascripts/packs/hello_react.jsxを
app/javascripts/packs/index.jsxに変更します。

そして以下のファイルの<head></head>内に追記します。

上から順に読み込まれるので最後に記述してください。