LaravelをAPIとして、フロント側をVueをSPAで利用。詳細ページの表示方法

Question

Laravel 8
今まで、オーソドックスなLaravelの使用しかしてきませんでしたが、案件で必要なため、
Laravel（API）×フロント側はVue（SPA）を勉強するためにサンプルプログラムを作りました。

作成したサンプルプログラム：Vue.js + LaravelでシンプルなSPA構築チュートリアル
※リンクは4本目（VueとAPI結合編）の記事です

サンプルプログラムは問題なく動くのですが、なぜこれで動くのか分からない部分がありまして、教えていただけると幸いです。

###サンプルプログラムコードと疑問点
サンプルプログラムは、タスクの、一覧表示、詳細ページ表示、登録、編集、削除　を行う基本的なものです。

以下コードです。

■ルート　routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\TaskController;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

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

//タスク一覧
Route::get('/tasks', [TaskController::class, 'index']);

//タスク登録
Route::post('/tasks', [TaskController::class, 'store']);

//タスク詳細
Route::get('/tasks/{task}', [TaskController::class, 'show']);

//タスク更新
Route::put('/tasks/{task}', [TaskController::class, 'update']);

//タスク削除
Route::delete('/tasks/{task}', [TaskController::class, 'destroy']);

■コントローラー　TaskController.php

<?php

namespace App\Http\Controllers;
use App\Models\Task; //追加した

use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function index() {
        return Task::all();
    }
    
    public function store(Request $request) {
        return Task::create($request->all()); //リクエストで受け取ったjsonデータをそのままモデルのcreateでデータ登録
    }
    
    public function show(Task $task) {
        return $task; //URLパラメータで受け取ったタスクモデルをそのままリターン
    }
}

■vue側 一覧表示用コンポーネント TaskListComponent.vue

<template>
    <div class="container">
        <table class="table table-hover">
            <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Title</th>
                <th scope="col">Content</th>
                <th scope="col">Person In Charge</th>
                <th scope="col">Show</th>
                <th scope="col">Edit</th>
                <th scope="col">Delete</th>
            </tr>
            </thead>
            <tbody>
            
            <tr v-for="task in tasks">
                <th scope="row">{{ task.id }}</th>
                <td>{{ task.title }}</td>
                <td>{{ task.content }}</td>
                <td>{{ task.person_in_charge }}</td>
                <td>
                    <router-link v-bind:to="{name: 'task.show', params: {taskId: task.id }}">
                        <button class="btn btn-primary">Show</button>
                    </router-link>
                </td>
                <td>
                    <router-link v-bind:to="{name: 'task.edit', params: {taskId: task.id }}">
                        <button class="btn btn-success">Edit</button>
                    </router-link>
                </td>
                <td>
                    <button class="btn btn-danger">Delete</button>
                </td>
            </tr>
            
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                tasks: [] //データが入る変数を初期化
            }
        },
        methods: { //タスク一覧取得APIにリクエストしてそのレスポンスをtasks[] の中に入れる
            getTasks() {
                axios.get('/api/tasks')
                   .then((res) => {
                       this.tasks = res.data;
                   });
           }
        },
        mounted() {
            this.getTasks(); //画面描画時にこの getTasks() メソッドが実行されるように、mounted() でメソッドを呼び出す。
        }
    }
</script>

■vue側 詳細ページ用コンポーネント TaskShowComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-6">
                <form>
                    <div class="form-group row border-bottom">
                        <label for="id" class="col-sm-3 col-form-label">ID</label>
                        <input type="text" class="col-sm-9 form-control-plaintext" readonly id="id"
                               v-model="task.id">
                    </div>
                    <div class="form-group row border-bottom">
                        <label for="title" class="col-sm-3 col-form-label">Title</label>
                        <input type="text" class="col-sm-9 form-control-plaintext" readonly id="title"
                               v-model="task.title">
                    </div>
                    <div class="form-group row border-bottom">
                        <label for="content" class="col-sm-3 col-form-label">Content</label>
                        <input type="text" class="col-sm-9 form-control-plaintext" readonly id="content"
                               v-model="task.content">
                    </div>
                    <div class="form-group row border-bottom">
                        <label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label>
                        <input type="text" class="col-sm-9 form-control-plaintext" readonly id="person-in-charge"
                               v-model="task.person_in_charge">
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            taskId: String
        },
        data: function () {
            return {
                task: {}
            }
        },
        methods: {
            getTask() {
                axios.get('/api/tasks/' + this.taskId)
                .then((res) => {
                    this.task = res.data;
                });
            }
        },
        mounted() {
            this.getTask();
        }
    }
</script>

★疑問点：
「タスクの詳細ページ表示（show）」の流れがわかりません。
一覧表示用コンポーネント TaskListComponent.vueで、

<router-link v-bind:to="{name: 'task.show', params: {taskId: task.id }}">
    <button class="btn btn-primary">Show</button>
</router-link>

というように、taskのidをパラメータにして渡しています。

しかし、Controllerでは、

public function show(Task $task) {
    return $task; //URLパラメータで受け取ったタスクモデルをそのままリターン
}

となっています。

今まで、私が書いていた方法だと、idを受け取って、
$task = Task::find($id)して、return $task　のように、
idでfindする処理をいれていましたが、今回はそのようにしていません。

それなのになぜうまく行くのかがわかりません。。

ご教示いただけますと幸いです。

【追記】
回答の一部になるかもしれませんが、、、
詳細ページ用コンポーネント TaskShowComponent.vueのscript内、

methods: {
            getTask() {
                axios.get('/api/tasks/' + this.taskId)
                .then((res) => {
                    this.task = res.data;
                });
            }
        },

のthisとは何なのでしょうか・・・

Answer 1

それなのになぜうまく行くのかがわかりません。。

暗黙の結合が使われています。Laravelが裏で $task = Task::find($id) のようなことをやってくれています。

（追記）

thisとは何なのでしょうか・・・

Vueコンポーネント内では、そのVueコンポーネント自身を指しています。

Comments

[mikeko0901]

ありがとうございます。
暗黙の結合を初めて知りました。

ルーター
Route::get('/tasks/{id}', [TaskController::class, 'show']);

コントローラー
public function show($id) {　・・・・

この場合は、
　　　$task = Task::find($id)
が必要ということなんですね！

[Lulucom]

そのとおりです。