tasksを取得できるapiエンドポイントを作成する | Mac + Docker + Rails + Next.js その0032

rails g controller

rails gします。

$ docker-compose run --rm app rails g controller api/tasks get post put delete

routes.rbの編集

各メソッドに対するアクションを設定します。

Rails.application.routes.draw do
  namespace :api do
    get    'tasks/', to: 'tasks#get'
    post   'tasks/', to: 'tasks#post'
    put    'tasks/', to: 'tasks#put'
    delete 'tasks/', to: 'tasks#delete'
  end

  〜略〜
end

rails/app/controllers/api/tasks_controller.rb の編集

以下の通り編集しました。

module Api
  class TasksController < ApplicationController
    def get
      tasks = Task.all.recent
      render json: {
        tasks:
      }
    end

    def post; end

    def put; end

    def delete; end
  end
end

画面に表示してみる

以下のURLにブラウザでアクセスすると表示できました。

https://localhost/api/tasks

fetchで取得してみる

任意のerbファイルに以下のように記述すれば取得できます。

<script>
fetch('/api/tasks/')
  .then(response => response.json())
  .then(data => {
    data.tasks.forEach((task) => {
      console.log(task);
    });
  });
</script>