ビュー

イントロダクション
- React／Vueでのビュー作成
ビューの作成とレンダー
ビューへのデータ渡し
- 全ビューでのデータ共有
ビューコンポーザ
- ビュークリエタ
ビューの最適化

イントロダクション

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

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

1<!-- View stored in resources/views/greeting.blade.php -->
2 
3<html>
4    <body>
5        <h1>Hello, {{ $name }}</h1>
6    </body>
7</html>

<!-- View stored in resources/views/greeting.blade.php -->

<html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

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

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

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

Bladeテンプレートの書き方について、より詳しい情報をお探しですか？まずは、Bladeの完全なドキュメントをチェックしてください。

React／Vueでのビュー作成

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

Laravelが提供するReactとVueのアプリケーションスターターキットは、Inertiaを利用した次のLaravelアプリケーション開発の素晴らしい出発点になります。

ビューの作成とレンダー

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

1php artisan make:view greeting

php artisan make:view greeting

.blade.php拡張子は、ファイルにBladeテンプレートが含まれていることをフレームワークに知らせます。BladeテンプレートにはHTMLだけでなく、値を簡単にechoしたり、「if」文を作成したり、データをループしたりできるBladeディレクティブが含まれています。

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

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

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

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

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

use Illuminate\Support\Facades\View;

return View::make('greeting', ['name' => 'James']);

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

最初に見つかったビューの作成

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

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

use Illuminate\Support\Facades\View;

return View::first(['custom.admin', 'admin'], $data);

ビューの存在確認

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

1use Illuminate\Support\Facades\View;
2 
3if (View::exists('admin.profile')) {
4    // ...
5}

use Illuminate\Support\Facades\View;

if (View::exists('admin.profile')) {
    // ...
}

ビューへのデータ渡し

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

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

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

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

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

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

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

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

 1<?php
 2 
 3namespace App\Providers;
 4 
 5use Illuminate\Support\Facades\View;
 6 
 7class AppServiceProvider extends ServiceProvider
 8{
 9    /**
10     * Register any application services.
11     */
12    public function register(): void
13    {
14        // ...
15    }
16 
17    /**
18     * Bootstrap any application services.
19     */
20    public function boot(): void
21    {
22        View::share('key', 'value');
23    }
24}

<?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ディレクトリを作成できます。

 1<?php
 2 
 3namespace App\Providers;
 4 
 5use App\View\Composers\ProfileComposer;
 6use Illuminate\Support\Facades;
 7use Illuminate\Support\ServiceProvider;
 8use Illuminate\View\View;
 9 
10class AppServiceProvider extends ServiceProvider
11{
12    /**
13     * Register any application services.
14     */
15    public function register(): void
16    {
17        // ...
18    }
19 
20    /**
21     * Bootstrap any application services.
22     */
23    public function boot(): void
24    {
25        // Using class based composers...
26        Facades\View::composer('profile', ProfileComposer::class);
27 
28        // Using closure based composers...
29        Facades\View::composer('welcome', function (View $view) {
30            // ...
31        });
32 
33        Facades\View::composer('dashboard', function (View $view) {
34            // ...
35        });
36    }
37}

<?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メソッドが実行されます。コンポーザクラスの例を見てみましょう。

 1<?php
 2 
 3namespace App\View\Composers;
 4 
 5use App\Repositories\UserRepository;
 6use Illuminate\View\View;
 7 
 8class ProfileComposer
 9{
10    /**
11     * Create a new profile composer.
12     */
13    public function __construct(
14        protected UserRepository $users,
15    ) {}
16 
17    /**
18     * Bind data to the view.
19     */
20    public function compose(View $view): void
21    {
22        $view->with('count', $this->users->count());
23    }
24}

<?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メソッドの最初の引数にビューの配列を渡すことで、ビューコンポーザを一度に複数のビューにアタッチできます。

1use App\Views\Composers\MultiComposer;
2use Illuminate\Support\Facades\View;
3 
4View::composer(
5    ['profile', 'dashboard'],
6    MultiComposer::class
7);

use App\Views\Composers\MultiComposer;
use Illuminate\Support\Facades\View;

View::composer(
    ['profile', 'dashboard'],
    MultiComposer::class
);

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

1use Illuminate\Support\Facades;
2use Illuminate\View\View;
3 
4Facades\View::composer('*', function (View $view) {
5    // ...
6});

use Illuminate\Support\Facades;
use Illuminate\View\View;

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

ビュークリエタ

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

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

use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;

View::creator('profile', ProfileCreator::class);

ビューの最適化

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

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

1php artisan view:cache

php artisan view:cache

ビューキャッシュをクリアするには、view:clearコマンドを使用します。

1php artisan view:clear

php artisan view:clear

序文

はじめに

アーキテクチャのコンセプト

基本

より深く知る

セキュリティ

データベース

Eloquent ORM

テスト

パッケージ

ビュー

イントロダクション

React／Vueでのビュー作成

ビューの作成とレンダー

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

最初に見つかったビューの作成

ビューの存在確認

ビューへのデータ渡し

ビューコンポーザ

コンポーザを複数のビューへアタッチ

ビュークリエタ

ビューの最適化

製品

パッケージ

リソース