10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Laravel】 複数ページで共通データをフロント側に渡す方法

Last updated at Posted at 2022-08-31

今回やりたいこと

  • Laravelで色んなページでよく使うデータをController毎にデータ定義して、フロント側に返すのではなく、共通でサーバ側からフロントへ渡せるようにしたい。

どうやって実現するのか

  • Laravel view composer(ビューコンポーザ)というもので、下記公式ドキュメントの引用文を読むと実現できそうなので使ってみる。

ビューコンポーザは、ビューをレンダーするときに呼び出すコールバックまたはクラスメソッドです。
ビューをレンダーするたびにビューへ結合するデータがある場合、ビューコンポーザを使用すると、そのロジックを1つの場所に集約できます。
ビューコンポーザは、アプリケーション内の複数のルートかコントローラが同じビューを返し、常に特定のデータが必要な場合にきわめて役立ちます。

やってみる

おおまかな実装の流れ

  1. サービスプロバイダファイルの作成
  2. app.phpへSeriviceProviderの登録
  3. ●●Composerクラスを作成
  4. SeriviceProviderへの設定追加
  5. フロント側で共通データの取得を確認

1.サービスプロバイダファイルの作成

  • 下記を実行すると、サービスプロパイダファイルが作成されます。
$ php artisan make:provider ViewComposerServiceProvider

実行後...

app/Providers/ViewComposerServiceProvider.php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use View;

/**
 * Class ViewComposerServiceProvider
 * @package App\Providers
 */
class ViewComposerServiceProvider extends ServiceProvider
{
    /**
     *
     */
    public function boot()
    {
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

2. app.phpへSeriviceProviderの登録

config/app.php
    /*
    |--------------------------------------------------------------------------
    | Autoloaded Service Providers
    |--------------------------------------------------------------------------
    |
    | The service providers listed here will be automatically loaded on the
    | request to your application. Feel free to add your own services to
    | this array to grant expanded functionality to your applications.
    |
    */
    
    'providers' => [
        
        ...()
        
        /*
         * Application Service Providers...
         */

        // View Composer
        App\Providers\ViewComposerServiceProvider::class,
      
    ],

3. ●●Composerクラスを作成

  • フロント側に共通で返したい用のクラスを作成します。
    • 下記例では、ユーザーに関する共通データをフロント側に返したいのでUserComposer.phpを作成します。

app/Http/ViewComposers/UserComposer.php
<?php

namespace App\Http\ViewComposers;

use Auth;
use Illuminate\View\View;

/**
 * Class UserComposer
 * @package App\Http\ViewComposers
 */
class UserComposer
{    
   
    /**
     * Bind data to the view.
     * @param View $view
     * @return void
     */
    public function compose(View $view)
    {
        $view->with([
            'current_user'   => Auth::user(),
            'user_id'        => Auth::id(),
            'user_name'      => Auth::user()->user_name,
            'user_image_url' => Auth::user()->user_image_url,  
            // ... ここに続けて共通で返したいデータを定義
        ]);
    }
}

4. SeriviceProviderへの設定追加

  • View::composersメソッドを使って、下記部分に●●Composerが値を渡すviewのパスを指定して、値を返します。
app/Providers/ViewComposerServiceProvider.php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use View;

/**
 * Class ViewComposerServiceProvider
 * @package App\Providers
 */
class ViewComposerServiceProvider extends ServiceProvider
{
    /**
     *
     */
    public function boot()
    {
+        // ここに追加
+        View::composers([
+            \App\Http\ViewComposers\UserComposer::class => '*', // 全てのviewに共通データを返す
+            \App\Http\ViewComposers\UserComposer::class => 'user.index', // resources\views\user\index.blade.phpに返したい場合の例
+            \App\Http\ViewComposers\UserComposer::class => 'user.*', // resources\views\user\配下の全てのviewに返したい場合の例
+        ]);
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

5. フロントで共通データを表示

  • フロント側で無事変数が取得できていたら完了!
app/resources/views/user/index.blade.php
<?php
    <div>
        <h6>{{ $user_name }}</h6>
        <img src="{{ $user_image_url }}">
    </div>

まとめ

  • 共通で使用したいデータはビューコンポーザーを使用して、綺麗に共通化しておくととっても便利でした!

参考記事

10
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?