To Do 中身を表示する

このページでは、データベースで管理する To Do アイテムを表示できるようにしてみます。

モデルを定義

TodoItem モデルに、モデルとして変更可能な値を定義します。TodoItem.php に、 protected $fillable = ['user_id', 'title', 'is_done']; を以下のように追記します。

todo_items テーブルと、このモデルは連動しています。命名法則で条件が一致すると、自動的にモデルとテーブの関連性がある状態になります。 ここで、todo_items テーブルのうち user_id, title, is_done が変更可能な値であるということをモデルに設定します。

~~/app/Models/TodoItem.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class TodoItem extends Model
{
    use HasFactory;

    protected $fillable = ['user_id', 'title', 'is_done'];
}

コントローラを定義

TodoItemController.php を以下のように変更します。 index() と store() を変更します。 index() は一覧を表示するように内容を返却します。ここで、SQL が書かれていないことに注目してください。 Laravel では、データベースと対話しやすくするために、 ORM というオブジェクトとリレーショナル・データベースのスキーマをマッピングする機能 Eloquent があります。 詳細は省きますが、モデルに対して、where や orderBy などの関数を呼ぶ形で、実際にデータベースとやり取りできます。 Laravel の公式ドキュメント Eloquent (opens new window) も参照ください。

~~/app/Http/Controllers/TodoItemController.php

<?php
namespace App\Http\Controllers;
use App\Models\TodoItem;
use Illuminate\Http\Request;

use Illuminate\Support\Facades\Auth;

class TodoItemController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $todoItems = TodoItem::where('user_id', Auth::user()->id)->orderBy('created_at', 'desc')->get();
        return $todoItems;
    }
    ~~~
    public function store(Request $request)
    {
        $request->validate([
            'item-contents' => 'required|max:100',
        ]);
        TodoItem::create([
            'user_id' => Auth::user()->id,
            'title' => $request->input('item-contents'),
            'is_done' => false,
        ]);
        return array('success' => true);
    }
    ~~~

クライアントの処理を変更

クライアント側の処理で、ボタンを押すと axios ライブラリを用いて、/api/todos の API 宛に POST リクエストが送信されるような挙動を作成します。

~~/resources/js/components/todo/List.js

import React from "react";
import axios from "axios";
import { useEffect, useState } from "react";

function List() {
    const [items, setItems] = useState([]);
    useEffect(() => {
        ;(async () => {
            try {
                const { headers, data } = await axios.get("/api/todos/");
                setItems(data);
                console.log("request headers", headers);
            } catch (err) {
                console.error("request error", err.request.headers);
            }
        })();
    }, []);

    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Test</div>
                        <div className="card-body">{JSON.stringify(items)}</div>
                    </div>
                </div>
            </div>
            <button onClick={() => createPost()}>Send</button>
        </div>
    );
}

async function createPost() {
    try {
        const { data } = await axios.post("/api/todos", {
            "item-contents": "Hello Sample To Do Item",
        });
        console.log("posted.");
    } catch (err) {
        console.error(err.response);
    }
}

export default List;

画面に Sent ボタンが表示されます。クリックすると、TodoItem がデータベースに追加され。 現時点では、変更を確認するためにリロードが必要です。リロードするとデータベースに追加されたデータが JSON 形式で表示されるはずです。

データベースの中身の表示と、To Do アイテムを保存する、API 側の処理が作成できました。