Laravelでカンタンなアプリを作ってMVCモデルを理解する➁

関連記事Laravelでカンタンなアプリを作ってMVCモデルを理解する

2025.03.14

タスクを追加できるようにする

完成イメージ

①で作ったリストにフォームを付けます。

追加が成功すると緑の文字で「success」と表示されるようにします。

することは

ルーティング (POST /tasks) を追加
コントローラー で store() を作成し、データ保存処理を追加
フォーム を作成して、タスクを入力 & 送信できるように
リダイレクト & 成功メッセージ を表示

ルーティングの追加

routes/web.php に以下を追加します。

Route::post('/tasks', [TaskController::class, 'store']);

POST /tasks にリクエストが送られると、store() メソッドが実行されるようになります

次にcontrollerにstore() メソッドを追加します。

コントローラーの store() メソッドを追加

app/Http/Controllers/TaskController.php を開き、store() メソッドを追加。

namespace App\Http\Controllers;

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

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::all(); // すべてのタスクを取得
        return view('tasks.index', compact('tasks'));
    }

    public function store(Request $request)
    {
        // バリデーション
        $request->validate([
            'title' => 'required|string|max:255',
        ]);

        // タスクを作成
        Task::create([
            'title' => $request->title,
            'completed' => false, // 新規タスクは未完了
        ]);

        // タスク一覧ページにリダイレクト
        return redirect('/tasks')->with('success', 'タスクを追加しました！');
    }
}

validate() → 入力値のバリデーション（必須 & 最大255文字）
Task::create([...]) → tasks テーブルに新しいデータを保存
redirect('/tasks') → タスク一覧ページにリダイレクト（メッセージ付き）

フォームを作成

resources/views/tasks/index.blade.php を編集し、以下のフォームを追加。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タスク一覧</title>
</head>
<body>
    <h1>タスク一覧</h1>

    <!-- 成功メッセージ表示 -->
    @if (session('success'))
        <p style="color: green;">{{ session('success') }}</p>
    @endif

    <!-- タスク追加フォーム -->
    <form action="/tasks" method="POST">
        @csrf
        <input type="text" name="title" placeholder="タスクを入力">
        <button type="submit">追加</button>
    </form>

    <ul>
        @foreach ($tasks as $task)
            <li>{{ $task->title }} - {{ $task->completed ? '✅ 完了' : '❌ 未完了' }}</li>
        @endforeach
    </ul>
</body>
</html>