ラボ > Laravel、Lumen：views関連

Laravel8 ビューの雛形の中に雛形（？）をいれたい（Blade Components）

作成日:2023-01-05, 更新日:2023-07-03

私の環境

WIN+Docker+Ubuntuでlaravelを使うための作業メモ

やりたいこと

下記の流れより新たに追加作業

現状

まず、ざっくりと下記のような感じのソースがすでにある

▼コントローラが呼び出すビュー

<x-common-layout ～ 省略 ～">
<h1>ｘｘｘｘ</h1>
 ～ 省略 ～
</x-common-layout>

▼ビューが呼び出す雛形（resources/views/components/common-layout.blade.php）

<html>
 ～ 省略 ～
<body>
 {{ $slot }}
</body>
</html>

希望

任意のページにナビゲーションメニューを追加したい

▼コントローラが呼び出すビュー

<x-common-layout ～ 省略 ～">
<x-ヘッダーナビ ～ 省略 ～"></x-ヘッダーナビ>　← ナビゲーションメニューを追加したい
<h1>ｘｘｘｘ</h1>
 ～ 省略 ～
</x-common-layout>

作業

希望は『ビューから「admin/header-navi」を追加』。流れは下記（※以前と同じ感じ）

  1. artisanコマンドでファイル作成
  2. 「app/View/Components」の編集
  3. 「resources/views/components」の編集
  4. ビューの編集
  5. 確認

artisanコマンドでファイル作成

▼「admin/header-navi」が欲しいので「Admin/HeaderNavi」とする(※「Admin」と「admin」…大文字・小文字のどっちから始めるのが良いんだろう？)

$ ./vendor/bin/sail php artisan make:component Admin/HeaderNavi

→「app/View/Components/Admin/HeaderNavi.php」「resources/views/components/admin/header-navi.blade.php」が作られる

「app/View/Components」の編集

ビューからHeaderNaviに渡したい引数の設定

▼「app/View/Components/Admin/HeaderNavi.php」

～ 省略 ～
class HeaderNavi extends Component
{
    public $headerNavi; // ビューから雛形に渡す変数の設定

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($headerNavi)
    {
        $this->headerNavi = $headerNavi;
    }
～ 省略 ～

※「headerNavi」を「header_navi」とかにすると後が面倒なんで「_」は使わないようにする

「resources/views/components」の編集

とりあえず渡ってきた変数を出力しておく

▼「resources/views/components/admin/header-navi.blade.php」

<?php var_dump($headerNavi); ?>

ビューの編集

▼既存のビューに追加（「x-admin.header-navi」のトコが追加分）

<x-common-layout ～ 省略 ～">
<x-admin.header-navi :headerNavi="$headerNavi"></x-admin.header-navi>
<h1>ｘｘｘｘ</h1>
 ～ 省略 ～
</x-common-layout>

※「admin/header-navi」なんで「x-admin.header-navi」となる

確認

ブラウザで表示されればOK

エラー対応

困ったときは「キャッシュのクリア」と「composerファイルの更新」を行う

▼キャッシュのクリア

./vendor/bin/sail artisan view:clear

▼composerファイルの更新

composer dump-autoload

「admin」と「Admin」

  1. artisanコマンドで小文字で始まる「admin」を作成後、削除
  2. 次に大文字で始まる「Admin」で作成
  3. ブラウザで確認したらエラー

「admin」でcomposerファイルが作成されたので「Admin」で作り直す必要があるとのこと

「_」を使った「header_navi」

▼ブラウザで確認したら出てきたエラー

Unresolvable dependency resolving [Parameter #0 [  ～～～～ ]] in class App\View\Components\xxxx(View: xxx.blade.php)

原因は「_」。対象箇所から「_」を削除して対応

関連項目