目次
概要
本記事のゴール
以下を参考にフロントエンドとバックエンドの連携を行う。
成果
バックエンドの動作確認
以下を実行
docker-compose up
以下にアクセス
http://localhost:5000/api/v1/tasks
以下のレスポンスが返ってくることを確認
{"tasks":"[{\"id\":1,\"title\":\"1st task\",\"created_at\":\"2022-08-21T10:43:47.643Z\",\"updated_at\":\"2022-08-21T10:43:47.643Z\"},{\"id\":2,\"title\":\"2nd task\",\"created_at\":\"2022-08-21T10:43:47.652Z\",\"updated_at\":\"2022-08-21T10:43:47.652Z\"},{\"id\":3,\"title\":\"3rd task\",\"created_at\":\"2022-08-21T10:43:47.661Z\",\"updated_at\":\"2022-08-21T10:43:47.661Z\"}]"}
フロントエンドとバックエンドのつなぎこみ
以下のように、フロントエンドからバックエンドのAPIを呼び出して値を表示することができた。
作業メモ
フロントエンド
以下を参考に進めているが、Nuxt.jsではなくNext.jsで実現するために、色々ググりながら実装を進めた。
最終的にフロントエンドからバックエンドのAPIを呼んで値を表示する実装は以下のような感じ。
const [task, setTask] = useState('')
async function getTasks() {
const response: Response = await fetch('http://localhost:5000/api/v1/tasks')
const data = await response.json()
const jsonData = JSON.parse(data.tasks)
const listTask = jsonData.map((task: Task, index: number) => (
<li key={index}>{task.title}</li>
))
setTask(listTask)
}
return (
<ul>{task}</ul>
)
}
以下、つまづいた点と対処法を記載する。
1. バックエンドのAPIからのレスポンスの扱い
自分が過去にまとめた以下記事を参考に対応した。
2. Warning: Each child in a list should have a unique "key" prop.への対処方法
自分が過去にまとめた以下記事を参考に対応した。
バックエンド
バックエンドは、以下記事をそのまま参考に実装。
そもそもRailsをそこまで把握できていないため、ファイルの場所などを以下にメモ。
1. Railsのmigrationファイル場所
/backend/db/migrate/xxxxxxxxxxx_create_tasks.rb
class CreateTasks < ActiveRecord::Migration[6.0]
def change
create_table :tasks do |t|
t.string :title, null: false
t.timestamps
end
end
end
2. バリデーションの設定ファイル場所
/backend/app/models/task.rb
class Task < ApplicationRecord
validates :title, presence: true
end
3. controller の設定
フォルダ・ファイルを新規作成して、以下を記述
/backend/app/controllers/api/v1/tasks_controller.rb
module Api
module V1
class TasksController < ApplicationController
def index
if Task.count.zero?
['1st task', '2nd task', '3rd task'].each do |title|
Task.create!(title: title)
end
end
render json: { tasks: Task.all.to_json }
end
end
end
end