React + Rails + AWS Fargate の構成を実現したい - 03 フロントエンドとバックエンドの連携

# 目次

- [概要](#概要)
- [本記事のゴール](#本記事のゴール)
- [成果](#成果)
  - [バックエンドの動作確認](#バックエンドの動作確認)
  - [フロントエンドとバックエンドのつなぎこみ](#フロントエンドとバックエンドのつなぎこみ)
- [作業メモ](#作業メモ)
  - [フロントエンド](#フロントエンド)
    - [1. バックエンドのAPIからのレスポンスの扱い](#1-バックエンドのapiからのレスポンスの扱い)
    - [2. Warning: Each child in a list should have a unique "key" prop.への対処方法](#2-warning-each-child-in-a-list-should-have-a-unique-key-propへの対処方法)
  - [バックエンド](#バックエンド)
    - [1. Railsのmigrationファイル場所](#1-railsのmigrationファイル場所)
    - [2. バリデーションの設定ファイル場所](#2-バリデーションの設定ファイル場所)
    - [3. controller の設定](#3-controller-の設定)


# 概要

https://qiita.com/memomaruRey/items/746f9cff0ceefe8b6157

# 本記事のゴール
以下を参考にフロントエンドとバックエンドの連携を行う。

https://zenn.dev/hibriiiiidge/books/49ee4063b10cec1df1a2/viewer/4dc4c999de77019f28b3

# 成果

## バックエンドの動作確認

以下を実行
```
docker-compose up
```

以下にアクセス
```
http://localhost:5000/api/v1/tasks
```

以下のレスポンスが返ってくることを確認
```json
{"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を呼び出して値を表示することができた。

![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882682/ab043779-5b82-82bb-acb2-b8be9163af27.gif)

# 作業メモ
## フロントエンド

以下を参考に進めているが、Nuxt.jsではなくNext.jsで実現するために、色々ググりながら実装を進めた。

https://zenn.dev/hibriiiiidge/books/49ee4063b10cec1df1a2/viewer/4dc4c999de77019f28b3

最終的にフロントエンドからバックエンドのAPIを呼んで値を表示する実装は以下のような感じ。

```javascript
  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からのレスポンスの扱い

自分が過去にまとめた以下記事を参考に対応した。

https://qiita.com/memomaruRey/items/1001cc75cbb96d7e7048

### 2. Warning: Each child in a list should have a unique "key" prop.への対処方法

自分が過去にまとめた以下記事を参考に対応した。

https://qiita.com/memomaruRey/items/3d554cbe29e194baada3

## バックエンド

バックエンドは、以下記事をそのまま参考に実装。

https://zenn.dev/hibriiiiidge/books/49ee4063b10cec1df1a2/viewer/4dc4c999de77019f28b3

そもそも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
```