Todo に関連するファイルを作成する

To Do に関連するモデルや、マイグレーションファイル、UI 等を作成していきます。

本セクションの流れ

1. To Do Item を管理するファイルを作成する
2. 生成されたマイグレーションファイルを修正・実行する
3. To Do の情報を返すコントローラを作成する
4. To Do を表示するためのコンポーネントを追加する

1. To Do Item を管理するファイルを作成する

PHP コンテナで以下のコマンドを実行し、To Do 用のモデルとコントローラとマイグレーションファイルを作成します。

$$ php artisan make:model TodoItem --api -m

Laravel では php artisan make:model <モデル名> を入力することでモデルの作成が可能ですが、オプションを加えることで関連するファイルを同時に作成することができます。

【オプション】

• --api :API の CRUD 用の Controller 作成
• -m :マイグレーションファイルの作成

参考: 知らなかった！モデル作成時の便利なオプション大公開！(laravel) (opens new window)

• コマンド実行後の表示

コマンド実行後、新規で 3 つのファイルが作成されます。

• ~~/app/Http/Controllers/TodoItemController.php :To Do 用コントローラ
• ~~/app/Models/TodoItem.php :To Do 用モデル
• ~~/database/migrations/2022_xx_xx_xxxxxx_create_todo_items_table.php :To Do 用マイグレーションファイル

2. 生成されたマイグレーションファイルを修正・実行する

まずは、To Do 用に作成したマイグレーションファイルに構造を定義していきます。

Q. マイグレーションファイルとは

マイグレーションファイルとは、データベースを生成する際の設計図のようなもので、テーブルの定義（カラムの名前・データ型・制約など）を記述することができます。作成したマイグレーションファイルを実行することにより、その内容に基づいたデータテーブルが生成されます。マイグレーションファイルを利用することで、SQL を記述せずにデータベースの管理ができます。また、チームがアプリケーションのデータベーススキーマを定義および共有することが可能になります。その他にも、Laravel のマイグレーション機能にはシーダーやテスト用ダミーデータの自動生成など便利な機能がたくさんあります。（参考: Laravel 9.x マイグレーション (opens new window)）

~~/database/migrations/20XX_XX_XX_XXXXXX_create_todo_items_table.php に以下の 4 行を追記します。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
use App\Models\User;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('todo_items', function (Blueprint $table) {
            $table->id();
            $table->foreignIdFor(User::class)->constrained()->cascadeOnUpdate()->cascadeOnDelete();
            $table->text('title');
            $table->boolean('is_done')->comment('TRUE:1, FALSE:0');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('todo_items');
    }
};

マイグレーションファイルには up と down という 2 つのメソッドがあらかじめ用意されています。

up はマイグレーションを実行する時の処理、down はマイグレーションをロールバックする時に実行される処理です。

up メソッドの中にある Schema::create は第一引数に指定した名称のテーブルを作成するためのプロシージャ(複数の処理を一つにまとめたもの)で、実際に作るテーブルのカラム定義などは第二引数の function の中に記述します。

マイグレーションを実行します。

$$ php artisan migrate

Base table or view already exists: 1050 Table 'sessions' already exists のエラーが表示される場合は php artisan migrate:fresh を実行してから再度マイグレーションを実行します。

正常にマイグレーションが実行されると、マイグレーションファイルで定義した Todo テーブルの情報がデータベースに反映されます。

• 正常にマイグレーション実行された様子

• phpMyAdmin で To Do テーブルが反映されていることを確認

3. To Do の情報を返すコントローラを作成する

データベースに登録された To Do の情報をフロント側に API として渡すために、To Do 用のコントローラを作成していきます。

~~/routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TodoItemController;

~~

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::resource('todos', TodoItemController::class, ['only' => [
    'index',
    'store',
    'show',
    'edit',
    'update',
    'destroy',
]]);

コントローラの中身を記述していきます。

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

<?php

namespace App\Http\Controllers;

use App\Models\TodoItem;
use Illuminate\Http\Request;

class TodoItemController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return ['sample1' => '1', 'sample2' => '2'];
    }

~~

PHP コンテナでサーバを起動してから、 http://localhost:8000/api/todos (opens new window) にアクセスすると、Controller で返却 (return) した値が JSON 形式で返却されていることがわかります。

4. Todo を表示するためのコンポーネントを追加する

~~/resources/js/components/ に todo という名前のディレクトリを作成し、さらにその中に List.jsx というファイルを作成し、以下を記述してください。

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

import React from 'react'
import ReactDOM from 'react-dom'

function List() {
  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">I'm an example components!</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default List

TodoRoot.jsx というファイルを作成し、以下を記述してください。

~~/resources/js/components/TodoRoot.jsx

import React from 'react'
import ReactDOM from 'react-dom'

import List from './todo/List'

function TodoRoot() {
  return (
    <div>
      <List></List>
    </div>
  )
}

export default TodoRoot

if (document.getElementById('todo-main')) {
  ReactDOM.render(<TodoRoot />, document.getElementById('todo-main'))
}

app.js ファイルに、以下のように 1 行追記してください。

~~/resources/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

import './bootstrap'

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

import './components/Example'

import './components/TodoRoot'

home.blade.php ファイルの内容を以下の内容に置き換えてください。

~~/resources/views/home.blade.php

@extends('layouts.app')

@section('content')
<div id="todo-main"></div>
@endsection

ここまでのファイルの状態（イメージ）

http://localhost:8000/home (opens new window) にアクセスし、追加した React のコンポーネントの要素が表示されていることを確認します。

以上で本セクションは終了です。

※ ここまで確認できたら、適宜 Git に Commit ＆ Push しておきましょう。

コマンド例