コンテンツにスキップ
Laravel

ビュー

はじめに

もちろん、ルートやコントローラーからHTMLドキュメントの文字列全体を直接返すのは現実的ではありません。ありがたいことに、ビューを使用すると、すべてのHTMLを別々のファイルに配置する便利な方法が提供されます。

ビューは、コントローラ/アプリケーションロジックをプレゼンテーションロジックから分離し、resources/viewsディレクトリに保存されます。Laravelを使用する場合、通常、ビュテンプレートはBladeテンプレート言語を使用して記述されます。シンプルなビューは次のようになります

<!-- View stored in resources/views/greeting.blade.php -->
 
<html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

このビューがresources/views/greeting.blade.phpに保存されているため、グローバルなviewヘルパーを使用して返すことができます

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});
lightbulb

Bladeテンプレートの作成方法に関する詳細をお探しですか？開始するには、完全なBladeドキュメントを確認してください。

React/Vueでのビューの作成

多くの開発者は、Bladeを介してPHPでフロントエンドテンプレートを作成するのではなく、ReactまたはVueを使用してテンプレートを作成することを好むようになりました。Laravelは、SPAを構築する際の典型的な複雑さなしに、React/VueフロントエンドをLaravelバックエンドに簡単に結び付けるライブラリであるInertiaのおかげで、これを簡単に実現できます。

BreezeとJetstreamのスターターキットは、Inertiaを搭載した次のLaravelアプリケーションを開始するための優れた出発点となります。さらに、Laravel Bootcampでは、VueとReactの例を含む、Inertiaを搭載したLaravelアプリケーションの構築に関する完全なデモンストレーションを提供しています。

ビューの作成とレンダリング

アプリケーションのresources/viewsディレクトリに.blade.php拡張子を持つファイルを配置するか、make:viewArtisanコマンドを使用することで、ビューを作成できます

php artisan make:view greeting

.blade.php拡張子は、ファイルにBladeテンプレートが含まれていることをフレームワークに通知します。Bladeテンプレートには、HTMLだけでなく、値を簡単にエコーしたり、"if"ステートメントを作成したり、データを反復処理したりできるBladeディレクティブも含まれています。

ビューを作成したら、グローバルなviewヘルパーを使用して、アプリケーションのルートまたはコントローラーのいずれかから返すことができます

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});

ビューは、Viewファサードを使用しても返すことができます

use Illuminate\Support\Facades\View;
 
return View::make('greeting', ['name' => 'James']);

ご覧のとおり、viewヘルパーに渡される最初の引数は、resources/viewsディレクトリ内のビューファイルの名前に対応しています。2番目の引数は、ビューで使用できるようにする必要があるデータの配列です。この場合、Blade構文を使用してビューに表示されるname変数を渡しています。

ネストされたビューディレクトリ

ビューは、resources/viewsディレクトリのサブディレクトリ内にネストすることもできます。"ドット"表記法を使用して、ネストされたビューを参照できます。たとえば、ビューがresources/views/admin/profile.blade.phpに保存されている場合、次のようにアプリケーションのルート/コントローラのいずれかから返すことができます

return view('admin.profile', $data);
exclamation

ビューディレクトリ名に.文字を含めることはできません。

最初に利用可能なビューの作成

Viewファサードのfirstメソッドを使用すると、指定されたビューの配列に存在する最初のビューを作成できます。これは、アプリケーションまたはパッケージでビューのカスタマイズまたは上書きを許可する場合に役立ちます

use Illuminate\Support\Facades\View;
 
return View::first(['custom.admin', 'admin'], $data);

ビューが存在するかどうかの判断

ビューが存在するかどうかを判断する必要がある場合は、Viewファサードを使用できます。existsメソッドは、ビューが存在する場合にtrueを返します

use Illuminate\Support\Facades\View;
 
if (View::exists('admin.profile')) {
    // ...
}

ビューへのデータの渡し方

前の例で見たように、ビューにデータの配列を渡して、そのデータをビューで使用できるようにすることができます

return view('greetings', ['name' => 'Victoria']);

この方法で情報を渡す場合、データはキー/値ペアを持つ配列である必要があります。ビューにデータを提供した後、<?php echo $name; ?>などのデータのキーを使用して、ビュー内の各値にアクセスできます。

viewヘルパー関数にデータの完全な配列を渡す代わりに、withメソッドを使用して、個々のデータをビューに追加できます。withメソッドは、ビューオブジェクトのインスタンスを返し、ビューを返す前にメソッドのチェーンを続行できるようにします

return view('greeting')
            ->with('name', 'Victoria')
            ->with('occupation', 'Astronaut');

すべてのビューとデータを共有する

場合によっては、アプリケーションによってレンダリングされるすべてのビューとデータを共有する必要がある場合があります。Viewファサードのshareメソッドを使用して、これを行うことができます。通常、shareメソッドの呼び出しは、サービスプロバイダのbootメソッド内に配置する必要があります。これらをApp\Providers\AppServiceProviderクラスに追加するか、それらを格納する別のサービスプロバイダを生成できます

<?php
 
namespace App\Providers;
 
use Illuminate\Support\Facades\View;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }
 
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        View::share('key', 'value');
    }
}

ビューコンポーザー

ビューコンポーザーは、ビューがレンダリングされるときに呼び出されるコールバックまたはクラスメソッドです。ビューがレンダリングされるたびにビューにバインドするデータがある場合、ビューコンポーザーを使用すると、そのロジックを1つの場所に整理できます。ビューコンポーザーは、同じビューがアプリケーション内の複数のルートまたはコントローラーによって返され、常に特定のデータが必要な場合に特に役立つ可能性があります。

通常、ビューコンポーザーは、アプリケーションのサービスプロバイダの1つに登録されます。この例では、App\Providers\AppServiceProviderがこのロジックを保持することを前提としています。

Viewファサードのcomposerメソッドを使用して、ビューコンポーザーを登録します。Laravelには、クラスベースのビューコンポーザーのデフォルトディレクトリは含まれていないため、好きなように整理できます。たとえば、アプリケーションのすべてのビューコンポーザーを格納するapp/View/Composersディレクトリを作成できます

<?php
 
namespace App\Providers;
 
use App\View\Composers\ProfileComposer;
use Illuminate\Support\Facades;
use Illuminate\Support\ServiceProvider;
use Illuminate\View\View;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }
 
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // Using class based composers...
        Facades\View::composer('profile', ProfileComposer::class);
 
        // Using closure based composers...
        Facades\View::composer('welcome', function (View $view) {
            // ...
        });
 
        Facades\View::composer('dashboard', function (View $view) {
            // ...
        });
    }
}

コンポーザーを登録したので、profileビューがレンダリングされるたびに、App\View\Composers\ProfileComposerクラスのcomposeメソッドが実行されます。コンポーザークラスの例を見てみましょう

<?php
 
namespace App\View\Composers;
 
use App\Repositories\UserRepository;
use Illuminate\View\View;
 
class ProfileComposer
{
    /**
     * Create a new profile composer.
     */
    public function __construct(
        protected UserRepository $users,
    ) {}
 
    /**
     * Bind data to the view.
     */
    public function compose(View $view): void
    {
        $view->with('count', $this->users->count());
    }
}

ご覧のとおり、すべてのビューコンポーザーはサービスコンテナを介して解決されるため、コンポーザーのコンストラクター内で必要な依存関係をタイプヒントで指定できます。

複数のビューにコンポーザーをアタッチする

composerメソッドの最初の引数としてビューの配列を渡すことで、ビューコンポーザーを複数のビューに一度にアタッチできます

use App\Views\Composers\MultiComposer;
use Illuminate\Support\Facades\View;
 
View::composer(
    ['profile', 'dashboard'],
    MultiComposer::class
);

composerメソッドは、ワイルドカードとして*文字も受け入れ、すべてのビューにコンポーザーをアタッチできます

use Illuminate\Support\Facades;
use Illuminate\View\View;
 
Facades\View::composer('*', function (View $view) {
    // ...
});

ビュークリエーター

ビュー「クリエーター」はビューコンポーザーと非常によく似ています。ただし、ビューがレンダリングされるのを待つのではなく、ビューがインスタンス化された直後に実行されます。ビュークリエーターを登録するには、creatorメソッドを使用します

use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;
 
View::creator('profile', ProfileCreator::class);

ビューの最適化

デフォルトでは、Bladeテンプレートビューは要求に応じてコンパイルされます。ビューをレンダリングする要求が実行されると、Laravelはビューのコンパイル済みバージョンが存在するかどうかを判断します。ファイルが存在する場合、Laravelは、コンパイルされていないビューがコンパイル済みビューよりも最近変更されたかどうかを判断します。コンパイル済みビューが存在しないか、コンパイルされていないビューが変更された場合、Laravelはビューを再コンパイルします。

リクエスト中のビューのコンパイルはパフォーマンスにわずかな悪影響を与える可能性があるため、Laravelはアプリケーションで使用されるすべてのビューを事前コンパイルするためのview:cacheArtisanコマンドを提供しています。パフォーマンスを向上させるために、デプロイプロセスの一部としてこのコマンドを実行することをお勧めします

php artisan view:cache

view:clearコマンドを使用してビューキャッシュをクリアできます

php artisan view:clear