Laravel

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

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

タスクの「完了 / 未完了」を切り替えられるようにする

  • ルーティングを追加 (PATCH /tasks/{id}/toggle)
  • コントローラーに toggleComplete() を追加
  • タスク一覧のビューに「完了 / 未完了 切り替えボタン」を追加

ルーティングを追加

routes/web.php に以下のルートを追加します。

Route::patch('/tasks/{id}/toggle', [TaskController::class, 'toggleComplete']);

これで /tasks/{id}/toggle に PATCH リクエストを送ると、toggleComplete() が実行できるようになりました。

toggleComplete() メソッドを追加

app/Http/Controllers/TaskController.php を開き、以下のメソッドを追加します。

public function toggleComplete($id)
{
    $task = Task::findOrFail($id); // 指定したIDのタスクを取得

    // 完了状態を反転
    $task->completed = !$task->completed;
    $task->save();

    return redirect('/tasks')->with('success', 'タスクの状態を変更しました！');
}
  • $task->completed = !$task->completed; で完了状態を反転させる！
  • リダイレクトして一覧ページを更新！

ビューに「完了 / 未完了」切り替えボタンを追加

resources/views/tasks/index.blade.php を開き、タスクごとに切り替えボタンを追加。

<ul>
    @foreach ($tasks as $task)
        <li>
            {{ $task->title }} - 
            @if ($task->completed)
                ✅ 完了
            @else
                ❌ 未完了
            @endif

            <!-- 🔄 完了 / 未完了 切り替えボタン -->
            <form action="{{ url('/tasks/' . $task->id . '/toggle') }}" method="POST" style="display:inline;">
                @csrf
                @method('PATCH')
                <button type="submit">
                    {{ $task->completed ? '未完了に戻す' : '完了にする' }}
                </button>
            </form>

            <!-- 🗑 削除ボタン -->
            <form action="{{ url('/tasks/' . $task->id) }}" method="POST" style="display:inline;">
                @csrf
                @method('DELETE')
                <button type="submit" onclick="return confirm('このタスクを削除しますか？')">🗑 削除</button>
            </form>
        </li>
    @endforeach
</ul>

このページでやったこと

  • ルーティング (/tasks/{id}/toggle) を追加
  • コントローラー (toggleComplete() メソッド) を作成し、completed を切り替え
  • Bladeテンプレート に「完了/未完了」切り替えボタンを追加