イントロダクションIntroduction
もちろん、ルートやコントローラから直接HTML文書全体の文字列を返すのは現実的ではありません。ありがたいことに、ビューがすべてのHTMLを別々のファイルに格納する便利な方法を提供します。Of course, it's not practical to return entire HTML documents strings directly from your routes and controllers. Thankfully, views provide a convenient way to place all of our HTML in separate files.
ビューは、コントローラ/アプリケーションロジックをプレゼンテーションロジックから分離し、resources/viewsディレクトリに格納されます。Laravelを使用する場合、ビューテンプレートは通常、Bladeテンプレート言語で記述します。単純なビューは以下のようになります。Views separate your controller / application logic from your presentation logic and are stored in the resources/views directory. When using Laravel, view templates are usually written using the Blade templating language[/docs/{{version}}/blade]. A simple view might look something like this:
<!-- View stored in resources/views/greeting.blade.php -->
<html>
<body>
<h1>Hello, {{ $name }}</h1>
</body>
</html>
このビューをresources/views/greeting.blade.phpとして保存し、以下のようにグローバルviewヘルパ関数を使用し結果を返します。Since this view is stored at resources/views/greeting.blade.php, we may return it using the global view helper like so:
Route::get('/', function () {
return view('greeting', ['name' => 'James']);
});
Note: Bladeテンプレートの作成方法の詳細をお探しですか？最初に完全なBladeドキュメントを確認してください。[!NOTE]
Looking for more information on how to write Blade templates? Check out the full Blade documentation[/docs/{{version}}/blade] to get started.
React/Vueでのビュー記述Writing Views in React / Vue
フロントエンドのテンプレートをBladeを使ってPHPで書く代わりに、多くの開発者はReactやVueを使ってテンプレートを書くことを好むようになりました。Laravelでは、Inertiaというライブラリのおかげで、React / VueのフロントエンドをLaravelのバックエンドに簡単に結びつけることができ、典型的なSPAの構築のように複雑なことは必要ありません。Instead of writing their frontend templates in PHP via Blade, many developers have begun to prefer to write their templates using React or Vue. Laravel makes this painless thanks to Inertia[https://inertiajs.com/], a library that makes it a cinch to tie your React / Vue frontend to your Laravel backend without the typical complexities of building an SPA.
BreezeとJetstreamのスターターキットは、Inertiaを利用する次のLaravelアプリケーションのための素晴らしい開始点を提供します。また、Laravel Bootcampは、VueとReactの例を含め、Inertiaを利用したLaravelアプリケーションの構築の完全なデモンストレーションを提供しています。Our Breeze and Jetstream starter kits[/docs/{{version}}/starter-kits] give you a great starting point for your next Laravel application powered by Inertia. In addition, the Laravel Bootcamp[https://bootcamp.laravel.com] provides a full demonstration of building a Laravel application powered by Inertia, including examples in Vue and React.
ビューの作成とレンダCreating and Rendering Views
アプリケーションのresources/viewsディレクトリに.blade.php拡張子のファイルを置くか、make:view Artisan コマンドを使用してビューを作成できます。You may create a view by placing a file with the .blade.php extension in your application's resources/views directory or by using the make:view Artisan command:
php artisan make:view greeting
.blade.php拡張子は、そのファイルがBlade テンプレートを含んでいることをフレームワークに知らせます。BladeテンプレートにはHTMLとBladeディレクティブが含まれており、簡単に値をエコーしたり、"if"ステートメントを作成したり、データを反復処理したりできます。The .blade.php extension informs the framework that the file contains a Blade template[/docs/{{version}}/blade]. Blade templates contain HTML as well as Blade directives that allow you to easily echo values, create "if" statements, iterate over data, and more.
ビューを作成したら、グローバルなviewヘルパを使用して、アプリケーションのルートまたはコントローラからビューを返すことができます。Once you have created a view, you may return it from one of your application's routes or controllers using the global view helper:
Route::get('/', function () {
return view('greeting', ['name' => 'James']);
});
ビューは、Viewファサードを使用して返すこともできます。Views may also be returned using the View facade:
use Illuminate\Support\Facades\View;
return View::make('greeting', ['name' => 'James']);
ご覧のとおり、viewヘルパに渡す最初の引数は、resources/viewsディレクトリ内のビューファイルの名前に対応しています。２番目の引数は、ビューで使用するデータの配列です。この場合、Blade構文を使用してビューに表示する、name変数を渡しています。As you can see, the first argument passed to the view helper corresponds to the name of the view file in the resources/views directory. The second argument is an array of data that should be made available to the view. In this case, we are passing the name variable, which is displayed in the view using Blade syntax[/docs/{{version}}/blade].
ネストしたビューディレクトリNested View Directories
ビューは、resources/viewsディレクトリのサブディレクトリ内にネストすることもできます。「ドット」表記は、ネストしたビューを参照するために使用できます。たとえば、ビューがresources/views/admin/profile.blade.phpに保存されている場合、以下のようにアプリケーションのルート／コントローラからビューを返すことができます。Views may also be nested within subdirectories of the resources/views directory. "Dot" notation may be used to reference nested views. For example, if your view is stored at resources/views/admin/profile.blade.php, you may return it from one of your application's routes / controllers like so:
return view('admin.profile', $data);
Warning! ビューのディレクトリ名には、
.文字を含めてはいけません。[!WARNING]
View directory names should not contain the.character.
最初に利用可能なビューCreating the First Available View
Viewファサードのfirstメソッドを使用して、指定したビューの配列に存在する最初のビューを生成できます。これは、アプリケーションまたはパッケージでビューのカスタマイズまたは上書きが許可されている場合に役立つでしょう。Using the View facade's first method, you may create the first view that exists in a given array of views. This may be useful if your application or package allows views to be customized or overwritten:
use Illuminate\Support\Facades\View;
return View::first(['custom.admin', 'admin'], $data);
ビューの存在の判定Determining if a View Exists
ビューが存在しているかを判定する必要があれば、Viewファサードを使います。ビューが存在していれば、existsメソッドはtrueを返します。If you need to determine if a view exists, you may use the View facade. The exists method will return true if the view exists:
use Illuminate\Support\Facades\View;
if (View::exists('admin.profile')) {
// ...
}
ビューにデータを渡すPassing Data to Views
前例で見たように、データの配列をビューに渡し、そのデータをビューで使用できます。As you saw in the previous examples, you may pass an array of data to views to make that data available to the view:
return view('greetings', ['name' => 'Victoria']);
この方法で情報を渡す場合、データはキー／値ペアの配列です。ビューにデータを渡した後、<?php echo $name; ?>などのデータキーを使用して、ビュー内の各値にアクセスします。When passing information in this manner, the data should be an array with key / value pairs. After providing data to a view, you can then access each value within your view using the data's keys, such as <?php echo $name; ?>.
データの完全な配列をviewヘルパ関数に渡す代わりに、withメソッドを使用して個々のデータをビューへ追加することもできます。withメソッドはビューオブジェクトのインスタンスを返すため、ビューを返す前にメソッドのチェーンを続けられます。As an alternative to passing a complete array of data to the view helper function, you may use the with method to add individual pieces of data to the view. The with method returns an instance of the view object so that you can continue chaining methods before returning the view:
return view('greeting')
->with('name', 'Victoria')
->with('occupation', 'Astronaut');
すべてのビューでデータを共有Sharing Data With All Views
時に、アプリケーションがレンダするすべてのビューとデータを共有する必要が起きます。これは、Viewファサードのshareメソッドで可能です。通常、サービスプロバイダのbootメソッド内でshareメソッドを呼び出す必要があります。それらをApp\Providers\AppServiceProviderクラスへ追加するか、それらを収容するための別のサービスプロバイダを生成することもできます。Occasionally, you may need to share data with all views that are rendered by your application. You may do so using the View facade's share method. Typically, you should place calls to the share method within a service provider's boot method. You are free to add them to the App\Providers\AppServiceProvider class or generate a separate service provider to house them:
<?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');
}
}
ビューコンポーザView Composers
ビューコンポーザは、ビューをレンダするときに呼び出すコールバックまたはクラスメソッドです。ビューをレンダするたびにビューへ結合するデータがある場合、ビューコンポーザを使用すると、そのロジックを１つの場所に集約できます。ビューコンポーザは、アプリケーション内の複数のルートかコントローラが同じビューを返し、常に特定のデータが必要な場合にきわめて役立ちます。View composers are callbacks or class methods that are called when a view is rendered. If you have data that you want to be bound to a view each time that view is rendered, a view composer can help you organize that logic into a single location. View composers may prove particularly useful if the same view is returned by multiple routes or controllers within your application and always needs a particular piece of data.
通常、ビューコンポーザはアプリケーションのサービスプロバイダの１つで登録します。この例では、App\Providers\AppServiceProviderへこのロジックを格納すると仮定しましょう。Typically, view composers will be registered within one of your application's service providers[/docs/{{version}}/providers]. In this example, we'll assume that the App\Providers\AppServiceProvider will house this logic.
Viewファサードのcomposerメソッドを使用して、ビューコンポーザを登録します。Laravelには、クラスベースのビューコンポーザーのデフォルトディレクトリが含まれていないため、自由に整理できます。たとえば、app/View/Composersディレクトリを作成して、アプリケーションのすべてのビューコンポーザを保存できます。We'll use the View facade's composer method to register the view composer. Laravel does not include a default directory for class based view composers, so you are free to organize them however you wish. For example, you could create an app/View/Composers directory to house all of your application's 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
{
/**
* 全アプリケーションサービスの登録
*/
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) {
// ...
});
}
}
コンポーザを登録したので、profileビューがレンダされるたびにApp\View\Composers\ProfileComposerクラスのcomposeメソッドが実行されます。コンポーザクラスの例を見てみましょう。Now that we have registered the composer, the compose method of the App\View\Composers\ProfileComposer class will be executed each time the profile view is being rendered. Let's take a look at an example of the composer class:
<?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());
}
}
ご覧のとおり、すべてのビューコンポーザはサービスコンテナを介して依存解決されるため、コンポーザのコンストラクタ内で必要な依存関係を依存注入できます。As you can see, all view composers are resolved via the service container[/docs/{{version}}/container], so you may type-hint any dependencies you need within a composer's constructor.
複数ビューへの適用Attaching a Composer to Multiple Views
複数のビューにビューコンポーザを適用するには、composerメソッドの最初の引数にビューの配列を渡してください。You may attach a view composer to multiple views at once by passing an array of views as the first argument to the composer method:
use App\Views\Composers\MultiComposer;
use Illuminate\Support\Facades\View;
View::composer(
['profile', 'dashboard'],
MultiComposer::class
);
全ビューコンポーザに適用するため、composerメソッドは*をワイルドカードとして使用できます。The composer method also accepts the * character as a wildcard, allowing you to attach a composer to all views:
use Illuminate\Support\Facades;
use Illuminate\View\View;
Facades\View::composer('*', function (View $view) {
// ...
});
ビュークリエータView Creators
ビューの「クリエータ」は、ビューコンポーザと非常によく似ています。ただし、ビューがレンダリングされるまで待つのではなく、ビューがインスタンス化された直後に実行されます。ビュークリエータを登録するには、creatorメソッドを使用します。View "creators" are very similar to view composers; however, they are executed immediately after the view is instantiated instead of waiting until the view is about to render. To register a view creator, use the creator method:
use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;
View::creator('profile', ProfileCreator::class);
ビューの最適化Optimizing Views
Bladeテンプレートビューはデフォルトでは、オンデマンドでコンパイルされます。ビューをレンダするリクエストが実行されると、Laravelはコンパイル済みバージョンのビューが存在するかどうかを判断します。ファイルが存在する場合、Laravelはコンパイルされていないビューがコンパイル済みビューよりも最近変更されたかどうかを判断します。コンパイル済みビューが存在しないか、コンパイルされていないビューが変更されている場合、Laravelはビューをコンパイルします。By default, Blade template views are compiled on demand. When a request is executed that renders a view, Laravel will determine if a compiled version of the view exists. If the file exists, Laravel will then determine if the uncompiled view has been modified more recently than the compiled view. If the compiled view either does not exist, or the uncompiled view has been modified, Laravel will recompile the view.
リクエスト中にビューをコンパイルすると、パフォーマンスにわずかな悪影響が及ぶ可能性があるため、Laravelは、アプリケーションで使用するすべてのビューをプリコンパイルするためにview:cache Artisanコマンドを提供しています。パフォーマンスを向上させるために、デプロイプロセスの一部として次のコマンドを実行することを推奨します。Compiling views during the request may have a small negative impact on performance, so Laravel provides the view:cache Artisan command to precompile all of the views utilized by your application. For increased performance, you may wish to run this command as part of your deployment process:
php artisan view:cache
ビューキャッシュを消去するには、view:clearコマンドを使います。You may use the view:clear command to clear the view cache:
php artisan view:clear