【Laravel入門】コントローラーからコンポーネントを呼び出す/blade.php内のcomponentに引数を渡す

Laravel,PHP

ミニマリスト_カミ

kamiです。
TwitterとYoutubeもやってます。

今回はControllerからView Componentを使う方法についての紹介です。

componentに引数を渡すにあたって例のプロジェクトで説明しますので、ハンズオン形式でやってみてください。

Tree

今回は以下のディレクトリ構成になっています。

project_root/
├── app/
│   ├── Http/
│   │   └── Controllers/
│   │       └── HogeController.php
│   └── View/
│       └── Components/
│           └── FooComponent.php          # FooComponent
├── resources/
│   └── views/
│       ├── components/
│       │   └── foo-component.blade.php   # foo-component
│       └── hoge_view.blade.php
└── routes/
    └── web.php

Controller

artisanコマンドでControllerを作成します。

php artisan make:controller HogeController

Controllerのshowメソッドを呼び出しています。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HogeController extends Controller
{
    public function show($args)
    {
        return view('hoge_view')->with([
            'args' => $args,
        ]);
    }
}

return viewについて

  • hoge_view という名前のビューを返します。
  • resources/views/hoge_view.blade.php というファイルに対応します。
return view('hoge_view')->with([
    'args' => $args,
]);

->with(['args’ => $args])について

  • with メソッドを使って、ビューにデータを渡します。
  • キーが 'args'、バリューが $args である連想配列を渡します
  • この連想配列のキーがビューで使う変数名、バリューがその変数に対応する値です。
  • ここでは、キーが 'args'、値が $args となっています。
  • ビュー内で {{ $args }} と書くと、この $args の値が表示されます。

スポンサードサーチ

ルーティング

/show/{args}にアクセスで、HogeControllerのshowメソッドが呼ばれます。

use App\Http\Controllers\HogeController;

Route::get('/show/{args}', [HogeController::class, 'show']);

Component

artisanコマンドでcomponentを作成します。

php artisan make:component FooComponent

コマンド叩くと、FooComponent.phpとfoo-component.blade.phpが生成されます。

project_root/
├── app/
│   ├── Http/
│   │   └── Controllers/
│   │       └── HogeController.php
│   └── View/
│       └── Components/
│           └── FooComponent.php           # FooComponent
├── resources/
│   └── views/
│       ├── components/
│       │   └── foo-component.blade.php   # foo-component
│       └── hoge_view.blade.php
└── routes/
    └── web.php

FooComponentクラスはHogeControllerクラスでviewに渡している引数を使えるように、変数として定義します。

// app/View/Components/FooComponent.php

namespace App\View\Components;

use Illuminate\View\Component;

class FooComponent extends Component
{
    public string $value;

    /**
     * コンポーネントインスタンスを作成します。
     *
     * @param  mixed  $value
     * @return void
     */
    public function __construct($value)
    {
        $this->value = $value;
    }

    /**
     * コンポーネントを表すビューまたは内容を取得します。
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.foo-component',
          ['value' => $this->value]
        );
    }
}

スポンサードサーチ

blade.php

hoge_view.blade.phpのコードです。

project_root/
├── app/
│   ├── Http/
│   │   └── Controllers/
│   │       └── HogeController.php
│   └── View/
│       └── Components/
│           └── FooComponent.php.          
├── resources/
│   └── views/
│       ├── components/
│       │   └── foo-component.blade.php
│       └── hoge_view.blade.php　　　　　　　# ここ
└── routes/
    └── web.php

メインのビューとして機能します。
コントローラーから渡されたデータを表示し、他のコンポーネントを含むことができます。

@extends('layouts.main')

@section('content')
<div class="body">
　　 {{-- コンポーネントに引数を渡す --}}
    <x-foo-component :value="$args" />
　　 {{-- 引数の値を表示 --}}
    {{ $args }} 
</div>
@endsection

コンポーネントに引数を渡す方法

コンポーネントに引数を渡す場合

コンポーネントに引数を渡す場合は次のように書きます

  • foo-component
  • 引数のkeyにvalue
  • 引数のvalueに$args
<x-foo-component :value="$args" />

スポンサードサーチ

引数の値を表示させる

コンポーネント間で渡している引数を使うには{{ }}でkey名を囲ってあげます。

コンポーネント内に引数を使う場合

{{ $args }}

component

components/foo-component.blade.phpコンポーネントで受け取った引数を条件で表示します。

project_root/
├── app/
│   ├── Http/
│   │   └── Controllers/
│   │       └── HogeController.php
│   └── View/
│       └── Components/
│           └── FooComponent.php.          
├── resources/
│   └── views/
│       ├── components/
│       │   └── foo-component.blade.php   # ここ
│       └── hoge_view.blade.php
└── routes/
    └── web.php

再利用可能なコンポーネントのビューとして機能します。
他のビューから呼び出されて、特定の機能やデザインを提供します。

コンポーネントクラス (FooComponent) から渡された $value を受け取ります。
$value が空でない場合にその値を表示します。

@if(!empty($value))
  <div>
    {{ $value }}
  </div>
@endif

hoge_viewとfoo-componentの違い

  • hoge_view.blade.php ：ページ全体のレイアウトや内容を含むメインビュー。
  • view-component.blade.php ：再利用可能なコンポーネントのビュー。
  • hoge_view.blade.php ：コントローラーからデータを受け取る
  • view-component.blade.php ：コンポーネントクラスからデータを受け取ります。

Laravel,PHP

Posted by kami