ビュー

はじめに

もちろん、ルートやコントローラから直接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']);
    });

注記

Bladeテンプレートの書き方についてさらに詳細を知りたいですか？始めるための完全なBladeドキュメントをチェックしてみてください。

React / Vue でのビューの書き方

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

当社のBreezeおよびJetstreamのスターターキットは、Inertiaを活用した次のLaravelアプリケーションの素晴らしい出発点を提供します。さらに、Laravel Bootcampでは、VueやReactの例を含むInertiaによって駆動されるLaravelアプリケーションの構築の完全なデモンストレーションを提供しています。

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

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

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番目の引数は、ビューで利用可能にする必要があるデータの配列です。この場合、name 変数を渡しており、Blade 構文を使用してビューで表示されます。

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

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

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

警告

ビューディレクトリの名前には . 文字を含めないでください。

最初に利用可能なビューを作成する

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) {
                // ...
            });
        }
    }

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

    <?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をアタッチする

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

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

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

composer メソッドは * 文字もワイルドカードとして受け入れるため、すべてのビューに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:cache Artisanコマンドを提供しています。パフォーマンスを向上させるためには、このコマンドを展開プロセスの一部として実行することをお勧めします：

php artisan view:cache

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

php artisan view:clear

ビュー

はじめに​

React / Vue でのビューの書き方​

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

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

最初に利用可能なビューを作成する​

ビューの存在を確認する​

ビューにデータを渡す​

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

ビューコンポーザ​

複数のビューにComposerをアタッチする​

ビュークリエータ​

ビューの最適化​