【JS & Rails】fetch関数を使ってRailsのAPIを実行する方法を解説！

目次

JavaScriptのfetch関数でRailsのメソッドを呼び出す流れ

JavaScriptで、fetch関数を使用して、Railsのコントローラーアクションに対して非同期通信を行います。

fetch('/rails/controller/action',{
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error))

Railsのコントローラーアクションは、送られてきたデータを受け取り、必要な処理を行います。

class MyController < ApplicationController
  def action
    data = JSON.parse(request.body.read)
    #データの処理
    render json: data
  end
end

このように、JavaScriptのfetch関数を使用して、Railsのコントローラーアクションを呼び出すことができます。

また、実際の開発には、CSRF対策や認証などのセキュリティー対策も必要です。

具体的なCRUD処理のコード例

JavaScriptのfetch関数を使って、RailsのAPIを実行する処理を以下のケースで実装してみます。

  • タスク一覧機能
  • 個別のタスク表示機能
  • タスク登録機能
  • タスク更新機能
  • 個々のタスク削除機能
  • 複数タスクの一括削除処理

タスク一覧機能

タスク一覧機能を実装するには、以下の手順を踏むことができます。

Railsのコントローラーアクションで、データベースからタスクの一覧を取得する処理を実装します。

class TasksController < ApplicationController
  def index
    @tasks = Task.all
    render json: @tasks
  end
end

JavaScriptで、fetch関数を使用して、Railsのコントローラーアクションに対して非同期通信を行い、取得したタスクの一覧を表示します。

fetch('/rails/controller/index')
  .then(response => response.json())
  .then(data => {
    let taskList = document.getElementById("task-list");
    data.forEach(function(task) {
        let taskItem = document.createElement("li");
        taskItem.innerHTML = task.name;
        taskList.appendChild(taskItem);
    });
  })
  .catch(error => console.log(error))

HTMLに、取得したタスクの一覧を表示するための要素を追加します。

<ul id="task-list"></ul>

このように、Railsのコントローラーアクション、JavaScript、HTMLを組み合わせることでタスク一覧機能を実装することができます。

個別のタスク表示機能

個別のタスクを表示する機能を実装するには、以下の手順を踏むことができます。

まず、Railsのコントローラーアクションで、指定されたIDのタスクを取得します。

class TasksController < ApplicationController
  def show
    @task = Task.find(params[:id])
    render json: @task
  end
end

JavaScriptで、fetch関数を使用して、Railsのコントローラーアクションに対して非同期通信を行い、取得したタスクを表示します。

let taskId = document.getElementById("task-id").value;
fetch('/rails/controller/show/' + taskId)
  .then(response => response.json())
  .then(data => {
    let taskName = document.getElementById("task-name");
    taskName.innerHTML = data.name;
  })
  .catch(error => console.log(error))

HTMLに、取得したタスクを表示するための要素を追加します。

<label>タスクID: <input type="text" id="task-id"></label>
<div id="task-name"></div>

このように、Railsのコントローラーアクション、JavaScript、HTMLを組み合わせることで個別のタスクを表示する機能を実装することができます。

タスク登録機能

フォームとボタンを用意してタスク登録を実装するには以下の手順でやります。

HTMLでフォームとボタンを設置します。

<form id="task-form">
  <label>タスク名: <input type="text" id="task-name"></label>
  <button type="submit" id="submit-button">登録</button>
</form>

JavaScriptで、フォームのサブミットイベントを検知し、fetch関数を使用して、Railsのコントローラーアクションに対して非同期通信を行います。

document.getElementById("task-form").addEventListener("submit", function(event){
  event.preventDefault()
  let taskName = document.getElementById("task-name").value;
  fetch('/rails/controller/create', {
    method: 'POST',
    body: JSON.stringify({task: {name: taskName}}),
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error))
});

Railsのコントローラーアクションでは、送られてきたデータを受け取り、データベースに保存します。

class TasksController < ApplicationController
  def create
    data = JSON.parse(request.body.read)
    @task = Task.new(data["task"])
    if @task.save
      render json: @task
    else
      render json: @task.errors, status: :unprocessable_entity
    end
  end
end

このように、フォームとボタンを使用してタスクの登録機能を実装することができます。

タスク更新処理

タスクの更新機能を実装するには、以下の手順を踏むことができます。

HTMLで、タスクのID、名前を入力するフォーム、更新ボタンを設置します。

<form id="update-form">
  <label>タスクID: <input type="text" id="task-id"></label>
  <label>タスク名: <input type="text" id="task-name"></label>
  <button type="submit" id="update-button">更新</button>
</form>

JavaScriptで、フォームのサブミットイベントを検知し、fetch関数を使用して、Railsのコントローラーアクションに対して非同期通信を行います。

document.getElementById("update-form").addEventListener("submit", function(event){
    event.preventDefault()
    let taskId = document.getElementById("task-id").value;
    let taskName = document.getElementById("task-name").value;
    fetch('/rails/controller/update/' + taskId, {
        method: 'PUT',
        body: JSON.stringify({task: {name: taskName}}),
        headers: {
            'Content-Type': 'application/json'
        }
    })
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.log(error))
});

Railsのコントローラーアクションでは、送られてきたデータを受け取り、データベースのタスクを更新します。

class TasksController < ApplicationController
  def update
    data = JSON.parse(request.body.read)
    @task = Task.find(params[:id])
    if @task.update(data["task"])
      render json: @task
    else
      render json: @task.errors, status: :unprocessable_entity
    end
  end
end

これらのコードを組み合わせることでタスクの更新が実装できます。

個々のタスク削除処理

一つ一つのタスクの削除機能を実装するには、以下の手順を踏むことができます。

HTMLで、タスクのIDを入力するフォーム、削除ボタンを設置します。

<form id="delete-form">
  <label>タスクID: <input type="text" id="task-id"></label>
  <button type="submit" id="delete-button">削除</button>
</form>

JavaScriptで、フォームのサブミットイベントを検知し、fetch関数を使用して、Railsのコントローラーアクションに対して非同期通信を行います。

document.getElementById("delete-form").addEventListener("submit", function(event){
    event.preventDefault()
    let taskId = document.getElementById("task-id").value;
    fetch('/rails/controller/delete/' + taskId, {
        method: 'DELETE'
    })
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.log(error))
});

Railsのコントローラーアクションでは、受け取ったタスクIDを使用して、データベースからタスクを削除します。

class TasksController < ApplicationController
  def delete
    @task = Task.find(params[:id])
    @task.destroy
    head :no_content
  end
end

個々のタスクの削除はこのように実装できるはずです。

複数タスクの一括削除処理

複数のタスクを一度に削除する機能を実装するには、以下の手順を踏むことができます。

HTMLで、タスクのIDを入力するフォーム、複数のチェックボックス、削除ボタンを設置します。

<form id="delete-form">
  <label>
    <input type="checkbox" name="task-ids" value="1">タスク1
  </label>
  <label>
    <input type="checkbox" name="task-ids" value="2">タスク2
  </label>
  <button type="submit" id="delete-button">削除</button>
</form>

JavaScriptで、フォームのサブミットイベントを検知し、選択されたタスクのIDを取得し、fetch関数を使用して、Railsのコントローラーアクションに対して非同期通信を行います。

document.getElementById("delete-form").addEventListener("submit", function(event){
    event.preventDefault()
    let taskIds = [];
    let checkboxes = document.getElementsByName("task-ids");
    for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            taskIds.push(checkboxes[i].value);
        }
    }
    fetch('/rails/controller/destroy', {
        method: 'DELETE',
        body: JSON.stringify({task_ids: taskIds}),
        headers: {
            'Content-Type': 'application/json'
        }
    })
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.log(error))
});

Railsのコントローラーアクションでは、受け取ったタスクIDを使用して、データベースから複数のタスクを削除します。

class TasksController < ApplicationController
  def destroy
    data = JSON.parse(request.body.read)
    Task.destroy(data["task_ids"])
    head :no_content
  end
end

以上のようにすることで、選択したタスクの一括削除を実装することができます。

タイトルとURLをコピーしました