#はじめに
もちろん、ルートやコントローラーから直接HTMLドキュメント全体の文字列を返すのは実用的ではありません。幸いなことに、ビューを使うことでHTMLを別ファイルに分けて管理できます。
ビューはコントローラーやアプリケーションのロジックとプレゼンテーションのロジックを分離し、resources/views ディレクトリに保存されます。Laravelでは、ビューのテンプレートは通常Bladeテンプレート言語で書かれます。シンプルなビューは次のようになります:
<!-- 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はInertiaのおかげで、SPA構築の複雑さを避けつつReactやVueのフロントエンドをLaravelバックエンドに簡単に結びつけられます。
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と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
{
/**
* アプリケーションサービスの登録。
*/
public function register(): void
{
// ...
}
/**
* アプリケーションサービスの起動処理。
*/
public function boot(): void
{
View::share('key', 'value');
}
}
#ビューコンポーザー
ビューコンポーザーは、ビューがレンダリングされる際に呼ばれるコールバックやクラスメソッドです。ビューがレンダリングされるたびに特定のデータをバインドしたい場合、ビューコンポーザーを使うとそのロジックを一箇所にまとめられます。複数のルートやコントローラーで同じビューを返し、常に特定のデータが必要な場合に特に便利です。
通常、ビューコンポーザーはアプリケーションのサービスプロバイダーのいずれかで登録します。この例では、App\Providers\ViewServiceProvider を作成してロジックを管理すると仮定します。
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 ViewServiceProvider extends ServiceProvider
{
/**
* アプリケーションサービスの登録。
*/
public function register(): void
{
// ...
}
/**
* アプリケーションサービスの起動処理。
*/
public function boot(): void
{
// クラスベースのコンポーザーを使用...
Facades\View::composer('profile', ProfileComposer::class);
// クロージャベースのコンポーザーを使用...
Facades\View::composer('welcome', function (View $view) {
// ...
});
Facades\View::composer('dashboard', function (View $view) {
// ...
});
}
}
ビューコンポーザーの登録用に新しいサービスプロバイダーを作成した場合は、config/app.php の providers 配列にそのサービスプロバイダーを追加する必要があります。
コンポーザーを登録したので、profile ビューがレンダリングされるたびに App\View\Composers\ProfileComposer クラスの compose メソッドが実行されます。コンポーザークラスの例を見てみましょう:
<?php
namespace App\View\Composers;
use App\Repositories\UserRepository;
use Illuminate\View\View;
class ProfileComposer
{
/**
* 新しいプロフィールコンポーザーを作成。
*/
public function __construct(
protected UserRepository $users,
) {}
/**
* ビューにデータをバインド。
*/
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は view:cache Artisanコマンドを提供し、アプリケーションで使われるすべてのビューを事前にコンパイルできます。パフォーマンス向上のため、デプロイ時にこのコマンドを実行することをおすすめします:
php artisan view:cache
ビューキャッシュをクリアするには、view:clear コマンドを使います:
php artisan view:clear