LaravelでVueを使う時のリレーション – ControllerとResourceを作成してJSON形式で取得

前回はテーブルに対応したModelを作成してリレーションの設定しました。

今回はControllerとResourceを作成してJSON形式で取得できるようにします。

Resource
1. Resourceの作成
2. Resourceの設定
Controller

Resource

Resourceの作成

まずにusstocksテーブルに対応したResourceファイルを作成します。
Vueでデータを受け取るにはJSON形式になっていないと受け取ることができません。
ResourceファイルではそのデータをJSON形式に変換する設定を行います。
usstocksテーブルに対応したResource名をUsstockResourceとします。
marketsテーブルに対応したResourceは必要ないので作成しません。

php artisan make:resourceがコマンド名でUsstockResourceがファイル名となります

php artisan make:resource UsstockResource

Resourceの設定

<?php
namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class UsstockResource extends JsonResource
{
	public function toArray($request)
	{
		return [
			"ticker" => $this->ticker,
			"name" => $this->name,
			"market" => $this->market,
		];
	}
}

Controller

Controllerの作成

次はusstocksテーブルに対応したControllerファイルを作成します。
usstocksテーブルに対応したController名をUsstockControllerとします。
marketsテーブルに対応したControllerは必要ないので作成しません。

php artisan make:controller UsstockController

リレーション前のControllerの設定

リレーションを理解するには順序立てて見るとわかりやすいので、まずはリレーションする前の一覧表示を設定します。
11行目ではusstocksテーブルの全データを取得するためallメソッドを使用して、引数$usstocksに代入しています。
12行目では引数$usstocksをUsstockResourceのcollectionメソッドに渡してJSON形式で出力します。

<?php
namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Http\Resources\UsstockResource; 
use Illuminate\Http\Request;
use App\Models\Usstock;

class UsstockController extends Controller {
  public function index() {
    $usstocks = Usstock::all();
    return UsstockResource::collection($usstocks);
  }
}

リレーションせずに一覧表示したJSON形式ではmarket_idのみが表示されています。

"data": [
  {
    "ticker": "AAPL",
    "name": "アップル",
    "market_id": 2,
  },
]

リレーション後のControllerの設定

次はリレーション後の一覧表示を設定します。
11行目をusstocksテーブルにmarketsテーブルのデータをリレーションするためwithメソッドに前回Usstockモデルで作成したmarket関数を渡してgetで取得して引数$usstocksに代入しています。

<?php
namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Http\Resources\UsstockResource;
use Illuminate\Http\Request;
use App\Models\Usstock;

class UsstockController extends Controller {
  public function index() {
    $usstocks = Usstock::with('market')->get();
    return UsstockResource::collection($usstocks);
  }
}

リレーション後の一覧表示したJSON形式では、marketオブジェクト内にmarket_idとmarketが表示されています。

"data": [
  {
    "ticker": "AAPL",
    "name": "アップル",
    "market": {
      "market_id": 2,
      "market": "NASDAQ"
    },
  },
]

次回はいよいよVueにデータを渡して表示できるようにします。