手段のために目的を。。

職場で（家庭でも？）やらなきゃいけないこと（タスク）を付箋に書いて、見やすいところに貼り付けて管理している人って結構多いと思います。
そして、勝手に他人の机に自分の付箋を貼り付けて、仕事を押し付けたり、有料で取引したり。。。

そんなやりとりをWebアプリでできたら、メンバーの持っているタスクなどが共有できて面白いかも？
ということで、Reactの勉強がてら実際に作ってみた過程を共有させていただきたいと思います。

・・・というか、「RailsでReactを使って何かやってみたい」という手段を目的としているので、実用性は度外視。。。

関連する記事

書いているうちに分量がすごくなって記事を分割したので、リンク先をまとめておきます。
その１(環境構築〜モデル作成編)
その２(API作成編)
その３(UI作成編1)
その４(UI作成編2)
その５(react-contenteditable導入編)
おまけ(モデルのテスト編)

使用環境

データベース周りの作り込みで楽したいので、Railsを利用しました。
この記事で使った環境は、以下の通りです。

component	version
Rails	6.0.2
react-rails	2.6.1
Ruby	2.6.5

環境構築にあたっては、こちらを参考にしました。
GitHub:react-railsのページ

ついでに知ったこと

JSONでのデータ出力でハマる
 number型の属性を渡せなくて困る

ラフなモデル設計

適当ですが、こんな設計になりますかね。
ユーザがいなくなったらタスクもいなくなる形なので不自然かもしれませんが。。。

環境構築

申し訳ありませんが、インターネット接続が可能で、railsが利用できる環境であることを前提に記述させていただきます。

shell

# アプリケーションを作成(今回はstickiesAppという名前にしてみました。)
rails new stickiesApp

# 作成されたアプリケーションディレクトリに移動
cd stickiesApp

# react-railsのReadMeに従いGemfileを編集(今回はRails6だったので、gem 'react-rails'の追加のみ)

# bundle installします。
bundle install

# webpackerの準備(asset pipelineでのやり方をお探しの方、すみません。。)
bundle exec rails webpacker:install
bundle exec rails webpacker:install:react
bundle exec rails generate react:install

ラフなUI設計

ユーザ毎に箱があって、その中に付箋があるってイメージですね。
そうそう、ちょうどこんな風に。。って、アクティビティ図かい！！（すいません、近くにastah*があったもので。。）

モデルを準備する。

先ほどのかなりラフなモデル設計から、ユーザモデルとタスクモデルを作ってみます。

ユーザモデル

どちらを先に作るか悩みましたが、ユーザから作ってみました。
ぶっちゃけ、どっちでも良いのだと思いますが。

shell

# 「ユーザ名」に対応する文字列型の要素を一つ持つ"User"モデルを作成します。
bundle exec rails g model User name:string

タスクモデル

続いてタスクモデルですね。
こちらは、どのユーザが所有しているかを示すための、user_id列が必要になるので、それも加味した形で作ります。

shell

# 「タイトル」「説明」「期限」に対応する列と、ユーザモデルと関連付けるための列を作成します。
bundle exec rails g model Task title:string description:text due_date:datetime user:belongs_to

モデルの関連付けを追加

「ユーザは複数のタスクを持つ」というモデル設計に合わせて、user.rbを以下のように修正します。

app/models/user.rb

class User < ApplicationRecord
  has_many :tasks  # taskをたくさん持ってますよと教えてあげます。
end

ちなみに、タスクモデルのほうは、自動的に以下のような内容になります。（便利♪）

app/models/task.rb

class Task < ApplicationRecord
  belongs_to :user
end

マイグレーションを実行

さて、準備も整ったのでマイグレーションを実行してしまいます。

shell

# マイグレーションの実行です。（すぐに忘れるコマンドの一つ。。）
bundle exec rails db:migrate

初期データの登録

ユーザやタスクの登録処理まで書いてると長くなりすぎるので、テスト的に使えそうな初期データを予め登録してしまおう！ということで、初期データ用のseedを準備します。

db/seed.rb

# ユーザの作成
user0 = User.create(name: 'Not Assigned');
user1 = User.create(name: 'User001');
user2 = User.create(name: 'User002');

# タスクの作成
Task.create(title: 'task001', description: '0001', due_date: Date.new(2020, 4, 30), user: user0);
Task.create(title: 'task002', description: '0002', due_date: Date.new(2020, 4, 30), user: user1);
Task.create(title: 'task003', description: '0003', due_date: Date.new(2020, 4, 30), user: user2);
Task.create(title: 'task004', description: '0004', due_date: Date.new(2020, 4, 30), user: user1);

準備できたらDBに投入してみます。

shell

# 初期データの投入(間違ってdb:seedsと書いて失敗するのは私だけ？)
bundle exec rails db:seed

。。。結果がいまいち分からない（何も言わずにコマンドが終わる）ので、DBを直接確認しておきました。

shell

# sqlite3でDBを開く
sqlite3 db/development.sqlite3

sqlite> select * from users;
1|Not Assigned|2020-05-13 00:21:00.654477|2020-05-13 00:21:00.654477
2|User001|2020-05-13 00:21:00.662086|2020-05-13 00:21:00.662086
3|User002|2020-05-13 00:21:00.668647|2020-05-13 00:21:00.668647

sqlite> select * from tasks;
1|task001|0001|2020-04-30 00:00:00|1|2020-05-13 00:21:00.766118|2020-05-13 00:21:00.766118
2|task002|0002|2020-04-30 00:00:00|2|2020-05-13 00:21:00.772826|2020-05-13 00:21:00.772826
sqlite> .quit

# おお、入ってた！

モデルができたら。。テストですね！

テストについては多いのでこちらにまとめました。
ので、ご参考にしていただければ。
とにかく、言いたいことは、テスト作らずに進めると痛い目に遭うということ。
Rubyにしろ、Railsにしろバージョンアップしたいとき、テストが作られてないと影響確認すらできませんからね。